<template>
    <Select
        :clearable="true"
        :placeholder="filter.label"
        :style="style"
        @on-change="onValueChange(filter.code)"
        filterable
        ref="select"
        transfer
        v-model="data[filter.code]"
    >
        <template v-if="!isFilterBy">
            <Option
                :key="item.guid + index"
                :value="item.guid"
                v-for="(item, index) in options"
            >{{item.text}}</Option>
        </template>
        <template v-if="isFilterBy">
            <Option
                :key="item.guid + index"
                :value="item.guid"
                v-for="(item, index) in visibleOptions"
            >{{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: [],
        }
    },
    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',
            }
        },
        visibleOptions() {
            return this.options.filter((item) => {
                return item.v === 1
            })
        },
    },
    methods: {
        onValueChange(code) {
            //发送 '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)
                let selectedItem = this.options.find((item) => item.select)
                if (selectedItem) {
                    this.$set(this.data, this.filter.code, selectedItem.guid)
                }
            } else {
                Data.queryConfigSelectData(ds).then((res) => {
                    this.options = this.prepareData(res)
                    let selectedItem = this.options.find((item) => {
                        if (item.select && item.select == 'true') {
                            return item
                        }
                    })

                    if (selectedItem) {
                        this.data[this.filter.code] = selectedItem.guid
                    }
                })
            }
        }
    },
}
</script>
<style lang="less" scoped>
</style>
