<template>
    <div>
        <el-row type="flex">
            <div style="display: inline-block;line-height: 32px;">所属领域：</div>
            <div style="flex:1">
                <el-row :gutter="10" style="margin-bottom: 10px;">
                    <el-col :span="8">
                        <el-select
                            style="width: 100%;"
                            placeholder="请选择"
                            v-model="state.id1"
                            @change="state.id2 = '';change()"
                            clearable
                        >
                            <el-option
                                v-for="option in state.industryList"
                                :key="option.id"
                                :value="option.id"
                                :label="option.name"
                            />
                        </el-select>
                    </el-col>
                    <el-col :span="8">
                        <el-select
                            style="width: 100%;"
                            placeholder="请选择"
                            v-model="state.id2"
                            @change="state.id3 = '';change()"
                            clearable
                        >
                            <el-option
                                v-for="option in searchIndustryData(state.id1)['children']"
                                :key="option.id"
                                :value="option.id"
                                :label="option.name"
                            />
                        </el-select>
                    </el-col>
                    <el-col :span="8">
                        <el-select
                            style="width: 100%;"
                            placeholder="请选择"
                            v-model="state.id3"
                            @change="change()"
                            clearable
                        >
                            <el-option
                                v-for="option in searchIndustryData(state.id2)['children']"
                                :key="option.id"
                                :value="option.id"
                                :label="option.name"
                            />
                        </el-select>
                    </el-col>
                </el-row>
            </div>
        </el-row>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { industry } from "@/api/website/home/index";
const state = reactive({
    industryList: [],
    id1: '',
    id2: '',
    id3: '',
});
let treeData = [];
const emit = defineEmits();
function change() {
    emit("industryChange", {
        id1: state.id1,
        id2: state.id2,
        id3: state.id3,
    });
}

function searchIndustryData (code) {
    return deepFindTree(code, treeData);
}

function deepFindTree (code, arr) {
    let snap = false;
    for (let index = 0; index < arr.length; index++) {
        const ele = arr[index];
        if (code == ele.id) {
            snap = ele;
            break;
        } else if (ele['children'] != null) {
            snap = deepFindTree(code, ele['children']);
            if (snap) {
                break;
            }
        } else {
            snap = false;
        }
    }
    return snap;
}

function init () {
    industry().then(res => {
        if (200 == res.code) {
            state.industryList = res.data;
            treeData = res.data;
        }
    })
}

onMounted(() => {
    init();
});

</script>