<template>
  <!-- 问题情况打分弹窗 -->
  <div class="evaluationPage">
    <!-- 可新增区域 -->
    <div class="searchBox">
      <n-button type="primary" @click="addMaker()" v-if="!ifQuesUpdate">+ 新增问题</n-button>
      <n-button type="primary" @click="saveMaker()" style="margin-left: 10px">保存</n-button>
      （总分：{{ indexscore }}）
    </div>
    <div style="height: 700px; overflow: auto">
      <div class="maker" v-for="(item, index) in makerList" :key="'a' + index">
        <div class="part">
          <div class="title" style="width: 100px">考核子项:</div>
          <n-select
            v-model:value="item[Object.keys(item)[0]]"
            :options="assetList"
            placeholder="请选择考核子项"
            filterable
            :render-option="renderOption"
          />
        </div>
        <div class="part" v-if="relIndexIdType !== 0">
          <div class="title">问题断面:</div>
          <n-select
            v-model:value="item[Object.keys(item)[5]]"
            :options="optionList"
            placeholder="请选择问题断面"
            filterable
            :render-option="renderOption"
          />
        </div>
        <div class="part">
          <div class="title">问题原因:</div>
          <n-select
            v-model:value="item[Object.keys(item)[3]]"
            :options="becauseList"
            placeholder="请选择问题原因"
            filterable
            style="width: 240px"
            :render-option="renderOption"
          />
        </div>
        <div class="part">
          <div class="title">问题描述:</div>
          <n-input
            placeholder="请输入问题描述"
            v-model:value="item[Object.keys(item)[1]]"
            type="textarea"
            maxlength="1000"
            show-count
            style="width: 240px"
          />
        </div>
        <div class="part" style="width: 650px">
          <div class="title" style="width: 130px">问题图片(最多3张,每个小于10M):</div>
          <div @click.stop="getFile(index)">
            <n-upload
              :file-list="item[Object.keys(item)[2]]"
              accept=".jpg,.png,.jpeg,.svg,.gif"
              :max="3"
              list-type="image-card"
              @change="changeFile"
            >
            </n-upload>
          </div>
        </div>
        <div class="part">
          <div class="title" style="width: 50px">扣分:</div>
          <n-input-number v-model:value="item[Object.keys(item)[4]]" min="0" :max="indexscore" :show-button="false" style="width: 70px" />
        </div>
        <div class="part" v-if="!ifQuesUpdate">
          <n-button type="warning" @click.stop="removeMaker(item, index)">- 删除</n-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, h } from 'vue';
