import { RecycleScroller } from 'vue-virtual-scroller';
import ElScrollbar from 'mars-pro/packages/scrollbar';
import ProDataTree from 'mars-pro/packages/pro-data-tree';
import ElOption from 'mars-pro/packages/option';
import omit from 'mars-pro/src/pro/omit';

export default {
    name: 'ProSelectTreeList',
    componentName: 'ProSelectTreeList',
    inheritAttrs: false,
    components: {
        ProDataTree,
        ElScrollbar,
        ElOption
    },
    inject: ['proselect'],
    props: {},
    computed: {
        labelKey() {
            return this.proselect.labelKey
        },
        filterDatas() {
            return this.proselect.filterDatas || []
        },
        datas() {
            return this.proselect.selectDatas || []
        }
    },
    methods: {
        handSelectTree(v) {
            const useAtrrs = this.proselect.$attrs
            if (this.proselect.selectModel !== 'multiple') {
                this.proselect.$emit('input', v)
                this.proselect.$emit('change', v)
                this.proselect.$refs.elselect.handleClose()
                return
            }
            this.proselect.$emit('input', v)
            this.proselect.$emit('change', v)
        }
    },
    render() {
        const useAtrrs = this.proselect.$attrs;
        const useNodeConentRender = (this.proselect.$scopedSlots || {}).nodeContent;
        const _datas = {
            props: {
                //如果不是懒加载
                ...(useAtrrs.lazy ? {} : { dataSource: this.filterDatas }),
                selectNodes: this.proselect.value,
                selectModel: this.proselect.selectModel === 'multiple' ? 'multiple' : true,
                nodeKey: (useAtrrs.nodeKey || this.proselect.valueKey || 'id'),
                ...(useAtrrs.selectNodesIncludes ? { selectNodesIncludes: useAtrrs.selectNodesIncludes } : {})
            },
            attrs: {
                props: {
                    label: this.proselect.labelKey
                },
                filterNodeMethod: this.proselect.defaultFilterNodeMethod,
                defaultExpandedKeys: this.proselect.selectModel === 'multiple' ? this.proselect.value : null,
                ...(useAtrrs.lazy ? {
                    load: (useAtrrs.load || this.proselect.realDataSource.treeAsyncTreeload),
                    props: {
                        isLeaf: 'isLeaf'
                    }
                } : {}),
                ...(omit(useAtrrs, ['dataSource'])),
                checkOnClickNode: this.proselect.selectModel === 'multiple'

            },
            on: {
                'update:selectNodes': this.handSelectTree
            },
            ref: 'eltree',
            key: 'eltree',
            scopedSlots: {
                nodeContent: ({ node }) => {
                    return (
                        <div>{/* {使用elOption跟踪选项数据} */}
                            <el-option label={node.label} value={node.data.value} style="display: none" />
                            {useNodeConentRender ? useNodeConentRender(node) : node.label}
                        </div>
                    )
                }
            }
        }
        
        return (
            <ElScrollbar
                tag="div"
                wrap-class="el-select-dropdown__wrap"
                view-class="el-select-dropdown__list"
            >
                <ProDataTree {..._datas} />
            </ElScrollbar>
        )
    },
    mounted() { 
        const useAtrrs = this.proselect.$attrs
        if (useAtrrs.lazy) { 
            this.proselect.ingoreEmptyText = true
        }
    }
}