<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="认证领域" prop="cert_field">
          <treeselect
            v-model="formData.cert_field"
            :multiple="false"
            :normalizer="normalizer"
            :options="cert_fieldOptions"
            :disable-branch-nodes="true"
            placeholder="请选择认证领域"
            :style="{width: '100%'}"
            @select="typeChange"
            clearable
          />
        </el-form-item>
        <el-form-item label="能力来源" prop="afrom">
          <el-select
            v-model="formData.afrom"
            placeholder="请选择能力来源"
            clearable
            :style="{width: '100%'}"
          >
            <el-option
              v-for="(item, index) in afromOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业(CCC)" prop="major_rule" v-if="cert_field_code == 'CCC'">
          <el-select
            v-model="formData.major_rule"
            placeholder="请选择专业(CCC)"
            clearable
            :style="{width: '100%'}"
          >
            <el-option
              v-for="(item, index) in major_ruleOptions"
              :key="index"
              :label="item.code + '/' + item.name"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="major" v-else>
          <treeselect
            v-if="cert_field_code == 'PV'"
            v-model="formData.major"
            :normalizer="normalizer"
            :multiple="false"
            :options="majorOptions2"
            :disable-branch-nodes="true"
            placeholder="请选择专业"
            :style="{width: '100%'}"
            clearable
          />
          <treeselect
            v-else
            v-model="formData.major"
            :normalizer="normalizer"
            :multiple="false"
            :options="majorOptions1"
            :disable-branch-nodes="true"
            placeholder="请选择专业"
            :style="{width: '100%'}"
            clearable
          />
        </el-form-item>
        <el-form-item label="能力项" prop="auditor_abilitys">
          <el-select
            v-model="formData.auditor_abilitys"
            placeholder="请选择能力项"
            multiple
            clearable
            :style="{width: '100%'}"
          >
            <el-option
              v-for="(item, index) in auditor_abilitysOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评定日期" prop="access_date">
          <el-date-picker
            v-model="formData.access_date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :style="{width: '100%'}"
            placeholder="请选择评定日期"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="是否暂停" prop="is_paused" required>
          <el-switch v-model="formData.is_paused"></el-switch>
        </el-form-item>
        <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-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 { createAbility, updateAbility } from "@/api/ability";
import { getImplementRuleList } from "@/api/implementrule"
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: "Abilityform",
  inheritAttrs: false,
  components: { Treeselect },
  props: ["formData", "action", "cert_fieldOptions"],
  data() {
    return {
      rules: {
        cert_field: [
          {
            required: true,
            message: "请选择认证领域",
            trigger: "blur"
          }
        ],
        afrom: [
          {
            required: true,
            message: "请选择能力来源",
            trigger: "blur"
          }
        ],
        major: [],
        major_rule: [],
        auditor_abilitys: [
          {
            required: true,
            type: "array",
            message: "请至少选择一个能力项",
            trigger: "blur"
          }
        ],
        access_date: [
          {
            required: true,
            message: "请选择评定日期",
            trigger: "blur"
          }
        ],
        remark: []
      },
      cert_field_code: null,
      afromOptions: [],
      majorOptions: [],
      major_ruleOptions: [],
      auditor_abilitysOptions: [],
      majorOptions1: [],
      majorOptions2: []
    };
  },
  computed: {},
  watch: {
    // formData:'chooseDate'
  },
  created() {
    if(this.formData.cert_field_){
      // this.cert_field_code = this.formData.cert_field_.code
      this.typeChange(this.formData.cert_field_)
    }
    this.getafromOptions();
    this.getauditor_abilitysOptions();
    this.getmajorOptions1();
    this.getmajorOptions2();
    this.getmajor_ruleOptions()
    
  },
  mounted() {},
  methods: {
    close(val) {
      // this.$refs['elForm'].resetFields()
      this.$emit("close", val);
    },
    typeChange(node, id) {
      this.cert_field_code = node.code;
      console.log(this.cert_field_code);
    },
    getafromOptions() {
      getDictList({ type__code: "ability_from" }).then(res => {
        this.afromOptions = genTree(res.data);
      });
    },
    getauditor_abilitysOptions() {
      getDictList({ type__code: "auditor_ability" }).then(res => {
        this.auditor_abilitysOptions = genTree(res.data);
      });
    },
    getmajorOptions1() {
      getDictList({ type__code: "cnas_scope" }).then(res => {
        this.majorOptions1 = genTree(res.data);
      });
    },
    getmajorOptions2() {
      getDictList({ type__code: "pv_scope" }).then(res => {
        this.majorOptions2 = genTree(res.data);
      });
    },
    getauditor_abilitysOptions() {
      getDictList({ type__code: "auditor_ability" }).then(res => {
        this.auditor_abilitysOptions = genTree(res.data);
      });
    },
    getmajor_ruleOptions() {
getImplementRuleList({cert_field__code:'CCC'}).then(res=>{
  this.major_ruleOptions = res.data.results
})
    },
    handelConfirm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        if (this.action == "create") {
          createAbility(this.formData).then(res => {
            this.$message.success("成功");
            this.close(true);
          });
        } else {
          updateAbility(this.formData.id, this.formData).then(res => {
            this.$message.success("成功");
            this.close(true);
          });
        }
      });
    },
    normalizer(node) {
      //去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.fullname?node.fullname:node.name,
        children: node.children
      };
    }
  }
};
</script>