<template>
    <div>
        <el-cascader
            v-model="value"
            :options="options"
            @change="handleChange"
            :show-all-levels="false"
            style="width: 100%"
            :disabled="disabled"
            :props="{
                expandTrigger: 'hover',
                checkStrictly: true,
                value: 'id',
                label: 'name',
                children: 'children',
            }"
        ></el-cascader>
    </div>
</template>
<script>
import {queryCompanyData} from '@/api/systemInterface'
import _ from 'lodash'
export default {
    props: {
        disabled: {
            type: Boolean,
            default: false,
        },
        fullPath: {
            type: Array,
            default: () => {
                return ['1765985726257963008']
            },
        },
    },
    data() {
        return {
            options: [],
            targetObj: null,
            value: this.fullPath,
        }
    },
    created() {
        this.getData()
    },
    watch: {
        fullPath(newVal) {
            this.value = newVal
        },
    },
    methods: {
        getData() {
            queryCompanyData({demId: '1726849603896352768'}).then((res) => {
                if (res.length) {
                    this.options = _.cloneDeep(res)[0].children || []
                }
            })
        },
        getObj(options, id) {
            options.forEach((item) => {
                if (item.id == id) {
                    this.obj = item
                } else {
                    if (item.children) {
                        this.getObj(item.children, id)
                    }
                }
            })
        },
        handleChange(value) {
            let lastVal = value[value.length - 1]
            this.getObj(this.options, lastVal)
            this.obj.companyIds = value
            this.$emit('change', this.obj)
        },
    },
}
</script>
