
<template>
    <li v-if="!isInGroup">
        <a href="javascript:;" class="select-opt J-opt" :class="optionStyle"
           @click.stop.prevent="selectOptionClick">
            {{ $slots.default ? "" : currentLabel}}
            <slot></slot>
        </a>
    </li>
    <dd class="select-opt-val" v-else>
        <a href="javascript:;" class="select-opt J-opt" :class="optionStyle"
           @click.stop.prevent="selectOptionClick">
            {{ $slots.default ? "" : currentLabel}}
            <slot></slot>
        </a>
    </dd>
</template>

<script>
    import Emitter from 'focus-view/src/mixins/emitter';
    import { getValueByPath } from 'focus-view/src/utils/util';

    export default {
        name: "focusOption",
        componentName: "focusOption",
        inject: ["select"],
        mixins: [Emitter],
        props: {
            value: {
                required: true
            },
            label: [String, Number],
            disabled: {
                type: Boolean,
                default: false
            },
            flag: String
        },

        data() {
            const isInGroup = this.$parent.$options.componentName === "focusOptionGroup";

            return {
                index: -1,
                groupDisabled: false,
                visible: true,
                hitState: false,
                hover: false,
                isInGroup
            };
        },

        computed: {
            isObject() {
                return Object.prototype.toString.call(this.value).toLowerCase() === '[object object]';
            },

            currentLabel() {
                return this.label || (this.isObject ? '' : this.value);
            },

            currentValue() {
                return this.value || this.label || '';
            },

            itemSelected() {
                return this.isEqual(this.value, this.select.value);
            },

            optionStyle(){
                return [
                    this.flag ? 'select-flag' : "",
                    this.flag ? 'select-flag-' + this.flag : "",
                    this.itemSelected ? 'selected' : "",
                    this.disabled || this.groupDisabled ? 'disabled': ""
                ];
            }
        },

        watch: {
            currentLabel() {
                this.dispatch('focusSelect', 'setSelected');
            },
            value() {
                this.dispatch('focusSelect', 'setSelected');
            }
        },


        methods: {
            isEqual(a, b) {
                if (!this.isObject) {
                    return a === b;
                } else {
                    const valueKey = this.select.valueKey;
                    return getValueByPath(a, valueKey) === getValueByPath(b, valueKey);
                }
            },

            selectOptionClick() {
                if (this.disabled !== true && this.groupDisabled !== true) {
                    this.dispatch('focusSelect', 'handleOptionClick', this);
                }
            },

            handleGroupDisabled(val) {
                this.groupDisabled = val;
            },
        },

        created() {
            this.select.options.push(this);
            this.select.cachedOptions.push(this);
            this.select.optionsCount++;

            this.$on('handleGroupDisabled', this.handleGroupDisabled);
        },

        beforeDestroy() {
            this.select.onOptionDestroy(this.select.options.indexOf(this));
        }

    }
</script>