<template>
	<view>
		<!-- 單個復選框 -->
		<checkbox-group class="block" @change="checkboxChange">
			<view class="cu-form-group">
				<view class="title">復選選操作(checkbox)</view>
				<checkbox :class="isChecked?'checked':''" :checked="isChecked?true:false" value="1"></checkbox>
			</view>
		</checkbox-group>
		
		<!-- 多個復選框，帶全選 -->
		<view>
			<checkbox-group class="block" @change="changeCheckbox">
				<view v-for="item in checkboxData" :key="item.value">				
					<checkbox :value="String(item.value)" :checked="checkedArr.includes(String(item.value))" :class="{'checked':checkedArr.includes(String(item.value))}"></checkbox>
					<text>{{item.label}}</text>
				</view>
			</checkbox-group>
		</view>
		<view>
			<checkbox-group @change="allChoose">
				<label>
					<checkbox value="all" :class="{'checked':allChecked}" :checked="allChecked?true:false"></checkbox> 全選
				</label>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isChecked:false,
				checkboxData:[
					{'value':0,'label':'選項一'},
					{'value':1,'label':'選項二'},
					{'value':2,'label':'選項三'},
					{'value':3,'label':'選項四'},
					{'value':4,'label':'選項五'},
					{'value':5,'label':'選項六'},
					{'value':6,'label':'選項七'},
					{'value':7,'label':'選項八'},
					{'value':8,'label':'選項九'},
					{'value':9,'label':'選項十'}
				],
				checkedArr:[], //復選框選中的值
				allChecked:false //是否全選
			}
		},
		methods: {
			// 單個復選框事件
			checkboxChange(e) {
				let values = e.detail.value;
				if(values[0]==1){
					this.isChecked=true;
				}else{
					this.isChecked=false;
				}
			},
			// 多選復選框改變事件
			changeCheckbox(e){
				this.checkedArr = e.detail.value;
				// 如果選擇的數組中有值，并且長度等于列表的長度，就是全選
				if(this.checkedArr.length>0 && this.checkedArr.length==this.checkboxData.length){
					this.allChecked=true;
				}else{
					this.allChecked=false;
				}
			},
			// 全選事件
			allChoose(e){
				let chooseItem = e.detail.value;
				// 全選
				if(chooseItem[0]=='all'){
					this.allChecked=true;
					for(let item of this.checkboxData){
						let itemVal=String(item.value);
						if(!this.checkedArr.includes(itemVal)){
							this.checkedArr.push(itemVal);
						}
					}					
				}else{
					// 取消全選
					this.allChecked=false;
					this.checkedArr=[];
				}
			}
		}
	}
</script>

<style>
</style>