<template>
  <div class="notice-editor-wrap" id="screenSet">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird" :jumPathThird="jumPathThird"></bread-crumb>

    <div class="add-content screenSet" >
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        label-width="160px"
        class="basic-form"
      >
        <el-form-item label="所属职称：" prop="titleCode">
          <el-select size="small" v-model="formData.titleCode" placeholder="请选择职称">
            <el-option
              v-for="item in gradeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学科名称：" prop="name">
          <el-col :span="13">
            <el-input
              size="small"
              v-model="formData.name"
              placeholder="请输入学科名称"
              style="width:70%;"
            ></el-input>
            <span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/20</span>
          </el-col>
        </el-form-item>
        <el-row>
          <el-col :span="13">
            <el-button type="primary" size="small" @click="addSecondList">添加二级分类</el-button>
          </el-col>
        </el-row>
        <template v-for="(item, index) in formData.titleTestSubjectSecondModelList">
          <div class="list-block" :key="index">
            <el-form-item
              label="二级分类名称："
              :prop="`titleTestSubjectSecondModelList.${index}.name`"
              :rules="secondNameRules">
              <el-col :span="13">
                <el-input
                  size="small"
                  v-model="item.name"
                  placeholder="请输入二级分类名称"
                  style="width:70%;"
                ></el-input>
                <span class="word-num">{{(item.name).replace(/\s+/g,"").length}}/20</span>
              </el-col>
            </el-form-item>
            <el-form-item
              label="二级分类代码："
              :prop="`titleTestSubjectSecondModelList.${index}.code`"
              :rules="secondCodeRules">
              <el-col :span="13">
                <el-input
                  size="small"
                  v-model="item.code"
                  placeholder="请输入二级分类代码"
                  style="width:70%;"
                ></el-input>
                <span class="word-num">{{(item.code).replace(/\s+/g,"").length}}/8</span>
              </el-col>
            </el-form-item>
            <el-form-item
              label="是否已在项目配置课程："
              :prop="`titleTestSubjectSecondModelList.${index}.openFlag`"
              :rules="{ required: true, message: '请选择是否已在项目配置课程', trigger: 'change'}">
              <el-col :span="13">
                <el-radio-group v-model="item.openFlag">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-col>
            </el-form-item>
            <el-form-item
              v-if="item.openFlag"
              label="选择项目："
              :prop="`titleTestSubjectSecondModelList.${index}.projectId`"
              :rules="{ required: true, message: '请选择项目', trigger: 'change'}">
              <el-select size="small" v-model="item.projectId" placeholder="请选择项目">
                <el-option
                  v-for="item in projectList"
                  :key="item.projectId"
                  :label="item.projectName"
                  :value="item.projectId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-else
              label="选择预计上线时间："
              :prop="`titleTestSubjectSecondModelList.${index}.predictTime`"
              :rules="{ required: true, message: '请选择预计上线时间', trigger: 'change'}">
              <el-date-picker
                v-model="item.predictTime"
                type="month"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择月">
              </el-date-picker>
            </el-form-item>

            <i v-show="index !== 0" class="el-icon-delete icon-delete" @click="deleteSecondList(index)"></i>
          </div>
        </template>
        <el-form-item style="margin-top: 30px">
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="onReset">取消</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
import BreadCrumb from "@/components/breadcrumb.vue";
import { openLoading, closeLoading, deepCopy } from "@/utils/utils";
import * as commonUtil from "@/utils/utils";

let checkProjectStr = (rule, value, callback) => {
  if (value.indexOf("\\") != -1) {
    //存在
    callback(new Error("请勿输入字符“ \\ ”"));
  } else if (value.indexOf(".") != -1) {
    callback(new Error("请勿输入字符“ . ”"));
  } else {
    callback();
  }
};

