<template>
    <el-tree-select
        v-model="model"
        class="info-tree-select"
        :filterable="row.filterable"
        :data="options.list"
        :multiple="row.multiple"
        :clearable="typeof(row.clearable) === 'function' ? row.clearable() : row.clearable"
        :collapse-tags="row.collapseTags"
        :disabled="row.disabled?.(modelData)"
        :teleported="row.teleported === undefined ? true : row.teleported"
        :popper-class="row.popperClass"
        :loading="row.loading?.()"
        :render-after-expand="false"
        :show-checkbox="row.showCheckbox"
        :check-strictly="row.checkStrictly"
        :value-key="row.props?.nodeKey || 'value'"
        :node-key="row.props?.nodeKey || 'value'"
        :props="row.props"
        @visible-change="visibleChanges"
        @change="changes"
    />
</template>
<script lang="ts">
import { defineComponent, PropType, reactive } from 'vue'
import { isPromise, ObjectInterface } from '../../../script'
import { TreeSelectInterface } from './index'
import useModel from '../../../script/help/useModel'

export default defineComponent({
    name: 'InfoTreeSelect',
    props: {
        row: {
            type: Object as PropType<TreeSelectInterface>,
            default: () => {}
        },
        modelData: {
            type: Object,
            default: () => {}
        },
        addIndex: {
            type: [Number, String],
            default: () => ''
        }
    },
    emits: ['change'],
    setup (props, ctx) {
        // eslint-disable-next-line vue/no-setup-props-destructure
        const { modelData, row } = props
        const model = useModel(modelData, row.model, row.deepData, props.addIndex)
        const options = reactive({
            list: row.options(modelData)
        })
        // const getSelectValue = (value: string | ObjectInterface[]): ObjectInterface[] => { // 获取选中的值
        //     let valueList = value instanceof Array ? value : [value]
        //     let key = row.optionsValue || 'value'
        //     return options.list.filter((option: ObjectInterface) => valueList.includes(option[key]))
        // }
        const changes = (value: string | ObjectInterface[]): void => {
            // ctx.emit('change')
            if (row.methods) {
                row.methods(value, modelData)
            }
        }
        const visibleChanges = (isDropDown: boolean): void => {
            row.visibleChanges?.(isDropDown, model, modelData, row)
            if (isDropDown) {
                options.list = row.options(modelData)
                if (isPromise(options.list)) {
                    options.list!.then((res: any[]) => {
                        options.list = res
                    })
                }
            }
        }
        return {
            model,
            options,
            changes,
            visibleChanges
        }
    }
})
</script>
<style lang="scss" scoped>
.el-select {
    width: 100%;
}
</style>

