<template>
  <header class="info-container__header">
    <el-tooltip
      :content="defenseNoticeDetail?.title"
      placement="bottom-start"
      effect="light"
      :hide-after="0"
      v-if="defenseNoticeDetail?.title && defenseNoticeDetail.title.length > 50"
    >
      <span class="title">{{ defenseNoticeDetail?.title }}</span>
    </el-tooltip>
    <span class="title" v-else>{{ defenseNoticeDetail?.title }}</span>
    <div class="disaster">
      <p class="info-item">
        灾害类型：<span class="info-content">{{ getDisasterType(defenseNoticeDetail?.disasterType || '') }}</span>
      </p>
      <p class="info-item">
        灾害等级：<span class="info-content">{{ getDisasterLevel(defenseNoticeDetail?.disasterLevel || '') }}</span>
      </p>
    </div>
    <span class="publish-info">
      <p class="info-item">
        <span>{{ defenseNoticeDetail?.pushTime ? '发布人：' : '创建人：' }}</span>
        <span class="info-content">
          {{ defenseNoticeDetail?.pushTime ? defenseNoticeDetail.pushName : defenseNoticeDetail?.realname }}
          &nbsp;&nbsp;
          {{ defenseNoticeDetail?.pushTime }}
        </span>
      </p>
    </span>
  </header>
  <section class="divider"></section>
  <section class="content">
    <div v-html="defenseNoticeDetail?.content"></div>
  </section>
  <section class="attachment" v-if="defenseNoticeDetail?.attachmentListRes.length">
    <span class="info-content" style="font-size: 14px">文件({{ defenseNoticeDetail?.attachmentListRes.length }})</span>
    &nbsp;
    <a @click="downloadAll">导出全部</a>
    <div class="attachment-list">
      <div
        class="attachment-item"
        v-for="item in defenseNoticeDetail?.attachmentListRes"
        :key="item.fileId"
        @click="previewOnline(item.fileUrl, item.fileType as keyof typeof FILE_TYPE_ICON)"
      >
        <span class="attachment-item--name">{{ item.fileName }}</span>
        <div class="attachment-item--footer">
          <div class="info">
            <img :src="FILE_TYPE_ICON[item.fileType as keyof typeof FILE_TYPE_ICON]" />
            <span>{{ item.fileSize }}</span>
          </div>
          <a @click.stop="downloadFile(item.fileUrl, item.fileName)">导出</a>
        </div>
      </div>
    </div>
  </section>
  <PreviewOnline ref="previewOnlineRef" />
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
  import { useDisasterWarningHook } from '../hook';
  import { FILE_TYPE_ICON } from '@/components/UploadFiles/constants';
  import { downloadFile } from '@/views/disaster/utils';
  import type { DefenseNoticeDetailResponse } from '@/types/disaster-warning';
  import { getDefenseNoticeDetail } from '@/api/disaster-warning';

  const props = defineProps<{
    id: number;
  }>();

  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
  const { getDisasterTypeDict, getDisasterLevelDict, getDisasterType, getDisasterLevel } = useDisasterWarningHook();

  const previewOnline = (url: string | undefined, type: keyof typeof FILE_TYPE_ICON) => {
    if (url) {
      previewOnlineRef.value?.open(url, type);
    }
  };

  const defenseNoticeDetail = ref<DefenseNoticeDetailResponse>();

  const downloadAll = () => {
    defenseNoticeDetail.value?.attachmentListRes.forEach((item) => {
      downloadFile(item.fileUrl, item.fileName);
    });
  };

  onMounted(() => {
    getDefenseNoticeDetail(props.id).then((res) => {
      defenseNoticeDetail.value = res;
    });
    getDisasterTypeDict();
    getDisasterLevelDict();
  });
</script>

<style scoped lang="scss">
  @use '../style/view-common.scss' as *;
  .attachment {
    margin-top: 18px;
    a {
      font-size: 14px;
      color: $primary-color;
      cursor: pointer;
    }
  }
  .attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
  }
  .attachment-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 220px;
    height: 81px;
    padding: 16px 10px;
    background: #eee;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    &:hover {
      background: #ddd;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    &--name {
      width: 100%;
      font-size: 14px;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &--footer {
      @include flex-center;
      justify-content: space-between;
      font-size: 14px;
      .info {
        @include flex-center;
        gap: 2px;
        img {
          width: 16px;
          height: 16px;
        }
        span {
          color: #999;
        }
      }
    }
  }
</style>
