<template>
    <div @click.stop="clickGroupbox()" :class="[getClass(),(value === label) ? 'active' : '']">
        <i v-html="groupName"></i>

        <slot></slot>

    </div>
</template>

<script>
    export default{
        name: 'v-f9-groupbox',

        data(){
            return {}
        },

        props: {

            groupName: [String],

            // v-model 的值
            value: [String],

            label: [String],

            // 是否禁止点击选择
            disabled:[Boolean]
        },

        methods: {
            getClass(){
                return this.disabled ? 'v-f9-date-picker-container-group-last' :'v-f9-date-picker-container-group';
            },

            clickGroupbox(){
                if (this.label === this.value) {
                    return false;
                }

                this.$emit('input', this.label);

            }
        }
    }
</script>