<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="cert_field">
          <treeselect v-model="formData.cert_field" :multiple="false" :options="cert_fieldOptions" :disable-branch-nodes="true" placeholder="请选择认证领域" :style="{width: '100%'}" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="证书号" prop="cert_number">
          <el-input v-model="formData.cert_number" placeholder="请输入证书号" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="资格类型" prop="auditor_type">
          <el-select v-model="formData.auditor_type" placeholder="请选择资格类型" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in auditor_typeOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="文号" prop="publish_number">
          <el-input v-model="formData.publish_number" placeholder="请输入文号" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="证书注册" prop="registration_date">
          <el-date-picker v-model="formData.registration_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="expiration_date">
          <el-date-picker v-model="formData.expiration_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="is_paused" required>
          <el-switch v-model="formData.is_paused"></el-switch>
        </el-form-item>
      </el-col>
            <el-col :span="12">
        <el-form-item label="是否有效" prop="is_enabled" required>
          <el-switch v-model="formData.is_enabled"></el-switch>
        </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 { createQualification, updateQualification } from "@/api/qualification"
import { getDictList } from "@/api/dict";
import { genTree } from "@/utils";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name:'Qualificationform',
  inheritAttrs: false,
  components: { Treeselect },
  props: ['formData', 'action'],
  data() {
    return {
      rules: {
        cert_field: [
          {
            required: true,
            message: "请选择认证领域",
            trigger: "blur"
          }
        ],
        cert_number: [
          {
            required: true,
            message: "请输入证书号",
            trigger: "blur"
          }
        ],
        auditor_type: [
          {
            required: true,
            message: "请选择资格类型",
            trigger: "blur"
          }
        ],
        publish_number: [],
                registration_date: [{
          required: true,
          message: '请选择证书注册',
          trigger: 'blur'
        }],
        expiration_date: [{
          required: true,
          message: '请选择证书过期',
          trigger: 'blur'
        }],
      },
      cert_fieldOptions: [],
      auditor_typeOptions: []
    };
  },
  computed: {},
  watch: {
    // formData:'chooseDate'
  },
  created() {
    this.getCert_fieldOptions()
    this.getAud_typeOptions()
  },
  mounted() {
  },
  methods: {
    close(val) {
      // this.$refs['elForm'].resetFields()
      this.$emit("close", val);
    },
    getAud_typeOptions(){
      getDictList({ type__code: "auditor_qualification_type" }).then(res=>{
        this.auditor_typeOptions = genTree(res.data)
    })
    },
    getCert_fieldOptions(){
      getDictList({ type__code: "cert_field" }).then(res=>{
        this.cert_fieldOptions = genTree(res.data)
    })
    },
    handelConfirm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        if(this.action=='create'){
          createQualification(this.formData).then(res=>{
            this.$message.success('成功')
            this.close(true);
          })
        }else{
          updateQualification(this.formData.id, this.formData).then(res=>{
            this.$message.success('成功')
            this.close(true);
          })
        }
        
      });
    }
  }
};
</script>