<template>
    <ul class="feature-options">
        <li v-for="item in options">
            <button :class="isSelected(item)"
                    :disabled="item.disabled"
                    @click="selectOption(item)"
                    class="button feature-button">
                {{item.text}}
            </button>
        </li>
    </ul>
</template>
<style>
    .feature-options {
        display: inline-block;
    }

    .feature-button {
        min-width: 88px;
        height: 88px;
        min-height: inherit;
        margin-right: 20px;
        margin-top: 20px;
    }
</style>
<script>
    /**
     * 选项组件
     *
     * @author: Aiden Xu<aiden.xu@yoho.cn>
     * @date: 2016/07/20
     */
    module.exports = {
        props: {
            options: Array,
            name: String,
            selection: null
        },
        data() {
            return {
                value: {}
            };
        },
        watch: {
            selection() {
                this.value = this.selection;
            }
        },
        methods: {
            selectOption: function(opt) {
                this.value = opt;
                this.$parent.$emit(`feature:${this.name}.select`, opt);
            },

            isSelected(item) {
                let bool = false;

                if (this.value) {
                    bool = this.value.value === item.value;
                }

                return {
                    'button-solid': bool
                };
            }
        }
    };
</script>