<template>
	<!-- <uni-check-list :listData="list" types="checkbox" @ok="chooseOk" :showArrow="false">
	</uni-check-list> -->
	<view class="store-all">	
		<view class="uni-list">
			<checkbox-group @change="checkboxChange" class="checkbox-group">
				<label  v-for="item in items" :key="item.value" >
					<view  class="checkbox-item">
						<view class="item-name">{{item.name}}</view>
						<view>
							<checkbox :value="item.value" :checked="item.checked" />
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<!-- 提交 -->
		<view class="kp-ok" @click="submit">
			提交
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						value: 'USA',
						name: '美国'
					},
					{
						value: 'CHN',
						name: '中国',
						checked: 'true'
					},
					{
						value: 'BRA',
						name: '巴西'
					},
					{
						value: 'JPN',
						name: '日本'
					},
					{
						value: 'ENG',
						name: '英国'
					},
					{
						value: 'FRA',
						name: '法国'
					}
				]
			}
		},
		methods: {
			// 改变checkbox的选中状态
			checkboxChange(e) {
				var items = this.items,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.value)){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
					console.log(item,'--------------')
				}
				
			},
			submit(){
				console.log('-------tijiao')
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.store-all{
		height: 100%;
		display: flex;
		flex-direction: column;
		.uni-list{
			width: 100%;
			flex-grow: 1;
			overflow: auto;
			.checkbox-item{
				width:100%;
				padding: 15upx 30upx;
				border-bottom: 1px solid #eee;
				background: #fff;
				display: flex;
				justify-content: space-between;
				margin-bottom: 15upx;
			}
		}
		
		.kp-ok{
			text-align: center;
			padding: 26upx;
			background: #55aaff;
			color: #fff;
			font-size: 18px;
		}
	}
	
</style>
