<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 class="apply-moneyBox general-Box">
			<view class="moneyBox-list">
				<view class="list-name">订单实付</view>
				<view class="list-money">￥60</view>
			</view>
			<view class="moneyBox-list">
				<view class="list-name">退款金额</view>
				<view class="list-money list-clolrOrange">￥60</view>
			</view>
		</view>
		<view class="apply-cause general-Box">
			<view class="cause-title">
				退改原因（必填）
			</view>
			<view class="cause-list">
				<view class="list-case" v-for="(item,index) in causeList" :key="index">
					<view class="case-name">{{item.name}}</view>
					<view class="case-click" :class="causeNum==item.labelNum?'case-clickAct':''" @click="clickNewFun(item.labelNum)"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      applyClickAll:false,//是否全选
      applyUserList:[
        {
          name:'张三',
          checked:false,
        },
        {
          name:'李四',
          checked:false,
        },
      ],//用户信息
      causeList:[
        {
          name:'更改出行日期',
          labelNum:0
        },
        {
          name:'计划有变',
          labelNum:1
        },
        {
          name:'信息填错',
          labelNum:2
        },
        {
          name:'景区临时关闭',
          labelNum:3
        },
        {
          name:'其他原因',
          labelNum:4
        },
      ],//退订原因
      causeNum:null,
    }
  },
  onLoad(option) {
		
  },
  methods: {
    //当前选择的原因
    clickNewFun(labelNum){
      this.causeNum = labelNum
    },
    // 选中某个复选框时，由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;
		}
		
	}
	/deep/ .u-checkbox__label{
		width: 160rpx;
	}
}
.apply-moneyBox{
	padding: 0 24rpx 0 24rpx;
	.moneyBox-list{
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #ECECEC;
	}
	.moneyBox-list:nth-last-child(1){
		border-bottom: none;
	}
	.list-name,
	.list-money{
		font-size: 32rpx;
		color: #191919;
		line-height: 108rpx;
	}
	.list-clolrOrange{
		color: #FC6703;
	}
}
.apply-cause{
	padding: 0;
	.cause-title{
		padding: 24rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #191919;
		line-height: 44rpx;
		box-shadow: 0rpx 2rpx 0rpx 2rpx rgba(0,0,0,0.08);
	}
	.cause-list{
		padding: 40rpx 24rpx 40rpx 24rpx;
		.list-case{
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;
			.case-name{
				font-size: 32rpx;
				color: #191919;
				line-height: 48rpx;
			}
			.case-click{
				width: 48rpx;
				height: 48rpx;
				box-sizing: border-box;
				border: 2rpx solid #3688FF;
				border-radius: 50%;
			}
		}
		.list-case:nth-last-child(1){
			margin-bottom: 0;
		}
	}
}
</style>