export default {
  components: {
    BreadCrumb
  },
  data() {
    return {
      curmbFirst: "教培项目",
      curmbSecond: "学科管理",
      jumPathThird: '/subject-manager',
      curmbThird: '新建学科',
      detailInfo: {}, // 接口返回
      formData: {
        // deleteFlag: 0,
        id: 0,
        name: '',
        seqNo: 0,
        status: 2,
        titleCode: '',
        titleTestSubjectSecondModelList: [
          {
            code: '',
            // deleteFlag: 0,
            id: 0,
            name: '',
            openFlag: 1,
            predictTime: '',
            seqNo: '',
            subjectFirstId: '',
            projectId: '',
            titleTestSubjectSecondResourceModelList: [{
              // deleteFlag: 0,
              id: 0,
              resourceId: 0,
              seqNo: 0,
              subjectSecondId: 0,
              type: 0
            }]
          }
        ],
      },
      gradeList: [], // 职称列表
      projectList: [], // 项目列表
      rules: {
        titleCode: [
          { required: true, message: "请输入选择职称", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入学科名称", trigger: "blur" },
          { min: 1, max: 20, message: "输入长度为1-20的科学名称", trigger: "blur" },
          { validator: checkProjectStr, trigger: "blur" }
        ],
      },
      secondNameRules: [
        { required: true, message: "请输入二级分类名称", trigger: "blur" },
        { min: 1, max: 20, message: "输入长度为1-20的二级分类名称", trigger: "blur" },
        { validator: checkProjectStr, trigger: "blur" }
      ],
      secondCodeRules: [
        { required: true, message: "请输入二级分类代码", trigger: "blur" },
        { min: 1, max: 8, message: "输入长度为1-8的二级分类代码", trigger: "blur" },
      ]
    }
  },
  created() {
    const { id } = this.$route.query;
    if (id) {
      this.getSubjectDetail(id);
    }
    this.getGradeList();
    this.getProjectList();
  },
  mounted() {
    commonUtil.resizeHeight();
  },
  methods: {
    // 学科详情
    getSubjectDetail(id) {
      openLoading(this);
      this.GET(`portal/titleTest/info/${id}`).then(res => {
        closeLoading(this);
        if (res.code == "000000") {
          console.log('_______data_______', res.data);
          this.detailInfo = res.data;
          this.onReset();
        }
      });
    },
    // 获取职称列表
    getGradeList() {
      openLoading(this);
      this.GET("portal/titleTest/grade/list").then(res => {
        closeLoading(this);
        if (res.code == "000000") {
          const { titleGradeModelList = [] } = res.data;
          this.gradeList = titleGradeModelList;
        }
      });
    },
    // 获取项目列表
    getProjectList() {
      openLoading(this);
      this.GET("portal/titleTest/cme/list").then(res => {
        closeLoading(this);
        if (res.code == "000000") {
          this.projectList = res.data;
        }
      });
    },
    // 添加二级分类
    addSecondList() {
      this.formData.titleTestSubjectSecondModelList.push({
        code: '',
        // deleteFlag: 0,
        id: 0,
        name: '',
        openFlag: 1,
        predictTime: '',
        seqNo: '',
        subjectFirstId: '',
        projectId: '',
        titleTestSubjectSecondResourceModelList: [{
          // deleteFlag: 0,
          id: 0,
          resourceId: 0,
          seqNo: 0,
          subjectSecondId: 0,
          type: 0
        }]
      });
    },
    // 删除二级分类
    deleteSecondList(index) {
      this.$confirm('确定删除此二级分类吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.formData.titleTestSubjectSecondModelList.splice(index, 1);
      }).catch(() => {
      });
    },
    onSubmit() {
      this.$refs['formData'].validate((valid) => {
        if (!valid) {
          return false;
        }
        const params = deepCopy(this.formData);
        for (let item of params.titleTestSubjectSecondModelList) {
          let id = item.projectId;
          item.titleTestSubjectSecondResourceModelList[0]['resourceId'] = id || 0;
          delete item.projectId;
        }
        // params.createdName = this.$store.state.reservationManage.userName;
        openLoading(this);
        this.POST("portal/titleTest/insertOrUpdate", params).then(res => {
          closeLoading(this);
          if (res.code == "000000") {
            this.$message.success('提交成功')
          }
        });
      });
    },
    // 重置
    onReset() {
      if (this.detailInfo.id) {
        const result = deepCopy(this.detailInfo);
        const modelList = [];
        for (let item of result.secondSubjectModelList) {
          if (item.resourceModelList && item.resourceModelList[0]) {
            item.projectId = item.resourceModelList[0]['resourceId']
            item.titleTestSubjectSecondResourceModelList = item.resourceModelList;
            delete item.resourceModelList;
          } else {
            item.projectId = 0;
            item.titleTestSubjectSecondResourceModelList = [{
              // deleteFlag: 0,
              id: 0,
              resourceId: 0,
              seqNo: 0,
              subjectSecondId: 0,
              type: 0
            }]
          }
          modelList.push(item);
        }
        result.titleTestSubjectSecondModelList = modelList;
        delete result.secondSubjectModelList;
        this.formData = result;
      } else {
        this.formData = {
          // deleteFlag: 0,
          id: 0,
          name: '',
          seqNo: 0,
          status: 2,
          titleCode: '',
          titleTestSubjectSecondModelList: [
            {
              code: '',
              // deleteFlag: 0,
              id: 0,
              name: '',
              openFlag: 1,
              predictTime: '',
              seqNo: '',
              subjectFirstId: '',
              projectId: '',
              titleTestSubjectSecondResourceModelList: [{
                // deleteFlag: 0,
                id: 0,
                resourceId: 0,
                seqNo: 0,
                subjectSecondId: 0,
                type: 0
              }]
            }
          ],
        }
      }
    }
  },
}
</script>

<style lang="scss" scoped>
  .notice-editor-wrap {
    background: #fff;
  }
  .prot-dialog-tips-1 {
    text-align: center !important;
  }
  .add-content{
    padding: 30px 0;
  }
  .list-block{
    position: relative;
    padding: 20px 10px 0px;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    margin-top: 25px;
  }
  .icon-delete{
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 30px;
    color: red;
    cursor: pointer;
  }
</style>
