<template>
    <div :class="nxSelectClass">
        <Select
            :disabled="noEdit"
            :placeholder="placeholder"
            :style="style"
            @on-change="onValueChange"
            clearable
            filterable
            v-model="currVal"
        >
            <Option :key="opt.guid" :value="opt.guid" v-for="opt in opts">{{opt.text}}</Option>
        </Select>
        <span class="error">{{fieldError}}</span>
    </div>
</template>
<script>
import Item from '../mixins/item'
import Data from '../../../../data/web-form'

export default {
    name: 'FSelect',
    data() {
        return {
            currVal: undefined,
            options: [],
            filterValue: '',
            isFilterBy: false
        }
    },
    mixins: [Item],
    props: {
        listenProp: { type: String, default: '' },
        // 'itemValueChange': { type: Function },
        dsType: { type: String },
        dsValue: { type: [String, Array] },
        noEdit: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        style() {
            return {}
        },

        nxSelectClass() {
            return {
                'ivu-form-item-error': this.fieldError
            }
        },

        opts() {
            if (this.isFilterBy) {
                if (this.filterValue) {
                    if (Array.isArray(this.filterValue)) {
                        // 多选情况下
                        return this.options.filter(item => {
                            return this.filterValue.includes(item.parent)
                        })
                    } else {
                        return this.options.filter(item => {
                            return item.parent === this.filterValue
                        })
                    }
                } else {
                    return []
                }
            } else {
                return this.options
            }
        }
    },
    methods: {
        /*表单数据改变*/
        formValueChange(value) {
            if (value) {
                this.currVal = value[this.prop]
                this.onValueChange()
            }
        },
        /*获取数据*/
        getValue() {
            return this.currVal
        },
        /*其它项目数据改变*/
        itemValueChange(prop, value, formData) {
            if (prop === this.listenProp) {
                this.filterValue = value
                this.currVal = null
            }
        },
        /*数据改变，其它组件可以得到通知, 注意不要循环引用*/
        onValueChange() {
            this.form.$emit('_.form.itemChange', {
                prop: this.prop,
                value: this.currVal
            })

            if (this.currVal) {
                this.form.formError[this.prop] = null
            }
        },

        setupOptions() {
            if (/^\[/.test(this.dsValue)) {
                //数组配置 [{guid,text},...]
                let opts = JSON.parse(this.dsValue)
                this.options = opts

                // 如果有设置默认值
                if (this.config.defaultValue) {
                    this.currVal = this.config.defaultValue
                    this.onValueChange()
                }
            } else {
                Data.queryConfigSelectData(this.dsValue).then(res => {
                    this.options = res
                })
            }
        }
    },
    created() {
        this.isFilterBy = !!this.listenProp
        this.setupOptions()
    }
}
</script>
<style scoped>
</style>