<template>
  <div class="info-container">
    <header class="info-container__header">
      <span class="title">{{ defenseNoticeDetail?.noticeTitle }}</span>
      <div class="disaster">
        <p class="info-item">
          类型：<span class="info-content">{{ defenseNoticeDetail?.disasterType }}</span>
        </p>
        <p class="info-item">
          灾害等级：<span class="info-content">{{ defenseNoticeDetail?.disasterLevel }}</span>
        </p>
      </div>
      <span class="publish-info">
        <p class="info-item">
          发布人：<span class="info-content"
            >{{ defenseNoticeDetail?.createUser }}{{ defenseNoticeDetail?.publishTime }}</span
          >
        </p>
      </span>
    </header>
    <section class="divider"></section>
    <section class="content">
      <div v-html="defenseNoticeDetail?.noticeContent"></div>
    </section>
    <section class="attachment">
      <span class="info-content">附件（{{ defenseNoticeDetail?.noticeAttachment.length }}）</span>
      <a @click="downloadAll">下载全部</a>
      <div class="attachment-list">
        <div
          class="attachment-item"
          v-for="item in defenseNoticeDetail?.noticeAttachment"
          :key="item.id"
          @click="previewOnline(item.downloadUrl, 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.downloadUrl, item.fileName)">下载</a>
          </div>
        </div>
      </div>
    </section>
    <PreviewOnline ref="previewOnlineRef" />
  </div>
</template>

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

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

  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();

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

  const defenseNoticeDetail = ref<DefenseNoticeDetailResponse>();

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

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

<style scoped lang="scss">
  .info-container {
    width: 100%;
    height: 100%;
    &__header {
      display: flex;
      flex-direction: column;
    }
  }
  .title {
    font-size: 20cpx;
    font-weight: 600;
    color: rgba($text-color, 0.85);
    margin-bottom: 18cpx;
  }
  .disaster {
    display: flex;
    gap: 370cpx;
    margin-bottom: 8cpx;
  }
  .info-item {
    color: rgba($text-color, 0.85);
  }
  .info-content,
  .content {
    color: rgba($text-color, 0.65);
  }

  .content {
    max-height: 500cpx;
    overflow-y: auto;
    white-space: pre-wrap;
  }

  .divider {
    width: 100%;
    height: 1px;
    background-color: #979797;
    margin-top: 18cpx;
    margin-bottom: 18cpx;
  }
  .attachment {
    max-height: 150cpx;
    overflow-y: auto;
    margin-top: 18cpx;
    a {
      color: $primary-color;
      cursor: pointer;
    }
  }
  .attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10cpx;
    margin-top: 10cpx;
  }
  .attachment-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 220cpx;
    height: 81cpx;
    padding: 16cpx 10cpx;
    background: #eee;
    border-radius: 8cpx;
    cursor: pointer;
    transition: all 0.3s ease;
    &:hover {
      background: #ddd;
      box-shadow: 0 0 10cpx rgba(0, 0, 0, 0.1);
    }
    &--name {
      font-size: 14cpx;
      color: #333;
    }
    &--footer {
      @include flex-center;
      justify-content: space-between;
      .info {
        @include flex-center;
        gap: 2cpx;
        img {
          width: 16cpx;
          height: 16cpx;
        }
        span {
          color: #999;
        }
      }
    }
  }
</style>
