<template>
	<view class="content" v-if="data">
		<checkbox-group class="select-card" @change="changeState">
			<view  v-for="(item,index) in data" :key="index">
				<template v-if="item.node">
					<view style="font-weight: 600;">{{item.node.label}}</view>
					<view class="select-row" v-for="child in item.node.children" :key="item.node.value">
						<view>
							{{child.label}}
						</view>
						<checkbox :value="item.node.value + '-'+ child.value" :checked="child.checked" color="#2E6CF6"/>
					</view>
				</template>
				<view class="select-row" v-else>
					<view>
						{{item.label}}
					</view>
					<checkbox :value="item.value" :checked="item.checked" color="#2E6CF6"/>
				</view>
			</view>
		</checkbox-group>
		<!-- <view class="confirm-btn" @click="changeValues">确认</view> -->
	</view>
</template>

<script>
	export default {
		props:['data'],
		data() {
			return {
				selectShops: []
			}
		},
		methods: {
			changeState(value) {
				this.$emit('changeValues',value.detail.value)
				// this.selectShops =value.detail.value
			},
			// changeValues(){
			// 	this.$emit('changeValues',this.selectShops)
			// }
		}
	}
</script>

<style lang="stylus">
	.content {
		// background-color: #F4F4F7;
		padding 0 24rpx
		position relative
		// height calc(100vh- var(--status-bar-height) - 88px )
	}
	.content checkbox-group{
		box-sizing border-box !important
		width auto !important
	}
	.select-card {
		background-color #FFFFFF
		border-radius: 12rpx;
		padding 24rpx 24rpx
		max-height 900rpx
		overflow auto
		.select-row {
			display flex;
			align-items center
			border-bottom 1px solid #F0F0F0
			line-height 2
			padding 24rpx 0
			justify-content space-between
		}
		.select-row:last-child {
			border none
		}
	}
	.confirm-btn {
		margin: 40rpx auto;
		width: 510rpx;
		height: 96rpx;
		background: #618ade;
		border-radius: 48rpx;
		line-height 96rpx
		color #FFFFFF
		text-align center
	}

</style>
