<template>
    <el-cascader
        ref="infoCascaderRef"
        v-model="model"
        :key="(typeof row.keyUp === 'function' ? row.keyUp(modelData) : row.keyUp) + totalIndex"
        class="info-cascader"
        :options="row.options()"
        :props="optionsConfig"
        :popper-class="row.popperClass"
        :show-all-levels="row.showAllLevels"
        :disabled="row.disabled?.(modelData)"
        :placeholder="$t(row.placeholder?.() || 'pleaseSelect')"
        :size="row.size"
        :teleported="row.teleported === undefined ? true : row.teleported"
        filterable
        :clearable="row.clearable"
        :collapse-tags="row.collapseTags"
        @change="changes"
        @visible-change="visibleChanges"
    />
</template>
<script lang="ts">
import { defineComponent } from 'vue'

defineComponent({
    name: 'InfoCascader'
})
</script>
<script lang="ts" setup>
import { PropType, reactive, ref, computed } from 'vue'
import { OptionsConfigInterface, CascaderInterface } from './index'
import useModel from '../../../script/help/useModel'
import { getTreeObjById, ObjectInterface } from '../../../script'
let props = defineProps({
    row: {
        type: Object as PropType<CascaderInterface>,
        default: () => {
        }
    },
    modelData: {
        type: Object,
        default: () => {
        }
    },
    totalIndex: Number,
    addIndex: {
        type: [Number, String],
        default: ''
    }
})
const infoCascaderRef = ref()
let { row, modelData } = props
const optionsConfig = computed(() => {
    return {
        value: row.optionsValue || 'value',
        label: row.optionsLabel || 'label',
        emitPath: row.emitPath,
        checkStrictly: row.checkStrictly,
        lazy: row.lazy,
        lazyLoad: (node, resolve) => row.lazyLoad?.(node, resolve, modelData),
        leaf: row.leaf || 'leaf',
        multiple: row.multiple
    }
})
const model = useModel(modelData, row.model as string, row.deepData, props.addIndex)
const changes = (val: any): void => {
    let selectRow = getTreeObjById(row.options(), val)
    let selectArray = infoCascaderRef.value?.getCheckedNodes?.()?.map((item:ObjectInterface)=>{
        return item.data
    }) // 获取选中的option
    row.methods?.(selectRow || val, modelData, props.addIndex, props.totalIndex, selectArray)
}
const visibleChanges = (isDropDown: boolean): void => {
    row.visibleChanges?.(isDropDown, model, props.addIndex)
    isDropDown && row.options()
}
</script>
<style lang="scss">
.info-cascader {
    width: 100%;
}
</style>
