<template>
  <div class="disaster-information">
    <div class="disaster-information__title">
      <div class="disaster-information--line"></div>
      <span>整改信息</span>
    </div>
    <div class="disaster-information__content">
      <div class="disaster-information__content--title">
        <p v-show="rectificationDeptName">
          整改部门：<span>{{ rectificationDeptName }}</span>
        </p>
        <p v-show="rectificationResponsibleUserList.length">
          整改责任人：
          <span>
            {{ rectificationResponsibleUserList[0]?.realname }}（{{ rectificationResponsibleUserList[0]?.staffNo }}）
          </span>
          <a v-if="rectificationResponsibleUserList.length > 1" @click="groupInfo = true">查看详情</a>
        </p>
        <p v-show="rectificationPriority">
          处置优先级：<span>{{ getPriority(rectificationPriority) }}</span>
        </p>
      </div>
      <BasicTable :tableData="[...rectificationList].reverse()" :tableConfig="tableConfig">
        <template #fixMethod="scope">
          <div class="long-text-container">
            <el-tooltip
              :content="scope.row.fixMethod"
              placement="top-start"
              effect="light"
              :popper-class="['custom-tooltip', isToolTip(scope.row.fixMethod) ? '' : 'custom-tooltip--opacity0']"
            >
              <span>{{ scope.row.fixMethod }}</span>
            </el-tooltip>
          </div>
        </template>
        <template #remark="scope">
          <div class="long-text-container">
            <el-tooltip
              :content="scope.row.remark"
              placement="top-start"
              effect="light"
              :popper-class="['custom-tooltip', isToolTip(scope.row.fixMethod) ? '' : 'custom-tooltip--opacity0']"
            >
              <span>{{ scope.row.remark }}</span>
            </el-tooltip>
          </div>
        </template>
        <template #fixImages="scope">
          <div class="image-container" v-if="JSON.parse(scope.row.fixImages).length">
            <el-image
              :src="JSON.parse(scope.row.fixImages)[0]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="JSON.parse(scope.row.fixImages)"
              :initial-index="0"
              show-progress
              fit="cover"
              preview-teleported
            />
            <span class="image-count"> 共{{ JSON.parse(scope.row.fixImages).length }}张 </span>
          </div>
          <div class="empty-container" v-else>
            <span>--</span>
          </div>
        </template>
        <template #fixStatus="scope">
          <span>{{ getFixStatus(scope.row.fixStatus) }}</span>
        </template>
        <template #fixMaterials="scope">
          <div class="material-container" v-if="JSON.parse(scope.row.fixMaterials).length">
            <div class="material-container--item" v-for="item in JSON.parse(scope.row.fixMaterials)" :key="item.fileId">
              <div
                class="material-container--left"
                @click="previewOnline(item.fileUrl, item.fileType as keyof typeof FILE_TYPE_ICON)"
              >
                <img :src="FILE_TYPE_ICON[item.fileType]" />
                <span>{{ item.fileName }}</span>
              </div>
              <img :src="DownloadIcon" class="download-icon" @click="downloadFile(item.fileUrl, item.fileName)" />
            </div>
          </div>
          <div class="empty-container" v-else>
            <span>--</span>
          </div>
        </template>
      </BasicTable>
    </div>
    <PreviewOnline ref="previewOnlineRef" />
    <el-dialog v-model="groupInfo" title="整改责任人详情" align-center class="customDialog--pushObject">
      <div class="user-info">
        <el-tag type="primary" v-for="user in rectificationResponsibleUserList" :key="user.id">
          {{ user.realname }}（{{ user.staffNo }}）
        </el-tag>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import BasicTable from '@/components/BasicTable.vue';
  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import { useDisasterControlHook } from '../hook';
  import { downloadFile } from '@/views/disaster/utils';
  import { isToolTip } from '../util';
  import type { DisposalRectificationFormData } from '@/types/disaster-control';
  import type { PersonGroupItem } from '@/types/person-group/type';
  import { RECTIFICATION_INFO_TABLE_COLUMNS, RECTIFICATION_INFO_TABLE_OPTIONS } from '../config';
  import { FILE_TYPE_ICON } from '@/components/UploadFiles/constants';
  import { FIX_STATUS_OPTIONS_DISPOSAL_RECTIFICATION } from '../constant';
  import DownloadIcon from '../svg/download.svg';

  defineProps<{
    rectificationList: DisposalRectificationFormData[];
    rectificationDeptName: string;
    rectificationResponsibleUserList: PersonGroupItem[];
    rectificationPriority: string;
  }>();

  const { getPriority, getPriorityDict } = useDisasterControlHook();
  const groupInfo = ref(false);
  const getFixStatus = (status: number) => {
    return FIX_STATUS_OPTIONS_DISPOSAL_RECTIFICATION.find((item) => item.value === status)?.label;
  };
  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 { tableConfig } = useTableConfig(RECTIFICATION_INFO_TABLE_COLUMNS, RECTIFICATION_INFO_TABLE_OPTIONS, false);
  tableConfig.loading = false;
  onMounted(() => {
    getPriorityDict();
  });
</script>

<style lang="scss" scoped>
  @use '../style/view-item.scss' as *;
  .disaster-information {
    background-color: $white-color;
    padding: 10px;
    border-radius: 4px;
  }
  .disaster-information__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 12px;
    &--title {
      display: flex;
      gap: 100px;
      font-size: 14px;
      font-weight: 0;
      p {
        color: rgba($text-color, 0.85);
      }
      span {
        color: rgba($text-color, 0.65);
      }
      a {
        margin-left: 5px;
        color: $primary-color;
        cursor: pointer;
      }
    }
  }
  .image-container {
    position: relative;
  }
  .el-image {
    display: block !important;
    position: relative;
    width: 100%;
    height: 100px;
  }
  .image-count {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 5px;
    background: rgba($text-color, 0.6);
    color: rgba($white-color, 0.7);
    font-size: 14px;
    pointer-events: none;
  }
  .material-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    cursor: pointer;
    &--item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 2px 5px;
      &:hover {
        background-color: #f8f9fa;
        box-shadow: 0 0 5px 0 rgba($text-color, 0.1);
      }
    }
    &--left {
      display: flex;
      gap: 4px;
      align-items: center;
      flex: 1;
      img {
        width: 12px;
      }
      span {
        width: 110px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .download-icon {
      width: 16px;
    }
  }
  .empty-container {
    width: 100%;
  }
  .user-info {
    display: flex;
    gap: 10px;
  }
  .el-tag {
    font-weight: 500;
    font-size: 12px;
    color: $primary-color;
    line-height: 20px;
  }
  .long-text-container {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
