<template>
  <div>
    <BaseDialog
      width="400px"
      :isShow.sync="isDialog"
      :title="dialogTitle"
      @close="close"
      @submit="submitForm"
      :appendToBody="true"
      :confirmStatus="false"
    >
      <div class="content">
        <el-form
          label-position="right"
          label-width="80px"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
        >
          <el-form-item label="姓名" prop="staffName">
            <el-input
              v-model="ruleForm.staffName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="ruleForm.sex" placeholder="请选择">
              <el-option
                v-for="item in [
                  { value: 1, label: '男' },
                  { value: 2, label: '女' },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="ruleForm.idCard" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="telephone">
            <el-input
              v-model="ruleForm.telephone"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="学历" prop="degree">
            <el-select v-model="ruleForm.degree" placeholder="请选择">
              <el-option
                v-for="item in degreeTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value.toString()"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属公司" prop="companyName">
            <el-input
              v-model="ruleForm.companyName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="科目" prop="subjectName">
            <el-select v-model="ruleForm.subjectId" placeholder="请选择">
              <el-option
                v-for="item in goodsSubjectList"
                :key="item.id"
                :label="item.subjectName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年份" prop="year">
            <el-select v-model="ruleForm.year" placeholder="请选择">
              <el-option
                v-for="item in yearList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <!-- <el-date-picker
              v-model="ruleForm.year"
              type="year"
              placeholder="选择年"
              value-format="yyyy"
              style="width: 100px"
            >
            </el-date-picker> -->
          </el-form-item>
        </el-form>
      </div>
    </BaseDialog>
  </div>
</template>
  
  <script>
export default {
  props: {
    degreeTypeList: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {
      rules: {
        // staffName: [{ required: true, message: "请输入", trigger: "blur" }],
        // sex: [{ required: true, message: "请选择", trigger: "blur" }],
        idCard: [{ required: true, message: "请输入", trigger: "blur" }],
        // telephone: [{ required: true, message: "请输入", trigger: "blur" }],
        // degree: [{ required: true, message: "请选择", trigger: "blur" }],
        // companyName: [{ required: true, message: "请输入", trigger: "blur" }],
        // subjectName: [{ required: true, message: "请选择", trigger: "blur" }],
        // year: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      ruleForm: {},
      isDialog: false,
      dialogTitle: "新增学员",
      listData: [],
      educationTypeId: "",
      goodsSubjectList: [],
      yearList: [],
    };
  },
  watch: {
    "ruleForm.subjectId"(val) {
      if (val) {
        this.getGoodsYear();
      }
    },
  },
  mounted() {},

  methods: {
    openBoxs(educationTypeId) {
      this.isDialog = true;
      this.educationTypeId = educationTypeId;
      this.ruleForm = {};
      this.getGoodsSubjectList();
    },
    // 根据业务层次获取科目
    getGoodsSubjectList() {
      var data = {
        educationId: this.educationTypeId,
      };
      this.$api
        .goodsSubjectList(data)
        .then((res) => {
          this.goodsSubjectList = res.rows;
        })
        .finally(() => {
          console.log("end");
        });
    },
    // 当前教育类型科目下商品年份列表
    getGoodsYear() {
      var data = {
        educationTypeId: this.educationTypeId,
        subjectId: this.ruleForm.subjectId,
      };
      this.$api
        .goodsYear(data)
        .then((res) => {
          this.yearList = res.rows;
        })
        .finally(() => {
          console.log("end");
        });
    },
    close() {},
    submitForm() {
      const foundSubject = this.goodsSubjectList.find(item => item.id == this.ruleForm.subjectId);
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (foundSubject) {
            this.ruleForm.subjectIdsList = [
              {
                subjectId: this.ruleForm.subjectId,
                subjectNames: foundSubject.subjectName,
                goodsIdsList: [],
              },
            ];
          }
          this.$emit(
            "handle-add-student",
            JSON.parse(JSON.stringify(this.ruleForm))
          );
          this.$message.success("新增成功~");
          this.isDialog = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
  
<style lang="scss" scoped>
/deep/ input.el-input__inner {
  width: 240px;
}
</style>
  