<template>
  <!-- 问题情况打分弹窗 -->
  <div class="addTrainPage">
    <!-- 可新增区域 -->
    <div class="searchBox">
      <n-button type="primary"
                @click="addMaker()">+ 新增</n-button>
      <n-button type="primary"
                @click="saveMaker()"
                style="margin-left: 10px">保存</n-button>
    </div>
    <div class="maker"
         v-for="(item, index) in makerList"
         :key="'a' + index">

      <div class="part">
        <div class="title">标识:</div>
        <n-color-picker v-model:value="item[Object.keys(item)[0]]"
                        style="width:140px"
                        :show-alpha="true" />
      </div>
      <div class="part">
        <div class="title">名称:</div>
        <n-input v-model:value="item[Object.keys(item)[1]]"
                 style="width:140px"
                 placeholder="" />
      </div>
      <div class="part">
        <div class="title">地点:</div>
        <n-input v-model:value="item[Object.keys(item)[2]]"
                 style="width:140px"
                 placeholder="" />
      </div>
      <div class="part">
        <div class="title">内容:</div>
        <n-input v-model:value="item[Object.keys(item)[3]]"
                 style="width:140px"
                 placeholder="" />
      </div>
      <div class="part">
        <div class="title">类型:</div>
        <n-select v-model:value="item[Object.keys(item)[4]]"
                  :options="traintype"
                  style="width:140px"
                  placeholder="" />
      </div>
      <div class="part">
        <div class="title">讲师:</div>
        <n-input v-model:value="item[Object.keys(item)[5]]"
                 placeholder=""
                 style="width:140px" />
      </div>
      <div class="part">
        <div class="title">方式:</div>
        <n-select v-model:value="item[Object.keys(item)[6]]"
                  :options="trainway"
                  style="width:140px"
                  placeholder="" />

      </div>
      <div class="part">
        <div class="title">时长:</div>
        <n-input v-model:value="item[Object.keys(item)[7]]"
                 style="width:80px"
                 placeholder="" />
      </div>
      <div class="part">
        <n-button type="warning"
                  @click.stop="removeMaker(item, index)">- 删除</n-button>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
import { trainingInfoSave } from '@/services';
import bus from "@/utils/util";
import { useMessage } from 'naive-ui';
export default {
  name: 'addTrainPage',
  components: [],
  props: {
    trainStartTime: String,
    trainEndTime: String
  },
  emits: ['refreshTrainData'],
  setup(props, context) {
    // alert(props.indexId);
    const allData = reactive({
      score: 0,
      index: 1, //新增和删除之后的次数
      color: null,//颜色标识
      trainTopic: null,//培训名称；
      trainAdds: null,//培训地点
      trainRemark: null,//培训内容
      trainCategory: null,//培训类型
      trainTeacher: null,//培训讲师
      trainType: null,//培训方式
      trainTime: null,//培训时长
      traintype: [
        { value: "0", label: "入职培训" },
        { value: "1", label: "过程培训" },
      ],
      trainway: [
        { value: "0", label: "PPT" },
        { value: "1", label: "Word" },
        { value: "2", label: "实操" }
      ],
      makerList: [{ color1: null, trainTopic1: null, trainAdds1: null, trainRemark1: [], trainCategory1: null, trainTeacher1: null, trainType1: null, trainTime1: null }],

      isAllgetvalue: false,
    });
    const message = useMessage();
    // 数据保存提交
    async function saveMaker() {
      let targetArr = JSON.parse(JSON.stringify(allData.makerList));
      let arrForm = [];
      // 拼接数据格式
      targetArr.map((item) => {
        let key0 = item[Object.keys(item)[0]]; //颜色
        let key1 = item[Object.keys(item)[1]]; //名称
        let key2 = item[Object.keys(item)[2]]; //地点
        let key3 = item[Object.keys(item)[3]]; //内容
        let key4 = item[Object.keys(item)[4]];//类型
        let key5 = item[Object.keys(item)[5]];//讲师
        let key6 = item[Object.keys(item)[6]];//方式
        let key7 = item[Object.keys(item)[7]];//时长
        //判断必填项
        if (key1 == null || key2 == null || key3 == null || key4 == null || key5 == null || key6 == null || key7 == null) {
          allData.isAllgetvalue = true
        } else {
          allData.isAllgetvalue = false
        }
        arrForm.push({
          trainStartTime: props.trainStartTime,
          trainEndTime: props.trainEndTime,
          color: key0 !== null ? key0 : "blue",
          trainTopic: key1,
          trainAdds: key2,
          trainRemark: key3,
          trainCategory: key4,
          trainTeacher: key5,
          trainType: key6,
          trainTime: key7,
        });
      });

      if (allData.isAllgetvalue == true) {
        message.error('请检查必填项');
      }
      else {
        let res = await trainingInfoSave(arrForm);
        if (res && res.code == 200) {
          context.emit('refreshTrainData'); //刷新列表
          allData.isAllgetvalue == false;
        }
      }
    }

    // 新增问题        
    const addMaker = () => {
      allData.index++;
      let params = {};
      params[`color${allData.index}`] = null;
      params[`trainTopic${allData.index}`] = null;
      params[`trainAdds${allData.index}`] = [];
      params[`trainRemark${allData.index}`] = null;
      params[`trainCategory${allData.index}`] = null;
      params[`trainTeacher${allData.index}`] = null;
      params[`trainType${allData.index}`] = null;
      params[`trainTime${allData.index}`] = null;
      allData.makerList.push(params);
    };

    // 删除问题
    const removeMaker = (item, index) => {
      allData.makerList.splice(index, 1);
    };
    onMounted(() => {

    });
    onBeforeMount(() => {

    });
    return {
      ...toRefs(allData),
      saveMaker,
      addMaker,
      removeMaker,

    };
  },
};
</script>
<style lang="less">
.addTrainPage {
  width: 100%;
  height: 700px;
  overflow: auto;
  .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: 10px;
      .n-input {
        height: 30px;
      }
      .title {
        width: 40px;
        margin-left: 10px;
      }
    }
  }
}
</style>