<template>
    <div class="ht-base-checkbox-group-demo">
        <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
            <ht-base-checkbox
                    :indeterminate="indeterminate"
                    :value="checkAll"
                    @click.prevent.native="handleCheckAll">全选</ht-base-checkbox>
        </div>
        <ht-base-checkbox-group v-model="checkAllGroup" @on-change="checkAllGroupChange">
            <ht-base-checkbox label="香蕉"></ht-base-checkbox>
            <ht-base-checkbox label="苹果"></ht-base-checkbox>
            <ht-base-checkbox label="西瓜" disabled></ht-base-checkbox>
        </ht-base-checkbox-group>
        <ht-base-checkbox-group v-model="checkAllGroup" @on-change="checkAllGroupChange">
            <ht-base-checkbox label="香蕉1">
                <Icon type="logo-github"></Icon>
                <span>香蕉1</span>
            </ht-base-checkbox>
            <ht-base-checkbox label="苹果1">
                <Icon type="logo-github"></Icon>
                <span>苹果1</span>
            </ht-base-checkbox>
            <ht-base-checkbox label="西瓜1" disabled>
                <Icon type="logo-github"></Icon>
                <span>西瓜1</span>
            </ht-base-checkbox>
        </ht-base-checkbox-group>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseCheckboxGroupDemo',
        data () {
            return {
                indeterminate: true,
                checkAll: false,
                checkAllGroup: ['香蕉', '西瓜']
            }
        },
        methods: {
            handleCheckAll () {
                if (this.indeterminate) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;
                }
                this.indeterminate = false;

                if (this.checkAll) {
                    this.checkAllGroup = ['香蕉', '苹果', '西瓜','香蕉1','苹果1'];
                } else {
                    this.checkAllGroup = ['西瓜'];
                }
            },
            checkAllGroupChange (data) {
                if (data.length === 5) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 1) {
                    this.indeterminate = true;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            }
        }
    }
</script>
<style>
    .ht-base-checkbox-group-demo {

    }
</style>

