<template>
	<view class="apply-box">
		<!--提示-->
		<view class="apply-tips" v-if="merchantId=='z0015605022691a5945bbe463141668c'">
			同一身份证退票当日仅再购1次，同一身份证一个月累计可购3次
		</view>
		<view class="apply-ticket general-Box" :class="merchantId!='z0015605022691a5945bbe463141668c'?'apply-ticketAct':''">
			<view class="ticket-title">
				<view class="title-name">{{orderInfo.merchantName}}（{{orderInfo.productName}}）</view>
				<view class="title-num">x{{orderInfo.orderNum}}</view>
			</view>
			<view class="ticket-timer">游玩当日{{orderRefundRuleTimer}}之前未使用可退</view>
		</view>
		<view class="apply-user general-Box">
			<view class="user-title">
				<view class="title-name">用户选择</view>
				<checkbox-group @change="checkedAll">
					<label>
						<checkbox value="val" :checked="applyClickAll" style="transform:scale(0.7);" class="list-uCheck" :class="applyClickAll==true?'list-uCheckAct':''" />全选
					</label>
				</checkbox-group>
			</view>
			<checkbox-group @change="checkboxGroupChange" v-if="applyUserListType">
				<label style="margin-right: 15rpx;margin-bottom: 15rpx;" v-for="(item,index) in applyUserList" :key="index">
					<checkbox :value="item.id" :checked="item.checkType" style="transform:scale(0.7);" class="list-uCheck" :class="item.checkType==true?'list-uCheckAct':''" />{{item.name}}
				</label>
			</checkbox-group>
		</view>
		<view class="apply-moneyBox general-Box">
			<view class="moneyBox-list">
				<view class="list-name">订单实付</view>
				<view class="list-money">￥{{orderInfo.pdOrderMoney}}</view>
			</view>
			<view class="moneyBox-list">
				<view class="list-name">退款金额</view>
				<view class="list-money list-clolrOrange">￥{{orderInfo.unitPrice*refundNum}}</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" @click="clickNewFun(item.labelNum)">
					<view class="case-name">{{item.name}}</view>
					<view class="case-click" :class="causeNum==item.labelNum?'case-clickAct':''"></view>
				</view>
			</view>
		</view>
		<view class="apply-textarea general-Box" v-if="causeNum==5">
			<u-input v-model="causeInput" type="textarea" placeholder="补充详细退改原因以便商家更快帮您处理" maxlength="200"  />
		</view>
		<view class="apply-toButton" v-if="isRefund"  @click="confirm()">
			退款提交
		</view>
		<view class="apply-toButton" v-else>
			退款时间为08:00:00-{{orderRefundRuleTimer}}
		</view>
		<view class="apply-mask" v-if="orderRefundRuleTimerType==true">
			<view class="mask-box">
				<view class="box-text">请在{{orderRefundRuleTimer}}前退票</view>
				<view class="box-btn" @click="orderRefundRuleTimerBack()">返回</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      merchantId:'',//景区ID
      applyClickAll:false,//是否全选
      applyUserList:[
        // {
        //   name:'张三',
        //   checked:false,
        // },
        // {
        //   name:'李四',
        //   checked:false,
        // },
      ],//用户信息
      applyUserListType:true,
      refundNum:0,//选择多少人
      causeList:[
        {
          name:'更改出行日期',
          labelNum:1
        },
        {
          name:'计划有变',
          labelNum:2
        },
        {
          name:'信息填错',
          labelNum:3
        },
        {
          name:'景区临时关闭',
          labelNum:4
        },
        {
          name:'其他原因',
          labelNum:5
        },
      ],//退订原因
      causeNum:null,
      reason:'',//退单原因
      causeInput:'',//其他原因
      id:'',//订单ID
      openId:'',//用户ID
      orderInfo:{},//订单信息
      isRefund:false,//是否可以退单
      orderRefundRuleTimer:'',//退款时间
      orderRefundRuleTimerType:false,
    }
  },
  onLoad(option) {
    this.id = option.orderId||''
    this.openId = uni.getStorageSync('openid') //openid oroHZ5FaUQ_SOOC_uQQP92fJpBRE oh2UV1lyYABHMZ1rMlgjhVHyyYDQ
    //this.openId = 'oh2UV1lyYABHMZ1rMlgjhVHyyYDQ'//oh2UV1lyYABHMZ1rMlgjhVHyyYDQ  oroHZ5FaUQ_SOOC_uQQP92fJpBRE
    this.getDetail()
  },
  methods: {
    orderRefundRuleTimerBack(){//返回前一个页面
      console.log('123')
      uni.navigateBack({
        delta: 1
      })
    },
    confirm(){//提交退订申请
      if(this.causeNum==5&&this.causeInput==''){
        uni.showToast({
          title: '请输入原因',
          icon: 'none'
        })
        return false
      }
			
      if(this.causeNum==5){
        this.reason = this.causeInput
      }else if(this.causeNum==1){
        this.reason = '更改出行日期'
      }else if(this.causeNum==2){
        this.reason = '计划有变'
      }else if(this.causeNum==3){
        this.reason = '信息填错'
      }else if(this.causeNum==4){
        this.reason = '景区临时关闭'
      }
      if(this.reason==''){
        uni.showToast({
				  title: '请选择退改原因',
				  icon: 'none'
        })
        return false
      }
      var orderTouristVoList = []
      this.applyUserList.forEach((item)=>{
			  if(item.checkType==true){
          orderTouristVoList.push(item)
        }
      })
      var data = {
        orderId:this.orderInfo.id,
        userId:this.openId,
        refundReason:this.reason,
        refundNum:this.refundNum,
        refundMoney:this.orderInfo.unitPrice*this.refundNum,
        pdRefundMoney:this.orderInfo.unitPrice*this.refundNum,
        refundType:0,
        pdRefundFee:this.orderInfo.depositReceived,
        orderTouristVoList:orderTouristVoList,
      }
      this.$request('order/userOrder/refundTicket',data).then((res)=>{
			  if(res.code == '00'){
        //   if(res.data.errorMessage!=''&&res.data.errorMessage!=undefined&&res.data.refundStatus!=6){
        //     uni.showToast({
        //       title: res.data.errorMessage,
        //       icon: 'none'
        //     })
        //   }else{
        //     uni.showToast({
						  // title: '申请成功',
						  // icon: 'none'
        //     })
        //     setTimeout(()=>{
						  // uni.reLaunch({
						  //   url: '/pages/my/order/orderList/orderList'
						  // })
        //     },1000)
        //   }
          uni.showToast({
					  title: '申请成功',
					  icon: 'none'
          })
          setTimeout(()=>{
					  uni.reLaunch({
					    url: '/pages/my/order/orderList/orderList'
					  })
          },1000)
          
			    
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    getDetail(){//订单信息加载
      var data = {
        orderId:this.id,
        userId:this.openId
      }
      this.$request('order/userOrder/findOrderDetail',data).then((res)=>{
			  if(res.code == '00'){
			    this.orderInfo = res.data
          var refundTimer= '23:59:59'
          if(this.orderInfo.orderRefundRuleList!=undefined&&this.orderInfo.orderRefundRuleList.length>0){
            refundTimer = this.orderInfo.orderRefundRuleList[0].refundTime
          }
					
          if(this.getNowTime()>'08:00:00'&&this.getNowTime()<refundTimer){
            this.isRefund = true
          }else{
            this.isRefund = false
          }
          this.merchantId = res.data.merchantId
          this.orderRefundRuleTimer = refundTimer
          if(this.getNowTime()>this.orderRefundRuleTimer){
            this.orderRefundRuleTimerType = true
          }
          this.orderInfo.orderTouristList.forEach((item)=>{
            item['checkType']=false
          })
					
          this.applyUserList =[]
          this.orderInfo.orderTouristList.forEach((item)=>{
            if(item.visitorStatus==0||item.visitorStatus==4){
              this.applyUserList.push(item)
            }
          })
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    //当前选择的原因
    clickNewFun(labelNum){
      this.causeNum = labelNum
    },
    checkboxGroupChange(e){//刷新显示
      this.applyUserListType = false
      this.applyUserList.forEach((item)=>{
        item.checkType=false
        e.detail.value.forEach(item2=>{
          if(item.id==item2){
            this.$set(item,'checkType',true)
          }
        })
      })
      this.refundNum = e.detail.value.length
      this.applyUserListType = true
    },
    checkedAll(e){//全选
      if(this.applyClickAll ==false){
        this.applyClickAll = true
        this.applyUserList.forEach((item)=>{
				  item.checkType=true
        })
        this.refundNum = this.applyUserList.length
      }else{
        this.applyClickAll = false
        this.applyUserList.forEach((item)=>{
				  item.checkType=false
        })
        this.refundNum = 0
      }
      
    },
    getNowTime() {//获取当前时间(HH-MM-SS)
      var date = new Date()
      var seperator1 = '-'
      var seperator2 = ':'
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var Hours = date.getHours()
      var Minutes = date.getMinutes()
      var Seconds = date.getSeconds()
	
      if (Hours >= 0 && Hours <= 9) {
        Hours = '0' + Hours
      }
      if (Minutes >= 0 && Minutes <= 9) {
        Minutes = '0' + Minutes
      }
      if (Seconds >= 0 && Seconds <= 9) {
        Seconds = '0' + Seconds
      }
      var time =  Hours + seperator2 + Minutes + seperator2 + Seconds
      return time
    },
  }
}
</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-ticketAct{
	margin-top: 20rpx;
}
.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;
	}
	.list-uCheckAct{
		/deep/ .wx-checkbox-input,
		/deep/ .uni-checkbox-input{
			background-color: #3688FF !important;
			border-color: #3688FF !important;
			color: #ffffff !important;
		}
	}
}
.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%;
			}
			.case-clickAct{
				border: 12rpx solid #3688FF;
			}
		}
		.list-case:nth-last-child(1){
			margin-bottom: 0;
		}
	}
}
.apply-textarea{
	padding: 24rpx;
	/deep/ .u-border{
		border: none;
	}
	/deep/ .u-input__textarea{
		height: 248rpx !important;
		background: #F6FAFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 24rpx !important;
	}
}
.apply-toButton{
	width: 750rpx;
	height: 98rpx;
	background: #3688FF;
	box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(0,0,0,0.16);
	font-size: 28rpx;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 98rpx;
	text-align: center;
	position: fixed;
	bottom: 0;
	left: 0;
}
.apply-mask{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 998;
	background-color: rgba(0,0,0,.3);
	.mask-box{
		width: 500rpx;
		height: 200rpx;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 10px;
		margin: auto;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 998;
		.box-text{
			font-size: 28rpx;
			text-align: center;
			line-height: 42rpx;
			margin-top: 10rpx;
			margin-bottom: 35rpx;
		}
		.box-btn{
			width: 300rpx;
			height: 60rpx;
			border-radius: 10rpx;
			background-color: #3688FF;
			font-size: 28rpx;
			text-align: center;
			line-height: 60rpx;
			margin: 0 auto 0 auto;
			color: #fff;
			font-weight: bold;
		}
	}
}
</style>
