
<template>
  <!-- 评估简报 -->
  <div class="estimate-brifine">
    <query-condition />
    <a-row class="table-header">
      <template v-for="field in fields" :key="field.fieldCode">
        <a-col :span="field.span" class="field-label">{{ field.fieldName }}</a-col>
      </template>
    </a-row>
    <a-row class="table-content">
      <template v-for="(item, index) in tableData" :key="item.id">
        <a-row class="table-row">
          <a-col :span="fields[0].span" class="value-label">{{ index + 1 }}</a-col>
          <a-col :span="fields[1].span" class="value-label">{{ item[fields[1].fieldCode] }}</a-col>
          <a-col :span="fields[2].span" class="value-label">{{ item[fields[2].fieldCode] }}</a-col>
          <a-col :span="fields[3].span" class="value-label upload" @click="uploadClick(item)"
            >下载</a-col
          >
        </a-row>
      </template>
    </a-row>
  </div>
</template>
          
    <script>
import { defineComponent, reactive, toRefs, onMounted, ref, watch, getCurrentInstance } from 'vue';
import QueryCondition from '../../component/QueryCondition.vue';
import moment from 'moment';
export default defineComponent({
  name: 'EstimateBrifine',
  components: { QueryCondition },
  props: [],
  setup() {
    const data = reactive({
      fields: [
        { fieldName: '序号', fieldCode: 'sort', span: 2 },
        { fieldName: '文件名称', fieldCode: 'fileName', span: 9 },
        { fieldName: '发布时间', fieldCode: 'uploadTime', span: 9 },
        { fieldName: '操作', fieldCode: 'opt', span: 4 },
      ],
      tableData: [
        { fileCode: 'f001', fileName: '评估文件名称1', uploadTime: '2023-06-07 10:23:34' },
        { fileCode: 'f002', fileName: '评估文件名称2', uploadTime: '2023-05-07 11:55:47' },
        { fileCode: 'f003', fileName: '评估文件名称4', uploadTime: '2023-06-07 10:56:11' },
        { fileCode: 'f001', fileName: '评估文件名称1', uploadTime: '2023-06-07 10:23:34' },
        { fileCode: 'f002', fileName: '评估文件名称2', uploadTime: '2023-05-07 11:55:47' },
        { fileCode: 'f003', fileName: '评估文件名称4', uploadTime: '2023-06-07 10:56:11' },
        { fileCode: 'f001', fileName: '评估文件名称1', uploadTime: '2023-06-07 10:23:34' },
        { fileCode: 'f002', fileName: '评估文件名称2', uploadTime: '2023-05-07 11:55:47' },
        { fileCode: 'f003', fileName: '评估文件名称4', uploadTime: '2023-06-07 10:56:11' },
        { fileCode: 'f001', fileName: '评估文件名称1', uploadTime: '2023-06-07 10:23:34' },
        { fileCode: 'f002', fileName: '评估文件名称2', uploadTime: '2023-05-07 11:55:47' },
        { fileCode: 'f003', fileName: '评估文件名称4', uploadTime: '2023-06-07 10:56:11' },
      ],
    });
    const uploadClick = (row) => {
      console.log('下载成功');
    };
    onMounted(() => {});
    return {
      ...toRefs(data),
      uploadClick,
    };
  },
});
</script>
      <style lang="less" scoped>
.estimate-brifine {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 10px;
  overflow: auto;
  .table-header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    .field-label {
      height: 40px;
      text-align: center;
      border: 1px solid rgba(21, 186, 255, 0.3);
    }
  }
  .table-content {
    height: calc(100% - 108px);
    width: 100%;
    overflow:hidden;
    position: relative;
    display: flow-root;
    .table-row {
      width: 100%;
      height: 40px;
      line-height: 40px;
      .value-label {
        height: 40px;
        text-align: center;
        border: 1px solid rgba(21, 186, 255, 0.3);
      }
      .upload {
        cursor: pointer;
        color: #227CE9;
        &:hover {
          color: aqua;
        }
      }
    }
  }
}
</style>