<template>
    <div class="nus_checkbtn">
        <component
            v-model="myValue"
            :is="com"
            :class="{'nu_disabled': itemData._isDisabled}"
            :value="item"
            :disabled="itemData.disabled"
            :diffKey="diffKey"
            :multiple="multiple"
            @valueChange="_change">
            <template
                slot-scope="{disabled,checked,mValue,value}">
                <slot
                    :disabled="disabled"
                    :checked="checked"
                    :mValue="mValue"
                    :value="value"
                    :itemData="itemData">
                    {{itemData.text}}
                </slot>
            </template>
            <template
                :slot="isSlot($scopedSlots.hook_lable || $slots.hook_lable) && 'hook_lable' || 'del'"
                slot-scope="{disabled,checked,mValue,value}">
                <slot name="hook_lable"
                    :disabled="disabled"
                    :checked="checked"
                    :mValue="mValue"
                    :value="value"
                    :itemData="itemData">
                </slot>
            </template>
        </component>
    </div>
</template>

<script>
import VModel from '../../../../Mixins/vModel';
import AttrSync from '../../../../Mixins/attrSync';
import NuCheckbox from '../../checkbox';
import NuRadio from '../../radio';
import { diffData, callFn } from 'nimble-lib';

export default {
    name: 'NuCheckbtn',
    props: {
        groupIndex: {
        },
        type: {
            default: 'radio'
        },
        item: {},
        filterItem: {
        },
        diffKey: {},
        multiple: {}
    },
    computed: {
        /**
         * 展示的组件
         * @return {Component}
         */
        com() {
            let res = NuCheckbox;
            switch (this.type) {
                case 'radio':
                    res = NuRadio;
                    break;
                default:
                    break;
            }
            return res;
        },

        itemData() {
            let _that = this;
            let _item = _that.item;
            let res = _that._filterItem(_item, _that.groupIndex);
            return res;
        }
    },
    mixins: [VModel({
        myValueChange() {
            return false;
        }
    }), AttrSync('activeGroupIndex')],
    methods: {
        isSlot(slots) {
            return !!(slots || {}).length || slots instanceof Function;
        },
        _change(nowVal) {
            let _that = this;
            if (nowVal && diffData(nowVal, _that.item)) {
                _that.myActiveGroupIndex = _that.groupIndex;
            }
            setTimeout(() => {
                _that._valueChange(nowVal);
            }, 0);
        },
        /**
         * 过滤标签名称
         * @param {Object} item 数据项
         * @param {Object} groupIndex 组id
         * @returns {String}
         */
        _filterItem(item, groupIndex) {
            let res = callFn(this.filterItem, [item, groupIndex]);
            if (res === undefined) {
                if (item && !item.text) {
                    res = Object.assign({
                        text: item.text || ''
                    }, item);
                } else if (!item) {
                    res = {
                        text: item === undefined ? '' : item
                    };
                } else {
                    res = item;
                }
            } else if (!(res instanceof Object)) {
                res = {
                    text: res
                };
            }
            res = res.text ? res : Object.assign({
                text: ''
            }, res || item);
            return res;
        }
    }
};
</script>

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

.nus_checkbtn{
    padding: 6px 0;
    box-sizing: border-box;
    .nus_checktmp{
        width: 100%;
        padding: 0 6px;
        color: $color666;
        box-sizing: border-box;
        .nu_check{
            min-height: 14px;
            border-radius: 3px;
            width: 100%;
            border: solid 1px $br999;
            .nu_check-icon{
                display: none;
            }
        }
        input:checked+.nu_check{
            border-color: $brRed;
            .nu_lable{
                color: $colorRed;
            }
        }
        &.nu_disabled{
            .nu_check{
                border-style: dashed;
                border-color: $brCcc;
                color:$colorCcc;
            }
        }
        .nu_lable{
            padding: 0;
            display: inline-block;
            width: 100%;
            line-height: 32px;
            text-align: center;
            font-size: $fontSize15;
            padding: 0 8px;
        }
    }
}
</style>
