<template>
    <li
        :class="classes"
        @click.prevent.stop="handleSelect"
        @mousedown.prevent>
        <Checkbox v-model="selected" v-if="multiple">
            <slot>{{showLabel}}</slot>
        </Checkbox>
        <slot v-else>{{showLabel}}</slot>
    </li>
</template>
<script>
    import Checkbox from '../checkbox/'
    import Emitter from '../../../mixins/emitter'
    import { findComponentUpward } from '../../../utils/assist'

    const prefixCls = 'yy-select-item'
    export default {
        name: 'YYOption',
        componentName: 'select-item',
        mixins: [ Emitter ],
        components: {
            Checkbox
        },
        props: {
            value: {
                type: [String, Number],
                required: true
            },
            label: {
                type: [String, Number]
            },
            disabled: {
                type: Boolean,
                default: false
            },
            selected: {
                type: Boolean,
                default: false
            },
            multiple: {
                type: Boolean,
                default: false
            },
            showValue: {
                type: [String, Number]
            }
        },
        data () {
            return {
                checked: false,
                searchLabel: '',
                autoComplete: false
            }
        },
        computed: {
            classes () {
                return [
                    `${prefixCls}`,
                    {
                        [`${prefixCls}-disabled`]: this.disabled,
                        [`${prefixCls}-selected`]: this.selected && !this.autoComplete && !this.multiple
                    }
                ]
            },
            showLabel () {
                return (this.label) ? this.label : this.value
            },
            optionLabel(){
                return this.label || (this.$el && this.$el.textContent)
            }
        },
        methods: {
            handleSelect () {
                if (this.disabled) return false

                this.dispatch('YYSelect', 'on-select-selected', {
                    value: this.value,
                    showValue: this.showValue,
                    label: this.optionLabel,
                })
                this.$emit('on-select-selected', {
                    value: this.value,
                    showValue: this.showValue,
                    label: this.optionLabel,
                })
            }
        }
    }
</script>
