<template>
	<view class="kp-details">
		<!-- 考评项 -->
		<view class="kp-tabsBox">
			<view class="kp-tabs">
				<view class="active">
					<view>正常营业</view>
					<view>(4项)</view>
				</view>
				<view>
					<view>正常营业</view>
					<view>(4项)</view>
				</view>
				<view>
					<view>正常营业</view>
					<view>(4项)</view>
				</view>
			</view>
			<view class="kp-items">
				<!-- <view>
					<u-checkbox-group @change="checkboxGroupChange" >
						<u-checkbox 
							@change="checkboxChange" 
							shape="square"
							v-model="item.checked" 
							v-for="(item, index) in list" :key="index" 
							:name="item.name"
						/>
					</u-checkbox-group>
				</view> -->
				<view>
					<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>
		</view>
		<!-- 选择按钮 -->
		<view class="kp-ok">
			提交
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				type:'info',
				size:'mini',
				val:'选择',
				checked:true,
				// list: [
				// 	{
				// 		name: 'apple',
				// 		checked: false,
				// 		disabled: false
				// 	},
				// 	{
				// 		name: 'banner',
				// 		checked: false,
				// 		disabled: false
				// 	},
				// 	{
				// 		name: 'orange',
				// 		checked: false,
				// 		disabled: false
				// 	}
				// ]
				items: [{
						value: 'USA',
						name: '美国'
					},
					{
						value: 'CHN',
						name: '中国',
						checked: 'true'
					},
					{
						value: 'BRA',
						name: '巴西'
					},
					{
						value: 'JPN',
						name: '日本'
					},
					{
						value: 'ENG',
						name: '英国'
					},
					{
						value: 'FRA',
						name: '法国'
					}
				]
			}
		},
		methods:{
			// radioChange(e){
			// 	console.log(e)
			// 	this.radioVal=false
			// }
			checkboxChange: function (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)
					}
				}
			}
			// checkboxChange(e) {
			// 	//console.log(e);
			// },
			// // 选中任一checkbox时，由checkbox-group触发
			// checkboxGroupChange(e) {
			// 	// console.log(e);
			// },
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background: #F8F8F8;
	}
	.kp-details{
		height: 100%;
		display: flex;
		flex-direction: column;
		.kp-tabsBox{
			flex-grow: 1;
			overflow: auto;
			display: flex;
			.kp-tabs{
				width: 30%;
				text-align: center;
				margin: 15upx;
				> view{
					padding: 15upx;
					background: #fff;
					border-radius: 6upx;
					box-shadow: 1px 2px 3px #eee;
					margin-bottom: 15upx;
					> view{
						&:last-child{
							color: #666;
						}
					}
				}
				> view.active{
					background: #00aaff;
					color: #fff;
					> view{
						&:last-child{
							color: #fff;
						}
					}
				}
			}
			.kp-items{
				width: 70%;
				margin: 15upx 15upx 15upx 6upx;
				> view{
					.checkbox-group{
						.checkbox-item{
							width:100%;
							padding: 15upx;
							border-radius: 6upx;
							box-shadow: 1px 2px 3px #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>
