<template>
  <!-- 加分项弹窗 -->
  <div class="addScoreEvaluation">
    <div class="searchox">
      <n-input v-model:value="scoreStandard" type="textarea" autosize readonly="true"></n-input>
      <n-button type="primary" @click="handleClick('addissues')" style="margin-top: 20px">新增考核加分项</n-button>
    </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>
    <!--问题加分项新增弹窗 -->
    <n-modal
      :title="modalTitle"
      :mask-closable="false"
      preset="dialog"
      :show-icon="false"
      :style="{ width: '1500px' }"
      v-model:show="addissueShow"
    >
      <Kpques
        :ifQuesUpdate="ifQuesUpdate"
        :updateQuesObj="updateQuesObj"
        :mainId="mainId"
        @refreshData="refreshData"
        v-if="addissueShow"
      ></Kpques>
    </n-modal>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, h } from 'vue';
import { NButton, NInput, NImage } from 'naive-ui';
import { addScoreList, addScoreDelete } from '@/services';
import Kpques from './evaluationAddScoreQues.vue'; //加分项考核问题批量新增修改

export default {
  name: 'addScoreEvaluation',
  components: { Kpques },
  props: {
    mainId: String,
  },
  setup(props, context) {
    const allData = reactive({
      mainId: '',
      addissueShow: false,
      ifQuesUpdate: false,
      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' },
        {
          title: '操作',
          key: 'operation',
          align: 'center',
          width: '180',
          render(row) {
            let arrBtn = [];
            arrBtn = [
              { btnType: 'info', type: 'quesEdit', default: '修改' },
              { btnType: 'warning', type: 'quesDelete', default: '删除' },
            ];
            const btn = arrBtn.map((item, index) => {
              return h(
                NButton,
                {
                  text: true,
                  size: item.size,
                  style: {
                    margin: '10px',
                  },
                  type: item.btnType,
                  onClick: () => handleClick(item.type, row),
                },
                { default: () => item.default }
              );
            });
            return btn;
          },
        },
      ],
      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: allData.mainId,
      };
      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 'addissues':
          // 新增考核问题
          allData.modalTitle = '添加加分项问题详情';
          allData.addissueShow = true;
          allData.ifQuesUpdate = false;
          break;
        case 'quesEdit':
          // 修改考核问题
          allData.modalTitle = '修改加分项问题详情';
          allData.addissueShow = true;
          allData.ifQuesUpdate = true;
          allData.updateQuesObj = { ...row };
          break;
        case 'quesDelete':
          // 问题删除
          $dialog.info({
            title: '提示',
            content: `确定删除该问题数据吗？`,
            positiveText: '确定',
            negativeText: '取消',
            onPositiveClick: async () => {
              // 确定删除
              let res = await addScoreDelete({ ids: [row.id] });
              if (res && res.code == 200) {
                getTableData();
                context.emit('refreshData'); //刷新数据
              }
            },
          });
          break;
      }
    };
    // 刷新列表
    const refreshData = () => {
      getTableData();
      allData.addissueShow = false;
    };
    onMounted(() => {
      allData.mainId = props.mainId;
      getTableData();
    });
    onBeforeMount(() => {});
    return {
      ...toRefs(allData),
      pagination: paginationReactive,
      handleClick,
      refreshData,
    };
  },
};
</script>
<style lang="less">
.addScoreEvaluation {
  width: 100%;
}
</style>