<template>
    <div
        :class="bem({'is-active': value === select.currentValue})"
    >

        <div :class="bem('content')" @click="selectOption(value)">
            <slot>{{label}}</slot>
        </div>

    </div>
</template>
<script>
import { createComponentName, componentMixin } from '../_utils/component.js';

export default {
    name: createComponentName('select-option'),
    mixins: [componentMixin],
    inject: ['select'],
    props: {
        value: {
            require: true,
            type: [String, Number, Array],
        },
        label: {
            type: String,
            require: true,
        },
    },
    mounted() {
        if (this.value === this.select.currentValue) {
            this.selectOption(this.value, this.label);
        }
    },
    methods: {
        selectOption(value) {
            this.$emit('click', value);
            this.select.setOption(value, this.label);
        },
    },
};
</script>

<style lang="less">
@import '../_styles/base.less';

.@{select-option} {

    color: @color-font;
    width: 100%;
    cursor: pointer;
    font-size: @font-size-base;

    &:hover {
        background-color: #F0F3F4;
        color: #000;
        text-decoration: none;
    }

    &--is-active {
        color: @color-primary;
        font-weight: bold;
    }

    &__content {
        line-height: 36px;
        padding: 0 12px;
        overflow: hidden;
        text-decoration: none;
        white-space: nowrap;
        word-wrap: normal;
        text-overflow: ellipsis;
        color: inherit;
        display: block;

        a {
            color: inherit;
            display: block;
        }
    }
}
</style>