import {
  fileUpload,
  fileDelete,
  getIndexOneListbyType,
  AssessCheckSave,
  AssessCheckUpdate,
  getQuestionsList,
  specialIndexListByType,
} from '@/services';
import { useMessage, NTooltip } from 'naive-ui';
export default {
  name: 'evaluationPage',
  components: {},
  props: {
    indexId: Number,
    mainId: String,
    codeId: Number,
    type: Number,
    indexscore: Number,
    relIndexIdType: Number,
    ifQuesUpdate: Boolean,
    updateQuesObj: Object,
  },
  emits: ['refreshData'],
  setup(props, context) {
    const allData = reactive({
      score: 0,
      index: 1, //新增和删除之后的次数
      currentIndex: 0, //上传文件判断是选的哪一行
      relIndexIdType: props.relIndexIdType,
      makerList: [{ subProjectId1: null, questDesc1: null, fileNos1: [], questTypeId1: null, cutScore1: null, sectionCode1: null }],
      assetList: [],
      becauseList: [],
      optionList: [],
      renderOption: ({ node, option }) =>
        h(NTooltip, null, {
          trigger: () => node,
          default: () => option.label,
        }),
      imageXC: [],
      isAllgetvalue: false,
    });
    const message = useMessage();
    // 数据保存提交
    async function saveMaker() {
      let targetArr = JSON.parse(JSON.stringify(allData.makerList));
      console.log('targetArr', targetArr);
      let arrForm = [];
      // 拼接数据格式
      targetArr.map((item) => {
        let key1 = item[Object.keys(item)[0]]; //考核子项
        let key2 = item[Object.keys(item)[1]]; //问题描述
        let key3 = item[Object.keys(item)[2]]; //图片
        let key4 = item[Object.keys(item)[3]]; //问题原因
        let key5 = item[Object.keys(item)[4]]; //单项扣分
        let key6 = item[Object.keys(item)[5]]; //问题断面
        let imgNo = [];
        key3.map((item2) => {
          imgNo.push(item2.fileNo);
        });
        arrForm.push({
          indexId: props.indexId,
          mainId: props.mainId,
          codeId: props.codeId,
          type: props.type,
          subProjectId: Number(key1),
          questDesc: key2,
          fileNo: imgNo,
          questTypeId: Number(key4),
          sectionCode: key6,
          relIndexIdType: props.relIndexIdType,
          cutScore: key5,
          questTypeName: getQuestLabel(allData.becauseList, key4),
          //sectionTypeName: getQuestLabel(allData.optionList, key6),
        });
        //判断必填项
        if (allData.relIndexIdType == 0) {
          if (key1 == null || key2 == null || key5 == null || key4 == null) {
            allData.isAllgetvalue = true;
          } else {
            allData.isAllgetvalue = false;
          }
        } else {
          if (key1 == null || key2 == null || key5 == null || key6 == null || key4 == null) {
            allData.isAllgetvalue = true;
          } else {
            allData.isAllgetvalue = false;
          }
        }
      });
      if (allData.isAllgetvalue == true) {
        message.error('每项均为必填项,请检查');
      } else {
        if (props.ifQuesUpdate) {
          // 修改保存提交
          arrForm[0].status = props.updateQuesObj.status;
          arrForm[0].id = props.updateQuesObj.id;
          let res = await AssessCheckUpdate(arrForm[0]);
          if (res && res.code == 200) {
            context.emit('refreshData'); //刷新列表
            allData.isAllgetvalue == false;
          }
        } else {
          // 新增保存提交
          let res = await AssessCheckSave(arrForm);
          if (res && res.code == 200) {
            context.emit('refreshData'); //刷新列表
            allData.isAllgetvalue == false;
          }
        }
      }
    }

    // 获取点击是哪一行的文件上传
    function getFile(index) {
      allData.currentIndex = index;
    }
    // 现场问题文件上传和删除
    const changeFile = async (file) => {
      console.log(file, '文件上传');
      $loadingBar.start();
      if (file.event) {
        // 文件上传大小判断
        let size = file.file.file.size / 1024 / 1024;
        if (size > 10) {
          $message.error('图片大小大于10M，请删除后重新上传');
          return false;
        }
        // 文件上传
        let formdata = new FormData();
        formdata.append('files', file.file.file);
        let config = {
          headers: { 'Content-Type': 'multipart/form-data' },
        };
        let res = await fileUpload(formdata, config);
        if (res && res.code == 200) {
          if (res.data.length > 0) {
            let datas = res.data[0];
            let paramsImg = {
              fileNo: datas.fileNo,
              name: datas.fileOriginalName,
              url: datas.fileCloudStorageKey,
              status: 'finished',
            };
            // 找到对应的key值
            let keyFile = Object.keys(allData.makerList[allData.currentIndex])[2]; //fileNos1
            allData.makerList[allData.currentIndex][keyFile].push(paramsImg);
            let param = {
              fileNo: datas.fileNo,
              name: datas.fileOriginalName,
              url: datas.fileCloudStorageKey,
              status: 'success',
            };
            allData.imageXC.push(param);
          }
        } else {
          $message.error('上传失败');
        }
        $loadingBar.finish();
      } else {
        // 文件删除,根据文件名进行匹配
        let fileIndex = null;
        allData.imageXC.map((item, index) => {
          if (file.file.name == item.name) {
            fileIndex = index;
          }
        });
        let fileNos = [];
        fileNos.push(allData.imageXC[fileIndex].fileNo);
        let res = await fileDelete(fileNos);
        if (res && res.code === 200) {
          let keyFile = Object.keys(allData.makerList[allData.currentIndex])[2];
          allData.makerList[allData.currentIndex][keyFile].splice(fileIndex, 1);
          allData.imageXC.splice(fileIndex, 1);
        }
        $loadingBar.finish();
      }
    };
    // 获取考核子项列表
    async function getKhList() {
      let params = {
        id: props.codeId,
        mainId: String(props.mainId),
        type: props.type,
      };
      let res = await getIndexOneListbyType(params);
      if (res && res.code == 200) {
        res.data.map((item) => {
          allData.assetList.push({
            value: item.id,
            label: item.name,
          });
        });
      }
      let params2 = {
        codeId: props.codeId,
        indexId: props.indexId,
        id: props.type,
      };
      let res2 = await getQuestionsList(params2);
      if (res2 && res2.code == 200) {
        res2.data.map((item) => {
          allData.becauseList.push({
            value: item.id,
            label: item.name,
          });
        });
      }
    }
    // 新增问题
    const addMaker = () => {
      allData.index++;
      let params = {};
      params[`subProjectId${allData.index}`] = null;
      params[`questDesc${allData.index}`] = null;
      params[`fileNos${allData.index}`] = [];
      params[`questTypeId${allData.index}`] = null;
      params[`cutScore${allData.index}`] = null;
      params[`questionStation${allData.index}`] = null;
      allData.makerList.push(params);
    };
    //获取问题原因label
    const getQuestLabel = (arry, Value) => {
      if (!!Value) {
        let questname = arry.filter((el) => el.value == Value);
        return questname[0].label;
      }
    };
    // 删除问题
    const removeMaker = (item, index) => {
      let keyFile = Object.keys(allData.makerList[index])[2]; //fileNos2
      allData.makerList[index][keyFile] = [];
      allData.makerList.splice(index, 1);
    };
    //获取断面信息
    const getQuestionStationInfo = async () => {
      let params = {
        relIndexIdType: allData.relIndexIdType,
      };
      allData.optionList = [];
      let res = await specialIndexListByType(params);
      if (res && res.code == 200) {
        let data = res.data;
        data.forEach((element) => {
          let { sectionCode, sectionName } = element;
          allData.optionList.push({ value: sectionCode, label: sectionName });
        });
      }
    };

    onMounted(() => {
      getKhList();
      if (allData.relIndexIdType != 0) {
        // 特殊指标才调用断面接口 0-不是特殊指标，1-特殊指标（河道水质达标）,2-特殊指标（河道溢流频次）
        getQuestionStationInfo();
      }
      if (props.ifQuesUpdate) {
        // 修改
        console.log('修改---', props.updateQuesObj);
        allData.makerList = [
          {
            subProjectId1: String(props.updateQuesObj.subProjectId),
            questDesc1: props.updateQuesObj.questDesc,
            fileNos1: [],
            questTypeId1: String(props.updateQuesObj.questTypeId),
            cutScore1: props.updateQuesObj.cutScore,
            sectionCode1: props.updateQuesObj.specialQuestionsExtendDto.sectionCode,
          },
        ];
        if (!!!props.updateQuesObj.fileList) return;
        allData.imageXC = [];
        allData.makerList[0].fileNos1 = [];
        props.updateQuesObj.fileList.map((item) => {
          allData.makerList[0].fileNos1.push({
            fileNo: item.fileNo,
            name: item.fileOriginalName,
            url: item.fileCloudStorageKey,
            status: 'finished',
          });
        });
        allData.imageXC = JSON.parse(JSON.stringify(allData.makerList[0].fileNos1));
      }
    });
    onBeforeMount(() => {});
    return {
      ...toRefs(allData),
      saveMaker,
      changeFile,
      addMaker,
      removeMaker,
      getFile,
      getQuestLabel,
      getQuestionStationInfo,
    };
  },
};
</script>
<style lang="less">
.evaluationPage {
  width: 100%;
  .searchBox {
    display: flex;
    align-items: center;
    margin: 20px;
  }
  .maker {
    display: flex;
    padding: 10px;
    margin: 20px;
    border: 1px dashed #c6c6c6;
    .n-upload-file-list {
      display: flex !important;
    }
    .part {
      display: flex;
      align-items: center;
      margin-right: 20px;
      .title {
        width: 65px;
      }
    }
  }
}
</style>