<style>
.nx-select-tree {
    text-align: left;
    padding: 0 6px;
}
</style>
<template>
    <i-select ref="select" class="ivu-auto-complete" :disabled="disabled" :placeholder="placeholder" :size="size" :placement="placement" @on-change="handleChange" :transfer="transfer">
        <slot>
            <Tree class="nx-select-tree" :data="treeData" @on-select-change="selectData"></Tree>
        </slot>
    </i-select>
</template>
<script>
import { oneOf } from '../../../../utils/assist'
import { convertToTreeData } from '../../../../utils/tree-utils'
import Emitter from '../../../../mixins/emitter'

export default {
    name: 'SelectTree',
    mixins: [Emitter],
    props: {
        value: {
            type: [String, Number],
            default: ''
        },
        data: {
            type: Array,
            default: () => []
        },
        disabled: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String
        },
        size: {
            validator(value) {
                return oneOf(value, ['small', 'large', 'default']);
            },
            default () {
                return !this.$IVIEW || this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
            }
        },
        icon: {
            type: String
        },
        placement: {
            validator(value) {
                return oneOf(value, ['top', 'bottom']);
            },
            default: 'bottom'
        },
        transfer: {
            type: Boolean,
            default () {
                return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
            }
        },
        name: {
            type: String
        }
    },
    data() {
        return {
            currentValue: this.value,
            disableEmitChange: false, // for Form reset
            treeData: undefined,
            label: undefined
        };
    },
    mounted() {},

    computed: {},
    watch: {
        value(val) {
            if (!this.label) {
                if (val) {
                    let node = this.getNode(val, this.data);
                    if (node) {
                        let label = node.title;
                        this.$set(node, "selected", true);

                        this.$refs.select.$emit('on-select-selected', {
                            value: val,
                            label: label
                        });
                    }
                }
            }

            if (this.currentValue !== val) {
                this.disableEmitChange = true;
            }
            this.currentValue = val;
        },
        currentValue(val) {
            this.$emit('input', val);
            if (this.disableEmitChange) {
                this.disableEmitChange = false;
                return;
            }
            this.$emit('on-change', val);
            this.dispatch('FormItem', 'on-form-change', val);
        },

        data(val) {
            if (val) {
                if (!this.label) {
                    if (this.value) {
                        let node = this.getNode(this.value, this.data);
                        if (node) {
                            let label = node.title;
                            this.$set(node, "selected", true);

                            this.$refs.select.$emit('on-select-selected', {
                                value: this.value,
                                label: label
                            });
                        }
                    }
                }
                this.treeData = convertToTreeData(val);
            }
        }
    },
    methods: {
        /*获取选中的节点*/
        getNode(guid, data) {
            return data.find((item) => {
                return item.guid == guid;
            });
        },
        handleChange(val) {
            this.currentValue = val;
            this.$emit('on-select', val);
        },
        selectData(node) {
            if (this.disabled) return false;

            if (node && node.length > 0) {
                const select = node[0];

                const guid = select.guid || select.title;
                const label = select.title;

                this.label = label;
                this.$refs.select.$emit('on-select-selected', {
                    value: guid,
                    label: label,
                });
            }
        }
    }
};
</script>