<template>
  <!-- 加分项打分弹窗 -->
  <div class="addScoreQues">
    <!-- 可新增区域 -->
    <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">加分原因:</div>
          <n-input v-model:value="item[Object.keys(item)[0]]" placeholder="请输入加分原因" />
        </div>
        <div class="part">
          <div class="title">加分描述:</div>
          <n-input v-model:value="item[Object.keys(item)[1]]" placeholder="请输入加分描述" />
        </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)[3]]" 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, addScoreSave, addScoreUpdate } from '@/services';
import { useMessage } from 'naive-ui';
export default {
  name: 'addScoreQues',
  components: {},
  props: {
    ifQuesUpdate: Boolean,
    updateQuesObj: Object,
    mainId: String,
  },
  emits: ['refreshData'],
  setup(props, context) {
    const allData = reactive({
      indexscore: 3,
      index: 1, //新增和删除之后的次数
      currentIndex: 0, //上传文件判断是选的哪一行
      bonusReason: null,
      bonusDesc: null,
      bonusScore: null,
      questTypeId: null,
      makerList: [{ bonusReason1: null, bonusDesc1: null, bonusFileList1: [], bonusScore1: null }],
      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]]; //加分分值
        arrForm.push({
          mainId: props.mainId,
          bonusReason: key1,
          bonusDesc: key2,
          bonusFileList: key3,
          bonusScore: key4,
        });
        //判断必填项
        if (key1 == '' || key2 == '' || key4 == '') {
          allData.isAllgetvalue = true;
        } else {
          allData.isAllgetvalue = false;
        }
      });
      if (allData.isAllgetvalue == true) {
        message.error('请检查必填项');
      } else {
        if (props.ifQuesUpdate) {
          // 修改保存提交
          arrForm[0].mainId = props.updateQuesObj.mainId;
          arrForm[0].id = props.updateQuesObj.id;
          let res = await addScoreUpdate(arrForm[0]);
          if (res && res.code == 200) {
            context.emit('refreshData'); //刷新列表
            allData.isAllgetvalue == false;
          }
        } else {
          // 新增保存提交
          let res = await addScoreSave(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]; //bonusFileList2
            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 bonusFileList = [];
        bonusFileList.push(allData.imageXC[fileIndex].fileNo);
        let res = await fileDelete(bonusFileList);
        if (res && res.code === 200) {
          // allData.addFormValue.data.fileNo.splice(fileIndex, 1);
          let keyFile = Object.keys(allData.makerList[allData.currentIndex])[2];
          allData.makerList[allData.currentIndex][keyFile].splice(fileIndex, 1);
        }
      }
    };
    // 新增问题
    const addMaker = () => {
      allData.index++;
      let params = {};
      params[`bonusReason${allData.index}`] = null;
      params[`bonusDesc${allData.index}`] = null;
      params[`bonusFileList${allData.index}`] = [];
      params[`bonusScore${allData.index}`] = null;
      allData.makerList.push(params);
    };
    // 删除问题
    const removeMaker = (item, index) => {
      let keyFile = Object.keys(allData.makerList[index])[2]; //bonusFileList2
      allData.makerList[index][keyFile] = [];
      allData.makerList.splice(index, 1);
    };

    onMounted(() => {
      if (props.ifQuesUpdate) {
        // 修改
        console.log(props.updateQuesObj);
        allData.makerList = [
          {
            bonusReason1: props.updateQuesObj.bonusReason,
            bonusDesc1: props.updateQuesObj.bonusDesc,
            bonusFileList1: [],
            bonusScore1: props.updateQuesObj.bonusScore,
          },
        ];
        if (!!!props.updateQuesObj.bonusFileList) return;
        allData.imageXC = [];
        allData.makerList[0].bonusFileList1 = [];
        props.updateQuesObj.bonusFileList.map((item) => {
          allData.makerList[0].bonusFileList1.push({
            url: item.fileCloudStorageKey,
            status: 'finished',
            fileNo: item.fileNo,
            name: item.fileOriginalName,
          });
        });
        allData.imageXC = JSON.parse(JSON.stringify(allData.makerList[0].bonusFileList1));
      }
    });
    onBeforeMount(() => {});
    return {
      ...toRefs(allData),
      saveMaker,
      changeFile,
      addMaker,
      removeMaker,
      getFile,
    };
  },
};
</script>
<style lang="less">
.addScoreQues {
  width: 100%;
  .searchBox {
    display: flex;
    align-items: center;
    margin: 20px;
    .n-input {
      width: 150px;
      height: 30px;
      margin: 0 10px;
    }
  }
  .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;
      .n-input {
        height: 30px;
      }
      .title {
        width: 100px;
      }
    }
  }
}
</style>