<template>
    <li :class="classes" @click.stop="select" @mousedown.prevent>
        <div
            v-if="overflow"
            class=""
            style="overflow: hidden; text-overflow: ellipsis; word-break: keep-all; white-space: nowrap"
            :style="{
                width: parentWidth + 'px'
            }"
        >
            <slot>{{ showLabel }}</slot>
        </div>

        <slot v-else>{{ showLabel }}</slot>
    </li>
</template>
<script>
import Emitter from '../../mixins/emitter';
import mixinsForm from '../../mixins/form';
import { findComponentUpward, getStyle } from '../../utils/assist';

const prefixCls = 'ivu-select-item';

export default {
    name: 'iOption',
    componentName: 'select-item',
    mixins: [Emitter, mixinsForm],
    props: {
        value: {
            type: [String, Number],
            required: true
        },
        label: {
            type: [String, Number]
        },
        disabled: {
            type: Boolean,
            default: false
        },
        selected: {
            type: Boolean,
            default: false
        },
        isFocused: {
            type: Boolean,
            default: false
        },
        // 4.0.0
        tag: {
            type: [String, Number]
        },
        overflow: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            searchLabel: '', // the slot value (textContent)
            autoComplete: false,
            parentWidth: 'auto'
        };
    },
    computed: {
        classes() {
            return [
                `${prefixCls}`,
                {
                    [`${prefixCls}-disabled`]: this.itemDisabled,
                    [`${prefixCls}-selected`]: this.selected && !this.autoComplete,
                    [`${prefixCls}-focus`]: this.isFocused
                }
            ];
        },
        showLabel() {
            return this.label ? this.label : this.value;
        },
        optionLabel() {
            return this.label || (this.$el && this.$el.textContent);
        }
    },
    methods: {
        select() {
            if (this.itemDisabled) return false;
            this.dispatch('iSelect', 'on-select-selected', {
                value: this.value,
                label: this.optionLabel,
                tag: this.tag
            });
            this.$emit('on-select-selected', {
                value: this.value,
                label: this.optionLabel,
                tag: this.tag
            });
        }
    },
    mounted() {
        const Select = findComponentUpward(this, 'iSelect');
        if (Select) this.autoComplete = Select.autoComplete;
        if (Select && this.overflow) {
            const el = Select.$el;
            const parentWidth = el.clientWidth;
            this.parentWidth = parentWidth - 32;
            // 多选的时候宽度再小点
            const propsData = Select.$options.propsData;
            const keys = Object.keys(propsData);
            const hasMultiple = keys.includes('multiple');
            if (hasMultiple && hasMultiple !== false) {
                this.parentWidth -= 16;
            }
        }
    }
};
</script>
