<template>
    <Select 
        ref="select"
        v-model="values"
        labelInValue
        multiple
        :sortable="sortable"
        :clearable="clearable"
        :dropable="dropable"
        :filterable="filterable"
        :placeholder="placeholder"
        :transfer="false"
        :filterMethod="handleSearch">
        <YYOption v-for="item in options" 
            :key="item.value"
            :value="item.value">
            {{item.label}}
        </YYOption>
        <Icon  slot="suffix" type="list" @click.native.stop="handleOpenSelectMember"/>
    </Select>
</template>
<script>
    import Select from '../../base/select/'
    import Icon from '../../base/icon/'
    import Emitter from '../../../mixins/emitter'
    import { t } from '../../../locale/'

    export default {
        name: 'SelectMemberInput',
        mixins: [Emitter],
        props: {
            value: {
                type: Array,
                default: () => {
                    return []
                }
            },
            placeholder: {
                type: String,
                default: t('select')
            },
            dropable: {
                type: Boolean,
                default: false
            },
            filterable: {
                type: Boolean,
                default: false,
            },
            sortable: {
                type: Boolean,
                default: true,
            },
            clearable: {
                type: Boolean,
                default: true,
            },
            options: { // options
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        components: {
            Select,
            Icon
        },
        data() {
            return {
                values: []
            }
        },
        watch: {
            value: {
                immediate: true,
                handler: function (now, before) {
                    this.values = now
                }
            },
            values: {
                deep: true,
                handler: function (now) {
                    const newValue = JSON.stringify(now)
                    const oldValue = JSON.stringify(this.value)
                    const shouldEmitInput = newValue !== oldValue
                    if (shouldEmitInput) {
                        this.$emit('input', now) 
                        this.$emit('on-change', now)
                        this.dispatch('YYFormItem', 'on-form-change', now)
                    }
                }
            }
        },
        methods: {
            handleSearch(keyword) { // 搜索方法
                this.$emit('on-search', keyword, () => {
                    this.$refs.select.updateSlotOptions()
                })
            },
            handleOpenSelectMember() { // 打开选人组件
                this.$emit('on-open-select-member')
            }
        }
    }
</script>