<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-22 10:59:44
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-12-28 15:06:07
 * @FilePath: /danger-manage-web/src/views/lessonsProgram/components/Lession.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="form-wrapper">
    <el-form
      class="form"
      ref="form"
      :model="form"
      label-width="auto"
      :rules="rules"
    >
      <div class="top flex">
        <el-form-item label="计划名称" prop="bankName">
          <el-input style="width: 500px" v-model="form.bankName"></el-input>
        </el-form-item>
        <!--<el-form-item label="人员类型" prop="personnelType">-->
          <!--<el-select v-model="form.personnelType" placeholder="请选择">-->
            <!--<el-option-->
              <!--v-for="item in options"-->
              <!--:key="item.value"-->
              <!--:label="item.label"-->
              <!--:value="item.value"-->
            <!--&gt;-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="开始时间" prop="releaseTime">-->
        <!--<el-date-picker-->
        <!--v-model="form.startTime"-->
        <!--value-format="yyyy-MM-dd HH:mm:ss"-->
        <!--type="datetime"-->
        <!--placeholder="开始时间"-->
        <!--default-time="12:00:00"-->
        <!--&gt;-->
        <!--</el-date-picker>-->
        <!--</el-form-item>-->
      </div>
      <!--<el-form-item label="结束时间" prop="releaseTime">-->
      <!--<el-date-picker-->
      <!--v-model="form.endTime"-->
      <!--value-format="yyyy-MM-dd HH:mm:ss"-->
      <!--type="datetime"-->
      <!--placeholder="结束时间"-->
      <!--default-time="12:00:00"-->
      <!--&gt;-->
      <!--</el-date-picker>-->
      <!--</el-form-item>-->

      <el-form-item label="选择人员" prop="releaseTime">
        <!-- table -->
        <!-- jsonSelectNameList就是呗选中的人员的json -->
        <!-- getPeopleList 是每次选中或者删除人员都会返回 一个所有人员列表的json串，[{staffId:staffId,staffName:staffName},{staffId:staffId,staffName:staffName}] -->
        <!-- 要在jsonSelectNameList赋值完毕之后 调用一下 this.$refs.changePaple.changeNameList  135行 -->
        <ChangePapel
          ref="changePaple"
          :jsonSelectNameList="jsonSelectNameList"
          @getPeopleList="getPeopleList"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ChangePapel from "@/components/PeopleChange";
// import { mapGetters } from "vuex";
// import {
//   addLessons,
//   getLessonById,
//   changeLesson,
// } from "@/api/educationPlanExam/lessonsProgram";
import {
  listBank,
  addBank,
  updateBank,
  getBank,
} from "@/api/educationPlanExam/questionBank";

