<template>
  <table class="" style="width: 100%" border="1" cellspacing="1">
    <tbody> </tbody>
    <colgroup>
      <col class="bg0" width="15%" />
      <col width="40%" />
      <col class="bg0" width="15%" />
      <col />
    </colgroup>
    <tbody v-if="scjd == '风险评估'">
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">报告编制完成日期</td>
        <td class="ant-table-cell ant-table-cell-ellipsis" colspan="2">{{ data?.fxpgwcsj }}</td>
      </tr>
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">公示</td>
        <td class="ant-table-cell ant-table-cell-ellipsis"> {{ data?.gkfs == 1 ? '网址' : '其它' }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">公示信息</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.gswz }}</td>
      </tr>
    </tbody>
    <tbody v-else-if="scjd == '风险管控效果评估' || scjd == '修复效果评估' || scjd == '管控及修复效果评估'">
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">报告标题</td>
        <td class="ant-table-cell ant-table-cell-ellipsis"> {{ data?.zlyxfxgpgbt }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">报告编制完成日期</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.zlyxfxgpgwcsj }}</td>
      </tr>
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">公示</td>
        <td class="ant-table-cell ant-table-cell-ellipsis"> {{ data?.gkfs == 1 ? '网址' : '其它' }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">公示信息</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.gswz }}</td>
      </tr>
    </tbody>
    <tbody v-else-if="scjd == '管控及修复方案'">
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">{{ scjd }}方案标题</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.bt }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">{{ scjd }}方案编制完成日期 </td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.fbsj }}</td>
      </tr>
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">公示</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.gkfs == 1 ? '网址' : '其它' }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">公示信息</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.gswz }}</td>
      </tr>
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">{{ scjd }}工程措施开始日期</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.tmStart }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">{{ scjd }}工程措施结束日期</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.tmEnd }}</td>
      </tr>
    </tbody>
    <tbody v-else>
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">报告标题</td>
        <td class="ant-table-cell ant-table-cell-ellipsis"> {{ data?.zlyxfxgpgbt }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">报告编制完成日期</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.zlyxfxgpgwcsj }}</td>
      </tr>
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">公示</td>
        <td class="ant-table-cell ant-table-cell-ellipsis"> {{ data?.gkfs == 1 ? '网址' : '其它' }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">公示信息</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.gswz }}</td>
      </tr>
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor"> 公示截图</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">
          <img :src="baseUploadUrl + data?.gspic" alt="" />
          <a-button class="ml-5" @click="downloadFile(data?.gspic)" preIcon="ant-design:vertical-align-bottom-outlined" type="primary">
            下载
          </a-button>
        </td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">风险评估报告</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">
          <a-button @click="downloadFile(data?.dcbglj)" preIcon="ant-design:vertical-align-bottom-outlined" type="primary"> 下载 </a-button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script lang="ts" setup>
  import { defineProps } from 'vue';
  import { useGlobSetting } from '/@/hooks/setting';
  import { downloadFile } from '/@/utils/common/renderUtils';
  const globSetting = useGlobSetting();
  const baseUploadUrl = globSetting.uploadUrl;
  const props = defineProps({
    data: {
      type: Object,
      default: () => {},
    },
    scjd: {
      type: String,
      default: '地块调查',
    },
  });
</script>

<style scoped>
  table {
    border-collapse: collapse;
    border: 1px #dfe6ec solid;
  }

  tbody tr td {
    padding: 6px;
    height: 40px;
  }

  .bgColor {
    background-color: rgba(244, 247, 249, 0.8);
    text-align: center;
  }
</style>
