<template>
  <table style="width: 100%; table-layout: fixed" border="1" cellspacing="1" v-if="List.length > 0">
    <tbody>
      <template v-for="(item, index) in List" :key="index">
        <tr class="ant-table-cell ant-table-cell-ellipsis">
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor bg1" width="10%">处理时间</td>
          <td class="ant-table-cell ant-table-cell-ellipsis bg1" colspan="3">{{ item.clsj }}</td>
        </tr>
        <tr class="">
          <td class="bgColor" width="10%">
            <span v-if="item.yjlx === '0'">流程</span>
            <span v-if="item.yjlx == 1">指导意见</span>
            <span v-if="item.yjlx == 2">边界指导意见</span>
            <span v-if="item.yjlx == 3">退回</span>
            <span v-if="item.yjlx == 4">复核</span>
          </td>
          <td style="width: 90%; word-wrap: break-word; word-break: break-all" colspan="3">
            {{ item.clyj }}
          </td>
        </tr>
        <!-- 判断字段是否显示 -->
        <tr class="ant-table-cell ant-table-cell-ellipsis" v-if="item.clyjfj">
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor" width="10%">文件</td>
          <td class="ant-table-cell ant-table-cell-ellipsis" colspan="3">
            <a-button preIcon="ant-design:vertical-align-bottom-outlined" @click="down(item)" style="margin-left: 10px" type="primary">
              下载
            </a-button>
          </td>
        </tr>
        <tr class="ant-table-cell ant-table-cell-ellipsis">
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor" width="10%">阶段</td>
          <td class="ant-table-cell ant-table-cell-ellipsis">
            <span v-if="item?.scjdbm == 'S2'">地块调查</span>
            <span v-if="item?.scjdbm == 'S3'">风险评估</span>
            <span v-if="item?.scjdbm == 'S4'">风险管控</span>
            <span v-if="item?.scjdbm == 'S5'">修复</span>
            <span v-if="item?.scjdbm == 'S6'">效果评估</span>
            <span v-if="item?.scjdbm == 'S10'">管控及修复</span>
          </td>
          <td class="ant-table-cell ant-table-cell-ellipsis bgColor" width="10%">填报人</td>
          <td class="ant-table-cell ant-table-cell-ellipsis">{{ item.realname }}</td>
        </tr>
      </template>
    </tbody>
  </table>
  <div v-else class="text-center">暂无填报记录</div>
</template>

<script lang="ts" setup>
  import { defineProps } from 'vue';
  import { downloadFile } from '/@/api/common/api';
  const props = defineProps({
    labelFirst: {
      type: String,
      default: '初步',
    },
    List: {
      type: Array,
      default: () => [],
    },
    // 定义传值对象
  });
  // 下载
  function down(item) {
    let fileExtension = item.clyjfj.split('.').pop();
    if (item.yjlx === '0') {
      downloadFile('/sys/common/static' + item.clyjfj, `流程文件.${fileExtension}`);
    } else if (item.yjlx == 1) {
      downloadFile('/sys/common/static' + item.clyjfj, `指导意见文件.${fileExtension}`);
    } else if (item.yjlx == 2) {
      downloadFile('/sys/common/static' + item.clyjfj, `边界指导意见文件.${fileExtension}`);
    } else if (item.yjlx == 3) {
      downloadFile('/sys/common/static' + item.clyjfj, `退回文件.${fileExtension}`);
    } else if (item.yjlx == 4) {
      downloadFile('/sys/common/static' + item.clyjfj, `复核文件.${fileExtension}`);
    }
  }
</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;
  }

  .bg1 {
    background-color: #c8d1d1;
  }
</style>
