<template>
  <div>
  <el-row :gutter="15">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-col :span="24">
        <el-form-item label="毕业院校" prop="school">
          <el-input v-model="formData.school" placeholder="请输入毕业院校" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="所学专业" prop="major">
          <el-input v-model="formData.major" placeholder="请输入所学专业" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="文化程度" prop="level">
          <el-select v-model="formData.level" placeholder="请选择文化程度" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in levelOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="入学日期" prop="admission_date">
          <el-date-picker v-model="formData.admission_date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            :style="{width: '100%'}" placeholder="请选择入学日期" clearable></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="毕业日期" prop="graduation_date">
          <el-date-picker v-model="formData.graduation_date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            :style="{width: '100%'}" placeholder="请选择毕业日期" clearable></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注"
            :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-col>
    </el-form>
  </el-row>
    <div slot="footer" align="right">
      <el-button type="danger" @click="close(false)">取消</el-button>
      <el-button type="primary" @click="handelConfirm">确定</el-button>
    </div>
  </div>
</template>
<script>
import { createEducation, updateEducation } from "@/api/education"
import { genTree } from '../../utils'
export default {
  name: "Educationform",
  inheritAttrs: false,
  components: { },
  props: ["formData", "action", "levelOptions"],
  data() {
    return {
      rules: {
        school: [{
          required: true,
          message: '请输入毕业院校',
          trigger: 'blur'
        }],
        major: [{
          required: true,
          message: '请输入所学专业',
          trigger: 'blur'
        }],
        level: [{
          required: true,
          message: '请选择文化程度',
          trigger: 'change'
        }],
        admission_date: [{
          required: true,
          message: '请选择入学日期',
          trigger: 'change'
        }],
        graduation_date: [{
          required: true,
          message: '请选择毕业日期',
          trigger: 'change'
        }],
        remark: [],
      },
      levelOptions: [],
    };
  },
  computed: {},
  watch: {
    // formData:'chooseDate'
  },
  created() {
    this.getlevelOptions()
  },
  mounted() {},
  methods: {
    close(val) {
      // this.$refs['elForm'].resetFields()
      this.$emit("close", val);
    },

    // getlevelOptions() {
    //   getDictList({ type__code: "education_level" }).then(res => {
    //     this.levelOptions = genTree(res.data);
    //   });
    // },
    handelConfirm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        if (this.action == "create") {
          createEducation(this.formData).then(res => {
            this.$message.success("成功");
            this.close(true);
          });
        } else {
          updateEducation(this.formData.id, this.formData).then(res => {
            this.$message.success("成功");
            this.close(true);
          });
        }
      });
    },
  }
};
</script>