<template>
    <div :id="id">
        <ul>
            <li>
                <p>基础用法-双向绑定测试 {{checked}}</p>
                <!-- <poi-input class="disib w100" v-model="checked" placeholder="请输入内容" size="mini"></poi-input> -->
                <poi-checkbox v-model="checked">备选项</poi-checkbox>
            </li>
            <li>
                <p>禁用状态</p>
                <poi-checkbox v-model="checked1" disabled>备选项1</poi-checkbox>
                <poi-checkbox v-model="checked2" disabled>备选项</poi-checkbox>
            </li>
            <li>
                <p>多选框组</p>
                <poi-checkbox-group v-model="checkList">
                    <poi-checkbox label="复选框 A"></poi-checkbox>
                    <poi-checkbox label="复选框 B"></poi-checkbox>
                    <poi-checkbox label="复选框 C"></poi-checkbox>
                    <poi-checkbox label="禁用" disabled></poi-checkbox>
                    <poi-checkbox label="选中且禁用" disabled></poi-checkbox>
                </poi-checkbox-group>
            </li>
            <li>
                <p>indeterminate 状态</p>
                <poi-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</poi-checkbox>
                <div style="margin: 15px 0;"></div>
                <poi-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                    <poi-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</poi-checkbox>
                </poi-checkbox-group>
            </li>
            <li>
                <p>可选项目数量的限制</p>
                <poi-checkbox-group 
                    v-model="checkedCities"
                    :min="1"
                    :max="2">
                    <poi-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</poi-checkbox>
                </poi-checkbox-group>
            </li>
            <li>
                <p>按钮样式 + 尺寸</p>

                <div>
                    <poi-checkbox-group v-model="checkboxGroup1">
                    <poi-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</poi-checkbox-button>
                    </poi-checkbox-group>
                </div>
                <div style="margin-top: 20px">
                    <poi-checkbox-group v-model="checkboxGroup2" size="medium">
                    <poi-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</poi-checkbox-button>
                    </poi-checkbox-group>
                </div>
                <div style="margin-top: 20px">
                    <poi-checkbox-group v-model="checkboxGroup3" size="small">
                    <poi-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</poi-checkbox-button>
                    </poi-checkbox-group>
                </div>
                <div style="margin-top: 20px">
                    <poi-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
                    <poi-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</poi-checkbox-button>
                    </poi-checkbox-group>
                </div>
            </li>
            <li>
                <p>带有边框</p>
                <div>
                    <poi-checkbox v-model="checked1" label="备选项1" border></poi-checkbox>
                    <poi-checkbox v-model="checked2" label="备选项2" border></poi-checkbox>
                </div>
                <div style="margin-top: 20px">
                    <poi-checkbox v-model="checked3" label="备选项1" border size="medium"></poi-checkbox>
                    <poi-checkbox v-model="checked4" label="备选项2" border size="medium"></poi-checkbox>
                </div>
                <div style="margin-top: 20px">
                    <poi-checkbox-group v-model="checkboxGroup1" size="small">
                        <poi-checkbox label="备选项1" border></poi-checkbox>
                        <poi-checkbox label="备选项2" border disabled></poi-checkbox>
                    </poi-checkbox-group>
                </div>
                <div style="margin-top: 20px">
                    <poi-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
                        <poi-checkbox label="备选项1" border></poi-checkbox>
                        <poi-checkbox label="备选项2" border></poi-checkbox>
                    </poi-checkbox-group>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];

export default {
    data(){
        return{
            id:'checkboxText',
            
            checked:true,
            checked1:false,
            checked2:true,
            checked3: false,
            checked4: true,
            checkList: ['选中且禁用','复选框 A'],

            //indeterminate
            checkAll: false,
            checkedCities: ['上海', '北京'],
            cities: cityOptions,
            isIndeterminate: true,

            //按钮样式
            checkboxGroup1: ['上海'],
            checkboxGroup2: ['深圳'],
            checkboxGroup3: ['北京'],
            checkboxGroup4: ['广州'],
        }
    }, 
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }   
}
</script>
<style scoped>
#checkboxText{

}
.w100{
    width:100px;
}
</style>
