<template>
	<view class="u-page">
		<view class="u-demo-block">
			<text class="u-demo-block__title">基本案例</text>
			<text class="u-block__title">苹果、香蕉和橙子哪个最甜？</text>
			<view class="u-demo-block__content">
				<view class="u-page__checkbox-item">
					<up-checkbox-group
						v-model="checkboxValue1"
						placement="column"
						@change="checkboxChange"
					>
						<up-checkbox
							:customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in checkboxList1"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</up-checkbox>
					</up-checkbox-group>
				</view>
			</view>
		</view>
		<view class="u-demo-block">
			<text class="u-demo-block__title">单独使用checkbox</text>
			<text class="u-block__title">是否同意用户协议？</text>
			<view class="u-demo-block__content">
				<view class="u-page__checkbox-item">
					<up-checkbox
						:customStyle="{marginBottom: '8px'}"
						label="同意用户协议与隐私条款"
						name="agree"
						usedAlone
						v-model:checked="aloneChecked"
					>
					</up-checkbox>
					<up-button type="primary" size="small" style="width: 120px;"
						@click="changeAloneChecked" text="切换">{{aloneChecked}}</up-button>
				</view>
			</view>
		</view>
		<view class="u-demo-block">
			<text class="u-demo-block__title">自定义形状</text>
			<text class="u-block__title">中国四大名著是？</text>
			<view class="u-demo-block__content">
				<view class="u-page__checkbox-item">
					<up-checkbox-group
						v-model="checkboxValue2"
						placement="column"
						@change="checkboxChange"
						shape="square"
					>
						<up-checkbox
							:customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in checkboxList2"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</up-checkbox>
					</up-checkbox-group>
				</view>
			</view>
		</view>
		<view class="u-demo-block">
			<text class="u-demo-block__title">是否禁用</text>
			<text class="u-block__title">下面什么东西不能吃？</text>
			<view class="u-demo-block__content">
				<view class="u-page__checkbox-item">
					<up-checkbox-group
						v-model="checkboxValue3"
						placement="column"
						@change="checkboxChange"
					>
						<up-checkbox
							:customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in checkboxList3"
							:key="index"
							:label="item.name"
							:name="item.name"
							:disabled="index===0"
						>
						</up-checkbox>
					</up-checkbox-group>
				</view>
			</view>
		</view>
		<view class="u-demo-block">
			<text class="u-demo-block__title">是否禁止点击提示语选中复选框</text>
			<text class="u-block__title">北宋四大家是谁？</text>
			<view class="u-demo-block__content">
				<view class="u-page__checkbox-item">
					<up-checkbox-group
						v-model="checkboxValue4"
						placement="column"
						@change="checkboxChange"
						:labelDisabled="true"
					>
						<up-checkbox
							:customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in checkboxList4"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</up-checkbox>
					</up-checkbox-group>
				</view>
			</view>
		</view>
		<view class="u-demo-block">
			<text class="u-demo-block__title">自定义颜色</text>
			<text class="u-block__title">哪个颜色最好看？</text>
			<view class="u-demo-block__content">
				<view class="u-page__checkbox-item">
					<up-checkbox-group
						v-model="checkboxValue5"
						placement="column"
						@change="checkboxChange"
						activeColor="#19be6b"
					>
						<up-checkbox
							:customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in checkboxList5"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</up-checkbox>
					</up-checkbox-group>
				</view>
			</view>
		</view>
		<view class="u-demo-block">
			<text class="u-demo-block__title">横向排列形式</text>
			<text class="u-block__title">什么东西不能飞？</text>
			<view class="u-demo-block__content">
				<view class="u-page__checkbox-item">
					<up-checkbox-group
						v-model="checkboxValue6"
						@change="checkboxChange"
					>
						<up-checkbox
							:customStyle="{marginRight: '16px'}"
							v-for="(item, index) in checkboxList6"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</up-checkbox>
					</up-checkbox-group>
				</view>
			</view>
		</view>
		<view class="u-demo-block">
			<text class="u-demo-block__title">横向两端排列形式</text>
			<text class="u-block__title">什么东西不能吃？</text>
			<view>
				<view class="u-page__checkbox-item">
					<up-checkbox-group
						v-model="checkboxValue7"
						@change="checkboxChange"
						:borderBottom="true"
						placement="column"
						iconPlacement="right"
					>
						<up-checkbox
							:customStyle="{marginBottom: '16px'}"
							v-for="(item, index) in checkboxList7"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</up-checkbox>
					</up-checkbox-group>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';
// 基本案列数据
const checkboxList1 = ref([{
		name: '苹果',
		disabled: false
	},
	{
		name: '香蕉',
		disabled: false
	},
	{
		name: '橙子',
		disabled: false
	}
]);

const aloneChecked = ref(false);
// up-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
const checkboxValue1 = ref(['苹果', '橙子']);

// 自定义形状数据
const checkboxList2 = ref([{
		name: '西游记',
		disabled: false
	},
	{
		name: '红楼梦',
		disabled: false
	},
	{
		name: '三国演义',
		disabled: false
	},
	{
		name: '水浒传',
		disabled: false
	}
]);
// up-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
const checkboxValue2 = ref(['西游记', '红楼梦', '三国演义', '水浒传']);

// 是否禁用数据
const checkboxList3 = ref([{
		name: '冬瓜',
		disabled: false
	},
	{
		name: '西瓜',
		disabled: false
	},
	{
		name: '黄瓜',
		disabled: false
	},
	{
		name: '傻瓜',
		disabled: false
	}
]);
// up-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
const checkboxValue3 = ref(['傻瓜']);

// 是否禁止点击提示语选中复选框数据
const checkboxList4 = ref([{
		name: '黄庭坚',
		disabled: false
	},
	{
		name: '欧阳修',
		disabled: false
	},
	{
		name: '苏小宝',
		disabled: false
	},
	{
		name: '王安石',
		disabled: false
	}
]);
// up-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
const checkboxValue4 = ref(['黄庭坚', '欧阳修', '王安石']);

//自定义颜色数据
const checkboxList5 = ref([{
		name: '红色',
		disabled: false
	},
	{
		name: '黄色',
		disabled: false
	},
	{
		name: '绿色',
		disabled: false
	},
	{
		name: '蓝色',
		disabled: false
	}
]);
// up-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
const checkboxValue5 = ref(['绿色']);

//横向排列形式数据
const checkboxList6 = ref([{
		name: '小鸟',
		disabled: false
	},
	{
		name: '游艇',
		disabled: false
	},
	{
		name: '轮船',
		disabled: false
	},
	{
		name: '飞机',
		disabled: false
	}
]);
// up-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
const checkboxValue6 = ref(['游艇', '轮船']);

//横向两端排列形式
const checkboxList7 = ref([{
		name: '汽车',
		disabled: false
	},
	{
		name: '蒸汽机',
		disabled: false
	},
	{
		name: '猪肉',
		disabled: false
	},
	{
		name: '抄手',
		disabled: false
	}
]);
// up-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
const checkboxValue7 = ref(['汽车', '蒸汽机']);

const checkboxChange = (n) => {
	// console.log('change', n);
};

const changeAloneChecked = () => {
	aloneChecked.value = !aloneChecked.value;
};

// checkboxValue1监听器
watch(checkboxValue1, (newValue, oldValue) => {
	// console.log('v-model', newValue);
});
</script>

<style lang="scss">
	.u-page {}
</style>