<template>
  <!-- 加分项问题清单 -->
  <div class="addScoreHistory">
    <div class="searchox">
      <n-input v-model:value="scoreStandard" type="textarea" autosize readonly="true"></n-input>
      <n-space style="margin-top: 20px">
        <n-input v-model:value="searchVal1" placeholder="加分原因"></n-input>
        <n-button type="primary" @click="handleClick('search')">搜索</n-button>
        <n-button type="primary" @click="handleClick('export')">导出</n-button>
      </n-space>
    </div>
    <n-divider />
    <div class="tableBox">
      <n-data-table
        :bordered="true"
        :single-line="false"
        :max-height="500"
        :striped="true"
        :columns="columns"
        :data="tableData"
        :pagination="pagination"
        :loading="tableLoading"
        :remote="true"
      >
      </n-data-table>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, h } from 'vue';
import { NButton, NInput, NImage } from 'naive-ui';
import { addScoreList } from '@/services';
import axios from 'axios';
import { downloadBlob } from '@/utils/util';

export default {
  name: 'addScoreHistory',
  components: {},
  props: {
    mainId: String,
  },
  setup(props, context) {
    const allData = reactive({
      addissueShow: false,
      ifQuesUpdate: false,
      searchVal1: null,
      modalTitle: '',
      updateQuesObj: {},
      scoreStandard: `社会效益内容中，产生正面影响。央视媒体上每报道一次本项目正面信息，加0.2 分，共计可加 1 分。\n项目获建设工程国家级奖项，每项可加0.5 分。省级奖项，每项可加 0.3 分。市级奖项，每项可加 0.1 分，共计可加2 分。`,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: '60',
          render(row, index) {
            return (paginationReactive.page - 1) * paginationReactive.pageSize + index + 1;
          },
        },
        { title: '加分原因', align: 'center', key: 'bonusReason' },
        {
          title: '加分描述',
          align: 'center',
          key: 'bonusDesc',
          ellipsis: {
            tooltip: true,
          },
        },
        {
          title: '图片',
          align: 'center',
          key: 'bonusFileList',
          render(row) {
            let lists = row.bonusFileList == null ? [] : row.bonusFileList;
            let value = [];
            lists.map((item, index) => {
              let imgs = h(NImage, {
                width: 100,
                height: 100,
                style: 'margin-right:5px;',
                src: item.fileCloudStorageKey,
              });
              value.push(imgs);
            });
            return value;
          },
        },
        { title: '加分分数', align: 'center', key: 'bonusScore', width: '90' },
        { title: '加分人', align: 'center', key: 'bonusMan', width: '80' },
        { title: '加分时间', align: 'center', key: 'bonusTime', width: '160' },
        { title: '修改人', align: 'center', key: 'updateUser', width: '80' },
        { title: '修改时间', align: 'center', key: 'updateTime', width: '160' },
      ],
      tableData: [],
      tableLoading: true,
    });
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      pageCount: 0,
      itemCount: 0,
      prefix: () => {
        return '共 ' + paginationReactive.itemCount + ' 项';
      },
      onChange: (page) => {
        paginationReactive.page = page;
        getKaopingNumData();
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        getKaopingNumData();
      },
    });
    //获取数据
    async function getTableData() {
      allData.tableLoading = true;

      let param = {
        current: paginationReactive.page,
        size: paginationReactive.pageSize,
        mainId: props.mainId,
        bonusReason: allData.searchVal1,
      };
      let res = await addScoreList(param);
      if (res && res.code == 200) {
        allData.tableLoading = false;
        let datas = res.data || [];
        allData.tableData = datas.records;
        paginationReactive.pageCount = datas.pages;
        paginationReactive.itemCount = datas.total || 0;
      }
    }
    // 点击事件
    const handleClick = (type, row) => {
      switch (type) {
        case 'search':
          // 搜索
          getTableData();
          break;
        case 'export':
          // 导出
          const token = localStorage.getItem('tokenXF');
          axios
            .get(`/api/newPerform/performevaluatebonus/getbonusExcel`, {
              headers: {
                token: token,
              },
              responseType: 'blob',
              params: {
                mainId: props.mainId,
                bonusReason: allData.searchVal1,
              },
            })
            .then(function (res) {
              downloadBlob(res.data, decodeURIComponent(res.headers['content-disposition'].split('filename=')[1]));
            });
          break;
      }
    };
    onMounted(() => {
      console.log('props.mainId---', props.mainId);
      getTableData();
    });
    onBeforeMount(() => {});
    return {
      ...toRefs(allData),
      pagination: paginationReactive,
      handleClick,
    };
  },
};
</script>
<style lang="less">
.addScoreHistory {
  width: 100%;
}
</style>