<script name="detailDialog" setup>
import { ref, watch } from 'vue'
import Accessory from '@/components/accessory/index.vue'
import { detail } from '@/http/apis/projectSafetyRiskMonitor/securityPersonnelControl'
import store from '@/store'

const {
  insuranceLevel
} = store.dictStore.globalDicts || {}
const
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: Object
  }),
  emits = defineEmits(['close']),
  column1 = [
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '项目安全负责人',
      key: 'username',
      prop: 'username'
    },
    {
      label: '联系方式',
      key: 'contactInfo',
      prop: 'contactInfo'
    },
    {
      label: '项目保险协议',
      key: 'investigationReport',
      slot: 'investigationReport'
    }
  ],
  column2 = [{
    label: '序号',
    type: 'index',
    width: '60'
  },
  {
    label: '厂商人员姓名',
    key: 'username',
    prop: 'username'
  },
  {
    label: '联系方式',
    key: 'contactInfo',
    prop: 'contactInfo'
  },
  {
    label: '保密协议',
    key: 'safetyProtocol',
    slot: 'safetyProtocol'
  }],
  column3 = [
    {
      label: '类型',
      key: 'type',
      prop: 'type'
    },
    {
      label: '系统获取级别',
      key: 'level',
      slot: 'level'
    }
  ],
  detailData = ref({})

watch(
  () => props.visible,
  async val => {
    if (val) {
      const res = await detail(props.data.projectCode)
      detailData.value = res.data
      detailData.value.grades = [
        {
          type: '等保级别',
          level: res.data?.equalProtection?.secrecyGrade
        },
        {
          type: '密码测评级别',
          level: res.data?.equalProtection?.passwordGrade
        }
      ]
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="详情"
    width="700px"
    destroy-on-close
    @close="emits('close')"
  >
    <p class="font-bold mb-8">安全人员信息</p>
    <table-list
      :pagination="false"
      :column="column1"
      :data="detailData.personSafetyInfo"
      :empty-temp="false"
      class="mb-24"
    >
      <template #investigationReport="{scope}">
        <p v-for="(file,fileIndex) in scope.row.investigationReport&&JSON.parse(scope.row.investigationReport)" :key="fileIndex" class="mb-4">
          <accessory :file-name="file.originalFileName" :file-id="file.id" />
        </p>
      </template>
    </table-list>
    <p class="font-bold mb-8">供应商安全资质</p>
    <p>供应商名称：{{ detailData.supplierSafetyQualification?.[0]?.supplierName||'-' }}</p>
    <table-list
      :pagination="false"
      :column="column2"
      :data="detailData.supplierSafetyQualification"
      :empty-temp="false"
      class="mb-24"
    >
      <template #safetyQualification="{scope}">
        <p v-for="(file,fileIndex) in scope.row.safetyQualification&&JSON.parse(scope.row.safetyQualification)" :key="fileIndex" class="mb-4">
          <accessory :file-name="file.originalFileName" :file-id="file.id" />
        </p>
      </template>
      <template #safetyProtocol="{scope}">
        <p v-for="(file,fileIndex) in scope.row.safetyProtocol&&JSON.parse(scope.row.safetyProtocol)" :key="fileIndex" class="mb-4">
          <accessory :file-name="file.originalFileName" :file-id="file.id" />
        </p>
      </template>
    </table-list>
    <p class="font-bold mb-8">等级详情</p>
    <table-list
      :pagination="false"
      :column="column3"
      :data="detailData.grades "
      :empty-temp="false"
      class="mb-24"
    >
      <template #level="{scope}">
        {{ insuranceLevel[scope.row.level] }}
      </template>
    </table-list>
  </el-dialog>
</template>
