/**
 * 建议应用查询
 * <pro-select-tags :dataSource="?" v-model="?"> 
 * or
 * <pro-select uiType="tags" :dataSource="?" v-model="?">
 * 
 * @author xiufu.wang
 */
import ProSelectTagsList from './list'
import { valueEquals } from "element-ui/src/utils/util";
import ProSelectTagsCollapsePanel from './collapse-panel'
import Emitter from "element-ui/src/mixins/emitter";
import selectDatasourceMixin from 'mars-pro/packages/pro-select/src/mixins/select-datasource';
import ProResizeObserver from 'mars-pro/packages/pro-resize-observer'


export default {
    name: 'ProSelectTags',
    componentName: 'ProSelectTags',
    components: {
        ProSelectTagsList,
        ProSelectTagsCollapsePanel,
        ProResizeObserver
    },
    mixins: [selectDatasourceMixin, Emitter],
    provide() {
        return {
            proSelectTags: this
        }
    },
    inject: {
        elFormItem: {
            default: ''
        }
    },
    watch: {
        value: function (val, oldVal) {
            if (this.value !== this.selectValue) {
                this.selectValue = this.value
            }
            if (!valueEquals(val, oldVal)) {
                this.dispatch("ElFormItem", "el.form.change", val);
            }
        }
    },
    props: {
        //选择模式 single | multiple
        selectModel: [String, Boolean],
        multipleLimit: {
            type: Number,
            default: 0,
        },
        value: {},
        mode: {
            type: String,
            default: ''
        },
        tagCls: Object,
        size: {}
    },
    data() {
        return {
            // 标记是否展开
            expanded: false,
            selectValue: this.value,
            isSingleRow: true
        }
    },
    computed: {
        _elFormItemSize() {
            return (this.elFormItem || {}).elFormItemSize;
        },
        // 大小
        selectSize() {
            return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
        }
    },
    methods: {
        handleSyncValueOptions() {
            this.$nextTick(() => {
                const tags = this.$refs.reference.$el.querySelectorAll('.pro-layout-contaner-item')
                const startTop = this.$refs.reference.$el.getBoundingClientRect().top
                this.isSingleRow = tags.length === 0 || ((tags[tags.length - 1].getBoundingClientRect().top - startTop) < 15)
            })
        },
        addSelectCacheOptions() { },
        handleSelectTag(tag) {
            if (this.selectModel !== 'multiple') {
                this.selectValue = this.value === tag.value ? null : tag.value
            } else {
                //多选
                const v = [].concat(this.value || [])
                let index = v.indexOf(tag.value)
                if (index > -1) {
                    v.splice(index, 1)
                } else {
                    v.push(tag.value)
                }
                this.selectValue = v
            }
            this.$emit('input', this.selectValue)
            this.$emit('change', this.selectValue)
        },
        handleReSize(){
            this.handleSyncValueOptions()
        }
    },
    render() {
        const _datas = {
            'class': {
                'pro-select-tags': true,
                'pro-select-tags--expanded': this.expanded,
                'pro-select-tags--noexpanded': !this.expanded,
                'pro-select-tags--popper': this.mode === 'popper'
            }
        }
        return (
            <ProResizeObserver on-resize={this.handleReSize}>
                <div {..._datas}>
                    <ProSelectTagsList key="singe-row" class="singe-row" is-more={false} ref="reference" />
                    <ProSelectTagsCollapsePanel key="more-row" />
                </div>
            </ProResizeObserver>
        )
    },
    mounted() {
        this.handleSyncValueOptions()
    }
}