<template>
  <el-dialog
    :visible.sync="modalIsShow"
    :title="title"
    top="10vh"
    width="600px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @open="visibleChange"
  >
    <el-form
      ref="modalFormComp"
      :model="modalForm"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item prop="cultureProgramId" label="所属培养方案：">
        <el-select
          v-model="modalForm.cultureProgramId"
          placeholder="请选择"
          filterable
          clearable
          class="width-full"
          @change="trainingPlanChange"
        >
          <el-option
            v-for="item in trainingPlans"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="semesterId" label="修读学期：">
        <semester-select
          v-model="modalForm.semesterId"
          placeholder="修读学期"
          class="width-full"
        ></semester-select>
      </el-form-item>
      <el-form-item prop="courseId" label="课程：">
        <el-select
          v-model="modalForm.courseId"
          placeholder="请选择"
          filterable
          clearable
          class="width-full"
        >
          <el-option
            v-for="item in courses"
            :key="item.id"
            :value="item.id"
            :label="`${item.name}（${item.code}）`"
          >
            <span>{{ `${item.name}（${item.code}）` }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="evaluationMode" label="考核方式：">
        <el-select
          v-model="modalForm.evaluationMode"
          placeholder="请选择"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="(val, key) in EVALUATION_MODE"
            :key="key"
            :value="key"
            :label="val"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="courseType" label="课程类别：">
        <el-select
          v-model="modalForm.courseType"
          placeholder="请选择"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="(val, key) in COURSE_TYPE"
            :key="key"
            :value="key"
            :label="val"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <p class="tips-info" style="padding-left: 20px">
      说明：课程大纲名称系统会自动按培养方案名称+课程名称+课程大纲自动命名
    </p>
    <div slot="footer">
      <el-button type="primary" :disabled="isSubmit" @click="submit"
        >确认</el-button
      >
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  updateCourseOutline,
  selectableTrainingPlanList,
  selectableTrainingPlanCourseList,
} from "../../api";

import { EVALUATION_MODE, COURSE_TYPE } from "@/constants/enumerate";

const initModalForm = {
  id: null,
  courseOutlineName: "",
  courseId: "",
  evaluationMode: "",
  courseType: "",
  cultureProgramId: "",
  semesterId: "",
};

export default {
  name: "modify-course-outline",
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      isSubmit: false,
      EVALUATION_MODE,
      COURSE_TYPE,
      modalForm: { ...initModalForm },
      courses: [],
      trainingPlans: [],
      rules: {
        courseOutlineName: [
          { required: true, message: "请输入课程大纲名称", trigger: "change" },
          {
            message: "课程大纲名称不能超过30个字",
            max: 30,
            trigger: "change",
          },
        ],
        courseId: [
          { required: true, message: "请选择课程", trigger: "change" },
        ],
        evaluationMode: [
          { required: true, message: "请选择考核方式", trigger: "change" },
        ],
        courseType: [
          { required: true, message: "请选择课程类别", trigger: "change" },
        ],
        semesterId: [
          { required: true, message: "请选择修读学期", trigger: "change" },
        ],
        cultureProgramId: [
          { required: true, message: "请选择所属培养方案", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    isEdit() {
      return !!this.instance.id;
    },
    title() {
      return (this.isEdit ? "编辑" : "新增") + "课程大纲";
    },
  },
  methods: {
    visibleChange() {
      this.modalForm = this.$objAssign(initModalForm, this.instance);
      this.modalForm.courseOutlineName = this.instance.outlineName || "";
      this.getTrainingPlans();
      this.getCourses();

      this.$nextTick(() => {
        this.$refs.modalFormComp.clearValidate();
      });
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getTrainingPlans() {
      this.trainingPlans = [];
      const res = await selectableTrainingPlanList();
      this.trainingPlans = res || [];
    },
    async getCourses() {
      this.courses = [];
      if (!this.modalForm.cultureProgramId) return;
      const res = await selectableTrainingPlanCourseList(
        this.modalForm.cultureProgramId
      );
      this.courses = res || [];
    },
    trainingPlanChange() {
      this.modalForm.courseId = "";
      this.getCourses();
    },
    async submit() {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

      if (this.isSubmit) return;
      this.isSubmit = true;
      const data = await updateCourseOutline(this.modalForm).catch(() => {});
      this.isSubmit = false;

      if (!data) return;

      this.$message.success("修改成功！");
      this.$emit("modified");
      this.cancel();
    },
  },
};
</script>
