<template>
  <el-form
    ref="form"
    :label-width="labelWidth + 'px'"
    :model="modelValue"
    :rules="rules"
  >
    <el-row>
      <el-col :span="24">
        <el-form-item label="所属领域:">
          <el-row justify="space-between" type="flex">
            <el-col :span="7">
              <el-form-item prop="industrys">
                <el-select
                  v-model="modelValue.industrys[0]"
                  placeholder="请选择"
                  value-key="id"
                  @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="modelValue.industrys[1]"
                placeholder="请选择"
                value-key="id"
                @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="modelValue.industrys[2]"
                placeholder="请选择"
                value-key="id"
              >
                <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 setup>
import { listSysIndustry } from "@/api/platform/industry";
// import { watch } from "fs";
import { reactive, toRefs, watch } from "vue";

const props = defineProps({
  modelValue: Object,
  labelWidth: {
    type: Number,
    default: 120,
  },
});
const { modelValue, labelWidth } = toRefs(props);
const data = reactive({
  rules: {
    industrys: [
      {
        type: "array",
        required: true,
        message: "请选择",
        trigger: "change",
      },
    ],
  },
});

const { rules } = toRefs(data);
const levelI = ref([]);
const levelII = ref([]);
const levelIII = ref([]);

// 获取领域树形列表
const getIndustryTreeData = async () => {
  const { data } = await listSysIndustry();
  levelI.value = data;
};

const levelIChange = async (item) => {
  delete modelValue.value.industrys[1];
  delete modelValue.value.industrys[2];
  // levelII.value = levelI.value.find((el) => {
  //   return el.id === item;
  // }).children;
};

const levelIIChange = async (item) => {
  delete modelValue.value.industrys[2];
  // levelIII.value = levelII.value.find((el) => el.id === item).children;
};
getIndustryTreeData().then(() => {
  watch(
    () => modelValue.value.industrys[0],
    (val) => {
      levelII.value =
        levelI.value.find((el) => {
          return el.id == val;
        })?.children ?? [];
    },
    { immediate: true }
  );
  watch(
    () => modelValue.value.industrys[1],
    (val) => {
      levelIII.value =
        levelII.value.find((el) => {
          return el.id == val;
        })?.children ?? [];
    },
    { immediate: true }
  );
});
</script>
