<template>
  <main class="safety-platform-container__main">
    <header class="info-container__header">
      <el-tooltip
        :content="NoticeDetail?.name"
        placement="bottom-start"
        effect="light"
        :hide-after="0"
        v-if="NoticeDetail?.name && NoticeDetail.name.length > 50"
      >
        <span class="title">{{ NoticeDetail?.name }}</span>
      </el-tooltip>
      <span class="title" v-else>{{ NoticeDetail?.name }}</span>
      <div class="notice">
        <p class="info-item">
          创建人：<span class="info-content">{{ NoticeDetail?.creatName }}</span>
        </p>
        <p class="info-item">
          发布时间：<span class="info-content">{{ NoticeDetail?.pushTime }}</span>
        </p>
      </div>
    </header>
    <section class="divider"></section>
    <section class="content">
      <div v-html="NoticeDetail?.content"></div>
    </section>
    <section class="file" v-if="NoticeDetail?.attachment?.length">
      <span class="info-content" style="font-size: 14px">附件({{ NoticeDetail?.attachment.length }})</span>
      &nbsp;
      <a @click="downloadAll">下载全部</a>
      <div class="file-list">
        <div
          class="file-item"
          v-for="item in NoticeDetail.attachment"
          :key="item.fileId"
          @click="previewOnline(item.fileUrl, item.fileType as keyof typeof FILE_TYPE_ICON)"
        >
          <span class="file-item--name">{{ item.fileName }}</span>
          <div class="file-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>
  </main>

  <PreviewOnline ref="previewOnlineRef" />
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
  import { downloadFile } from '@/views/disaster/utils';
  import { FILE_TYPE_ICON } from '@/components/UploadFiles/constants';
  import { unformatAttachment } from '@/components/UploadFiles/utils';
  import { getNoticeDetail } from '@/api/security-confidentiality-regulation-notice/security-regulation-notice';

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

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

  const NoticeDetail = ref();

  const getDetail = async () => {
    const res = await getNoticeDetail(props.id);
    NoticeDetail.value = {
      id: props.id,
      content: res.content,
      attachment: unformatAttachment(res.attachment),
      effectState: res.effectState,
      pushTime: res.pushTime,
      isPush: res.isPush,
      remark: res.remark,
      creatName: res.creatName,
      name: res.name,
    };
  };

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

  onMounted(async () => {
    await getDetail();
  });
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;
  @use '../style/view-page.scss' as *;
</style>
