<template>
  <div class="app-container">
    <el-form
      :model="Form"
      :rules="rules"
      ref="Form"
      label-width="100px"
      status-icon
    >
      <el-form-item label="工作类别" prop="name">
        <el-input v-model="Form.name" style="width:400px"></el-input>
      </el-form-item>
      <el-form-item label="是否可组织考试" prop="can_exam" label-width="120px">
        <el-switch v-model="Form.can_exam"></el-switch>
      </el-form-item>
      <el-form-item label="是否公开" prop="is_public" label-width="120px">
        <el-switch v-model="Form.is_public"></el-switch>
      </el-form-item>
      <el-form-item label="所属学科" prop="subject">
        <el-select v-model="Form.subject" placeholder="请选择所属学科" style="width:400px">
            <el-option
              v-for="item in subjectData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="视频分类" prop="courses">
        <el-select 
        v-model="Form.courses" multiple placeholder="请选择视频分类" style="width:400px" >
          <el-option
              v-for="item in courseList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="具体科目" prop="questioncat">
        <el-select 
        v-model="Form.questioncat" multiple placeholder="请选择题库范围" style="width:400px" >
          <el-option
              v-for="item in questioncatData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="试卷结构">
        <el-select v-model="Form.rule" placeholder="请选择试卷结构" style="width:400px">
            <el-option
              v-for="item in ruleData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发证年限">
      <el-input-number v-model="Form.issue_year" :min="1" ></el-input-number>
</el-form-item>
<el-form-item label="排序码">
      <el-input-number v-model="Form.sortnum" :min="1" ></el-input-number>
</el-form-item>
        <el-button type="primary" @click="submitForm('Form')" :loading="submitLoding">立即创建</el-button>
        <el-button @click="resetForm('Form')">重置</el-button>
        <el-button type="warning" @click="goBack()">返回</el-button>
    </el-form>
  </div>
</template>
<script>
import { createWorkScope, getTestRuleAll } from "@/api/examtest";
import { getSubjectAll, getQuestioncatAll } from "@/api/question";
import { getCourseList } from "@/api/course";
import { genTree } from "@/utils";
export default {
  data() {
    return {
      Form: {
        name: "",
        can_exam:false,
        subject: null,
        questioncat: [],
        sortnum:1,
        issue_year:5,
      },
      subjectData:[],
      questioncatData:[],
      courseList:[],
      ruleData:[],
      submitLoding:false,
      rules: {
        name: [
          { required: true, message: "名称不能为空", trigger: "blur" }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        subject: [
          { required: true, message: "学科不能为空", trigger: "change" }
        ],
        questioncat: [
          { required: true, message: "题库范围不能为空", trigger: "change" }
        ],
      }
    };
  },
  watch:{
    'Form.subject':'getQuestioncatAll',
  },
  created() {
    this.getSubjectAll();
    this.getTestRuleAll();
    this.getCourseList();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submitLoding = true
              createWorkScope(this.Form).then(response => {
                this.submitLoding = false
                this.$message({
            type: "success",
            message: "新建成功!"
          });
                this.goBack()
              });
        } else {
          return false;
        }
      });
    },
    getSubjectAll() {
      getSubjectAll().then(response => {
        this.subjectData = genTree(response.data) ;
      });
    },
    getCourseList(){
      getCourseList().then(res=>{
        this.courseList = res.data
      })
    },
    getQuestioncatAll() {
      getQuestioncatAll({pid:this.Form.subject}).then(response => {
        this.questioncatData = genTree(response.data) ;
      });
    },
    getTestRuleAll() {
      getTestRuleAll().then(response => {
        this.ruleData = genTree(response.data) ;
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.typecount.danxuan = 0;
      this.typecount.duoxuan = 0;
      this.typecount.panduan = 0;
    },
    goBack() {
      this.$router.replace('/sjmanage/workscope/')
    }
  }
};
</script>