<template>
  <el-form
    :disabled="!isAdd"
    ref="form"
    :model="value"
    :rules="rules"
    :label-width="labelWidth + 'px'"
  >
    <el-row>
      <el-col :span="24">
        <el-form-item label="所属领域:" required>
          <el-row type="flex" justify="space-between">
            <el-col :span="7">
              <el-form-item prop="industrys">
                <el-select
                  v-model="value.industrys[0]"
                  value-key="id"
                  placeholder="请选择"
                  @change="levelIChange"
                >
                  <el-option
                    v-for="item in levelI"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-select
                v-model="value.industrys[1]"
                value-key="id"
                placeholder="请选择"
                @change="levelIIChange"
              >
                <el-option
                  v-for="item in levelII"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="7">
              <el-select
                v-model="value.industrys[2]"
                value-key="id"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in levelIII"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { industry } from "@/api/config";
export default {
  props: {
    value: Object,
    isAdd: {
      type: Boolean,
      default: true,
    },
    labelWidth: {
      type: Number,
      default: 120,
    },
  },
  data() {
    return {
      levelI: [], // I级数据
      levelII: [], // II级数据
      levelIII: [], // III级数据
      rules: {
        industrys: [
          {
            type: "array",
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    value(newOld) {
      const data = Object.assign({}, newOld);
      let key = [];
      for (let i = 0; i < data.industrys.length; i++) {
        key.push(data.industrys[i].key);
      }
      if (key.length > 0) {
        this.levelIChange(key[0]);
      }
      if (key.length > 1) {
        this.levelIIChange(key[1]);
      }
      newOld.industrys = key;
    },
  },
  methods: {
    getFieldByParent(id) {
      return new Promise((resolve, reject) => {
        industry({ parent_id: id })
          .then(({ code, msg, data }) => {
            if (code == 200) {
              resolve(data);
            } else {
              this.$modal.msgError(msg);
              reject({ msg, code });
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    async levelIChange(id) {
      this.value.industrys[1] = "";
      this.value.industrys[2] = "";
      this.levelII = await this.getFieldByParent(id);
    },
    async levelIIChange(id) {
      this.value.industrys[2] = "";
      this.levelIII = await this.getFieldByParent(id);
    },
    submitForm() {
      let flag = false;
      this.$refs["form"].validate((valid) => {
        flag = valid;
      });
      return flag;
    },
  },
  created() {
    industry().then((res) => {
      this.levelI = res.data;
    });
  },
};
</script>