<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.createTsamp }}</td>
        </tr>
        <tr class="">
          <td class="bgColor" width="10%">
            <span>指导意见</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">
            <a-button preIcon="ant-design:vertical-align-bottom-outlined" @click="down(item)" style="margin-left: 10px" type="primary">
              下载
            </a-button>
          </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({
    List: {
      type: Array,
      default: () => [],
    },
    // 定义传值对象
  });
  // 下载
  function down(item) {
    let fileExtension = item.clyjfj.split('.').pop();
    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>