// 所有部门
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  getPersonnel,
  addPlan,
  editPlan,
  getPlanList,
  getPlan,
} from "@/api/educationPlanExam/trainingProgram";
export default {
  name: "",
  props: {
    bankId: {
      type: Number,
    },
    jsonData: {
      tyoe: Array,
    },
    // jsonSelectNameList: {
    //   type: String,
    //   default:
    //     '[{"staffId":880,"staffName":"孙卓亚"},{"staffId":871,"staffName":"张玉宾"},{"staffId":869,"staffName":"李二朝"},{"staffId":870,"staffName":"盖永峰"},{"staffId":868,"staffName":"刘丽艳"},{"staffId":867,"staffName":"霍文俊"},{"staffId":866,"staffName":"刘志坚"},{"staffId":865,"staffName":"郝文权"},{"staffId":864,"staffName":"齐雪军"},{"staffId":852,"staffName":"刘江平"},{"staffId":853,"staffName":"谷建海"},{"staffId":851,"staffName":"丁振国"},{"staffId":850,"staffName":"齐江波"},{"staffId":849,"staffName":"周立新"},{"staffId":848,"staffName":"史志波"},{"staffId":847,"staffName":"王增波"},{"staffId":846,"staffName":"杨彦龙"},{"staffId":845,"staffName":"杨华国"},{"staffId":844,"staffName":"王青华"}]',
    // },
  },
  components: {
    ChangePapel,
  },
  data() {
    return {
      options: [
        {
          value: 1,
          label: "内部员工",
        },
        {
          value: 2,
          label: "承包商培训",
        },
      ],
      form: {
        bankName: "",
        // courseType: "",
        // courseConent: "",
        // video: "",
        // enclosure: "",
        deptId: null,
        personnelType: 1,
        abc: 0,
      },
      // 参考人员
      jsonSelectNameList: null,

      peopleList: [],
      // 归属部门列表
      deptOptions: [],

      fileListVideo: [],
      fileListFile: [],
      readOnly: false,
      // selectNameList: [],
      rules: {
        bankName: [
          { required: true, trigger: "blur", message: "计划名称不能为空" },
        ],
        deptId: [
          { required: true, trigger: "blur", message: "请选择所属部门" },
        ],
      },
    };
  },
  computed: {
    // 获取课程类型
    // ...mapGetters(["courseOptions"]),
  },
  created() {
    if (this.bankId) {
      this.getLessonById();
    }

    // 归属部门列表
    // this.getTreeselect();
  },
  mounted() {
    // this.jsonSelectNameList

    // '[{"staffId":880,"staffName":"孙卓亚"},{"staffId":871,"staffName":"张玉宾"},{"staffId":869,"staffName":"李二朝"},{"staffId":870,"staffName":"盖永峰"},{"staffId":868,"staffName":"刘丽艳"},{"staffId":867,"staffName":"霍文俊"},{"staffId":866,"staffName":"刘志坚"},{"staffId":865,"staffName":"郝文权"},{"staffId":864,"staffName":"齐雪军"},{"staffId":852,"staffName":"刘江平"},{"staffId":853,"staffName":"谷建海"},{"staffId":851,"staffName":"丁振国"},{"staffId":850,"staffName":"齐江波"},{"staffId":849,"staffName":"周立新"},{"staffId":848,"staffName":"史志波"},{"staffId":847,"staffName":"王增波"},{"staffId":846,"staffName":"杨彦龙"},{"staffId":845,"staffName":"杨华国"},{"staffId":844,"staffName":"王青华"}]';
    this.$refs.changePaple.changeNameList(this.jsonSelectNameList);
  },
  methods: {
    // 添加课程
    addLessons(data) {
      if (!this.bankId) {
        console.log(data);
        return addBank(data);
      } else {
        console.log("修改");
        return updateBank({ bankId: this.bankId, ...data });
      }
    },
    // 复现
    getLessonById() {
      getPlan(this.bankId).then((res) => {
        console.log("res", res);
        if (res.code == 200) {
          this.form = {
            bankName: res.data.planName,
            deptId: res.data.planId,
            personnelType: res.data.personnelType,
          };
          // 人名复现
          this.jsonSelectNameList = JSON.stringify(this.jsonData);
          this.$refs.changePaple.changeNameList(this.jsonSelectNameList);

          //   const data = res.data;
          //   const { bankName, courseType, courseConent, video, enclosure } =
          //     data;
          //   this.form = {
          //     bankName,
          //     courseType,
          //     courseConent,
          //     video,
          //     enclosure,
          //   };
          //   this.fileListVideo = [
          //     {
          //       name: bankName + "视频",
          //       url: uploadfile,
          //     },
          //   ];
          //   this.fileListFile = [
          //     {
          //       name: bankName + "附件",
          //       url: uploadfile,
          //     },
          //   ];
        }
      });
    },
    // 获取参考人员的list
    getPeopleList(list) {
      console.log("参考人员", list);
      this.peopleList = list;
    },
    savePlan() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.peopleList.length < 3) {
            this.$message.error("请至少选择一个考试人员");
            return;
          }
          //console.log(this.peopleList);
          this.form.peopleList = this.peopleList.toString();
          this.form.planName = this.form.bankName;
          console.log(this.form);
          if (this.bankId != null) {
            this.form.planId = this.bankId;

            return editPlan(this.form).then((res) => {
              if (res.code == 200) {
                this.$parent.$parent.$parent.getPlanList();
              }
            });
          } else {
            return addPlan(this.form).then((res) => {
              if (res.code == 200) {
                this.$parent.$parent.$parent.getPlanList();
              }
            });
          }
        }
      });
    },
    save(num = 2) {
      // 因为富文本编辑器会残留<p><br></p>，所以要清空
      // if (this.form.courseConent === "<p><br></p>") {
      //   this.form.courseConent = "";
      // }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.addLessons({ ...this.form }).then((res) => {
            // 如果添加会传回来，就用传回来的，如果是修改本身就有，就用本身的
            // console.log('res',res)
            const bankId = this.bankId || res;
            // if (res.code == 200) {
            // 这样调比较纯函数一点
            if (num == 2) {
              this.$message({
                message: "保存题库成功",
                type: "success",
              });
            } else if (num == 3) {
              this.$message({
                message: "保存题库成功,请开始录入题目",
                type: "success",
              });
            }
            this.$parent.$parent.componentsNumChange(num);
            this.$parent.$parent.changeCourseId(bankId);
            this.$parent.$parent.$parent.getList();

            return true;
            // }
          });
        } else {
          if (!this.form.deptId) {
            document.querySelector(
              ".vue-treeselect__control"
            ).style.borderColor = "red";
          } else {
            document.querySelector(
              ".vue-treeselect__control"
            ).style.borderColor = "";
            this.$refs.treeItem.clearValidate();
          }
        }
      });
    },
    // 保存并进入题目
    saveAndNext() {
      this.save(3);
    },
  },
};
</script>
<style lang="scss" scoped>
.form-wrapper {
  padding-top: 22px;
  width: 100%;
  height: 550px;
  // overflow: hidden;
  // padding-bottom: 10px;
  margin-bottom: 20px;
  // border-bottom: 1px solid #bbbbbb;
  .top {
    width: 100%;
    justify-content: space-between;
  }
}
</style>