<template>
    <ul class="nus_checkbtns"
        v-if="list && list.length > 0">
        <li class="nu_btn-item"
            v-for="(item, key) in list"
            :key="key + '_key_'+ genKey(item)">
            <nu-checkbtn
                v-model="myValue"
                :groupIndex="groupIndex"
                :item="item"
                :type="type"
                :filterItem="filterItem"
                :diffKey="diffKey"
                :multiple="multiple"
                :activeGroupIndex.sync="myActiveGroupIndex">
                <template
                    v-if="isSlot($scopedSlots.default || $slots.default)"
                    slot-scope="{itemData, disabled,checked,mValue,value}">
                    <slot
                        :disabled="disabled"
                        :checked="checked"
                        :mValue="mValue"
                        :value="value"
                        :itemData="itemData"
                        :data="item"
                        :groupIndex="groupIndex"
                        :index="key"></slot>
                </template>
                <template :slot="isSlot($scopedSlots.hook_lable || $slots.hook_lable) && 'hook_lable' || 'xxx'"
                    slot-scope="{itemData, disabled,checked,mValue,value}">
                    <slot name="hook_lable"
                        :disabled="disabled"
                        :checked="checked"
                        :mValue="mValue"
                        :value="value"
                        :itemData="itemData"
                        :data="item"
                        :groupIndex="groupIndex"
                        :index="key"></slot>
                </template>
            </nu-checkbtn>
        </li>
    </ul>
</template>

<script>
import NuCheckbtn from './checkbtn/Checkbtn';
import VModel from '../../../Mixins/vModel';
import AttrSync from '../../../Mixins/attrSync';

export default {
    name: 'NuCheckbtns',
    props: {
        groupIndex: {
        },
        list: { // 数据列表
            type: Array
        },
        type: {
            default: 'radio'
        },
        filterItem: {
        },
        diffKey: {},
        multiple: {}
    },
    components: {
        NuCheckbtn
    },
    mixins: [VModel(), AttrSync('activeGroupIndex')],
    created() {
        this.keyId = 0;
    },
    methods: {
        genKey(item) {
            if (!item.___key) {
                this.keyId++;
                item.___key = this.keyId;
            }
            return item.___key;
        },
        isSlot(slots) {
            return !!(slots || {}).length || slots instanceof Function;
        }
    }
};
</script>

<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_checkbtns{
    @include after();
    .nu_btn-item {
        float: left;
    }
}
</style>
