<template>
    <Select :style="style"
        ref="select"
        v-model="data[filter.code]"
        :placeholder="filter.label"
        multiple
        :max-tag-count="1"
        clearable
        @on-change="onValueChange(filter.code)"
        transfer>
        <Option :value="textSelectAll"
            disabled>
            <Checkbox v-model="checkAll"
                @on-change="ifCheckAll"
                :indeterminate="indeterminate">{{textSelectAll}}</Checkbox>
        </Option>
        <template v-if="!isFilterBy">
            <Option v-for="item in options"
                :value="item.guid"
                :key="item.guid">{{item.text}}</Option>
        </template>
        <template v-if="isFilterBy">
            <Option v-for="item in options"
                v-show="item.v"
                :value="item.guid"
                :key="item.guid">{{item.text}}</Option>
        </template>
    </Select>
</template>
<script>
import Data from '../../../../data/web-form'
import Emitter from '../../../../mixins/emitter'

export default {
    name: 'FSelect',
    data() {
        return {
            options: [],
            checkAll: false,
            indeterminate: false
        }
    },
    mixins: [Emitter],
    props: {
        filter: {
            type: Object
        },
        data: {
            type: Object
        }
    },

    computed: {
        isFilterBy() {
            return this.filter && this.filter.defValue && (this.filter.defValue.indexOf(":") > 0)
        },
        style() {
            return {
                'width': (this.filter.width || 100) + 'px'
            }
        },
        textSelectAll() {
            return this.$t('it.grid.selectAll')
        }
    },
    methods: {
        ifCheckAll(val) {
            if (val) {
                this.data[this.filter.code] = this.options.map(item => {
                    return item.guid
                })
            } else {
                this.data[this.filter.code] = []
            }
        },

        onValueChange(code) {
            let len = this.options.length
            let currLen = this.data[code].length
            if (len === currLen) {
                this.indeterminate = false
                this.checkAll = true
            } else if (currLen > 0 && currLen < len) {
                this.indeterminate = true
                this.checkAll = false
            } else {
                this.checkAll = false
                this.indeterminate = false
            }
            //发送 'on-字段-change'事件
            // this.dispatch('FilterPane', `on-${code}-change`, this.data[code]);
            // 暂时不支持联动
        },
        //联动过滤
        filterBy(value) {
            // 暂时不支持联动
            // if (value) {
            //     if (Array.isArray(value)) {
            //         this.options.forEach((item) => {
            //             item['v'] = (value.includes(item['parent'])) ? 1 : 0
            //         });
            //     } else {
            //         this.options.forEach((item) => {
            //             item['v'] = (value == item['parent']) ? 1 : 0
            //         });
            //     }
            // } else {
            //     this.options.forEach((item) => {
            //         item['v'] = 0
            //     });
            // }

            // this.$refs.select.clearSingleSelect()
        },

        prepareData(data) {
            if (this.isFilterBy) {
                data.forEach(item => { item.v = 0 })

                const code = this.filter.defValue.split(":")[1];
                const eventName = `on-${code}-change`
                this.$on(eventName, (fnName, value) => {
                    this[fnName](value)
                })
            }

            return data
        }
    },
    mounted() {
        if (this.filter) {
            const ds = this.filter.ds

            if (!ds) {
                return
            }

            if (/^\[/.test(ds)) {
                //数组配置 [{guid,text},...]
                this.options = JSON.parse(ds)
            } else {
                Data.queryConfigSelectData(ds).then((res) => {
                    this.options = this.prepareData(res)
                });
            }
        }
    }
};

</script>
<style lang="less"
    scoped>
</style>
