<template>
  <DialogSelf
    :title="form.id ? '编辑科目分类' : '新增科目分类'"
    :visible="value"
    @onConfirm="handleConfirm"
    @onCancel="handleClose"
    :actionBarOption="{ confirmLoading: confirmLoading }"
    width="20%"
  >
    <el-form
      ref="subjectEditorForm"
      :rules="rules"
      label-width="90px"
      :model="form"
    >
      <el-form-item label="科目名称" prop="name">
        <el-input
          style="width: 90%"
          v-model="form.name"
          maxlength="30"
        ></el-input>
      </el-form-item>
      <el-form-item label="训练类型" prop="train">
        <el-cascader
          ref="subjectTypeCascader"
          style=" 0;width:90%"
          :props="{ emitPath: false, value: 'id', label: 'name' }"
          v-model="form.train"
          :options="subject_Type"
        ></el-cascader>
      </el-form-item>
    </el-form>
  </DialogSelf>
</template>

<script>
import {
  editorSubjectClassifyApi,
  createSubjectClassifyApi
} from '@/api/training/subject'
import DialogSelf from '@/components/layout/DialogLayout.vue'
export default {
  props: {
    value: {
      type: Boolean,
      default: () => true
    },
    form: {
      type: Object,
      default: () => {}
    },
    subject_Type: {
      type: Array,
      default: () => []
    }
  },
  data () {
    const checkClassifyTrain = (rule, value, callback) => {
      if (!value || value.length <= 0) {
        callback(new Error('请选择分类'))
      }
      callback()
    }
    return {
      confirmLoading: false,
      rules: {
        name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
        train: [
          { required: true, message: '请选择训练类型', trigger: 'blur' },
          {
            validator: checkClassifyTrain,
            message: '请选择部件状态',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  components: {
    DialogSelf
  },
  activated () {
  },
  mounted () {},
  methods: {
    handleClose () {
      this.$emit('input', false)
    },
    async handleConfirm () {
      this.$refs.subjectEditorForm.validate(async (isok) => {
        try {
          if (!isok) {
            return
          }
          this.confirmLoading = true
          const submitData = {
            train: this.form.train,
            name: this.form.name,
            pid: this.form.pid,
            level: this.form.level
          }
          if (this.form.id) {
            await editorSubjectClassifyApi(this.form.id, submitData)
          } else {
            await createSubjectClassifyApi(submitData)
          }
          this.$emit('successAfter')
          this.confirmLoading = false
        } catch (error) {
          this.confirmLoading = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.operation-header {
  width: 100%;
  display: flex;
  justify-content: right;
  margin-bottom: 10px;
}
</style>
