<template>
	<view class="apply-box">
		<!--提示-->
		<view class="apply-tips">
			同一身份证退票当日仅再购1次，同一身份证一个月累计可购3次
		</view>
		<view class="apply-ticket general-Box">
			<view class="ticket-title">
				<view class="title-name">长江索道（往返票/成人票）</view>
				<view class="title-num">x2</view>
			</view>
			<view class="ticket-timer">游玩当日17:00之前未使用可退</view>
		</view>
		<view class="apply-user general-Box">
			<view class="user-title">
				<view class="title-name">用户选择</view>
				<u-checkbox	@change="checkedAll"	v-model="applyClickAll" >全选</u-checkbox>
			</view>
			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox 
					@change="checkboxChange" 
					v-model="item.checked" 
					v-for="(item, index) in applyUserList" :key="index" 
					:name="item.name"
				>{{item.name}}</u-checkbox>
			</u-checkbox-group>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      applyClickAll:false,//是否全选
      applyUserList:[
        {
          name:'张三',
          checked:false,
        },
        {
          name:'李四',
          checked:false,
        },
				
      ],//用户信息
    }
  },
  onLoad(option) {
		
  },
  methods: {
    // 选中某个复选框时，由checkbox时触发  可以获取当前选择值的所有信息
    checkboxChange(e) {
      // console.log(e)
      
    },
    // 选中任一checkbox时，由checkbox-group触发  已经选择了多少选项
    checkboxGroupChange(e) {
      // console.log(e)
      if(this.applyUserList.length==e.length){
        this.applyClickAll = true
      }else{
        this.applyClickAll =false
      }
    },
    // 全选
    checkedAll(e) {
      console.log(e)
      if(e.value==true){
        this.applyUserList.map(val => {
				  val.checked = true
        })
      }else{
        this.applyUserList.map(val => {
				  val.checked = false
        })
      }
      
    },
  }
}
</script>

<style scoped="scoped" lang="scss">
.apply-box{
	height: 100vh;
	background-color: #ECF3FE;
	padding: 0rpx 0rpx 122rpx 0rpx;
	overflow: auto;
}
.apply-tips{
	padding: 12rpx 32rpx 12rpx 32rpx;
	font-size: 24rpx;
	color: #FC771D;
	line-height: 42rpx;
	background: #FFF1E8;
	margin-bottom: 16rpx;
}
.general-Box{
	width: 702rpx;
	padding: 0 24rpx 0 24rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0,0,0,0.08);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	margin: 0 auto 16rpx auto;
}
.apply-ticket{
	padding: 32rpx 24rpx 32rpx 24rpx;
	.ticket-title{
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
		.title-name{
			font-size: 32rpx;
			font-weight: bold;
			color: #191919;
			line-height: 40rpx;
		}
		.title-num{
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			line-height: 40rpx;
		}
	}
	.ticket-timer{
		font-size: 28rpx;
		color: #3688FF;
		line-height: 40rpx;
	}
}
.apply-user{
	padding: 24rpx 24rpx 30rpx 24rpx;
	.user-title{
		display: flex;
		margin-bottom: 30rpx;
		.title-name{
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			line-height: 40rpx;
			margin-right: 24rpx;
		}
	}
}
</style>
