<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">
				<!-- <text v-if="orderRefundRuleDay!=0">使用日期截止前{{orderRefundRuleDay}}天</text>
				<text v-else>游玩当天</text>{{orderRefundRuleTimer}}之前未使用可退 -->
				<view v-for="(item,index) in orderRefundRuleListShowMessage" :key="index">
						<!--已配置文字内容 -->
						<text v-if="item.refundShowMessage">
							{{item.refundShowMessage}}
						</text>
						<!-- 未配置文字内容 refundTimeType 1 为过期前 2为过期后-->
						<template v-else>
							<text v-if="item.refundTimeType==1">
								<text v-if="item.refundDay==0">
									使用日期当天{{item.refundTime}}之前可退
								</text>
								<text v-else>
									使用日期前{{item.refundDay}}天{{item.refundTime}}之前可退
								</text>
							</text>
							<text v-if="item.refundTimeType==2">
								<text v-if="item.refundDay==0">
									过期当天{{item.refundTime}}之前可退
								</text>
								<text v-else>
									过期后{{item.refundDay}}天{{item.refundTime}}之前可退
								</text>
							</text>
						</template>
				</view>
			</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">￥{{orderInfo.pdOrderMoney}}</view>
			</view>
			<view class="moneyBox-list">
				<view class="list-name">退款金额</view>
				<view class="list-money list-clolrOrange">￥{{parseFloat(orderInfo.pdOrderMoney)-parseFloat(orderInfo.refundFee)}}</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>
			退款时间为{{orderRefundRuleTimer}}-{{orderRefundRuleEndTimer}}
		</view>
		<view class="apply-mask" v-if="orderRefundRuleListShowBtn==false">
			<view class="mask-box">
				<view class="box-text">
					<view v-for="(item,index) in orderRefundRuleListShowMessage" :key="index">
						<!--已配置文字内容 -->
						<text v-if="item.refundShowMessage">
							{{item.refundShowMessage}}
						</text>
						<!-- 未配置文字内容 refundTimeType 1 为过期前 2为过期后-->
						<template v-else>
							<text v-if="item.refundTimeType==1">
								<text v-if="item.refundDay==0">
									使用日期当天{{item.refundTime}}之前可退
								</text>
								<text v-else>
									使用日期前{{item.refundDay}}天{{item.refundTime}}之前可退
								</text>
							</text>
							<text v-if="item.refundTimeType==2">
								<text v-if="item.refundDay==0">
									过期当天{{item.refundTime}}之前可退
								</text>
								<text v-else>
									过期后{{item.refundDay}}天{{item.refundTime}}之前可退
								</text>
							</text>
						</template>
					</view>
				</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,
        },
      ],//用户信息
      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:'',//退款时间
      orderRefundRuleEndTimer:'',//退款截止时间
      orderRefundRuleTimerType:false,
      orderRefundRuleDay:'',//退款天
      orderRefundRuleListShowMessage:[],//退票规则列表
      orderRefundRuleListShowBtn:true,//退票是否超时
    }
  },
  onLoad(option) {
    this.id = option.orderId||''
    this.openId = uni.getStorageSync('openid') //openid oroHZ5FaUQ_SOOC_uQQP92fJpBRE oh2UV1lyYABHMZ1rMlgjhVHyyYDQ
    //this.openId = 'oroHZ5FaUQ_SOOC_uQQP92fJpBRE'//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 data = {
        orderId:this.orderInfo.id,
        userId:this.openId,
        refundReason:this.reason,
        refundNum:this.orderInfo.orderNum,
        refundMoney:parseFloat(this.orderInfo.pdOrderMoney)-parseFloat(this.orderInfo.depositReceived),
        pdRefundMoney:parseFloat(this.orderInfo.pdOrderMoney),
        refundType:0,
        pdRefundFee:this.orderInfo.depositReceived,
      }
      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.orderInfo.orderRefundRuleList[0].refundDay!=undefined){
          //     this.orderRefundRuleDay = this.orderInfo.orderRefundRuleList[0].refundDay
          //   }
          // }
					
          // if(this.getNowTime()>'08:00:00'&&this.getNowTime()<refundTimer){
          //   this.isRefund = true
          // }else{
          //   this.isRefund = false
          // }
          // this.isRefund = true
          this.merchantId = res.data.merchantId
          // this.orderRefundRuleTimer = refundTimer
          // if(this.getNowTime()>this.orderRefundRuleTimer){
          //   this.orderRefundRuleTimerType = true
          // }
          this.orderRefundRuleListShowMessage = this.orderInfo.orderRefundRuleList
          //判断是否在退票时间内
          var orderRefundRuleListShowType = false
          this.orderRefundRuleListShowMessage.forEach((item,index)=>{
					  if(item.refundVisitorApply==1){
              orderRefundRuleListShowType = true
					    var todayTimer = this.$commonjs.today()+' '+this.$commonjs.todayTime() //获取今天时间
              var playdateTimer = '' //获取游玩时间开始
              if(item.refundDay!=undefined&&item.refundDay!=0){
                var itemDay = -item.refundDay//将天数改为负数
                var orderEndPlayDate = this.getNextDate(this.orderInfo.playDate,itemDay)//最迟退票天数 
                playdateTimer = orderEndPlayDate+' '+item.refundTime
              }else{
                playdateTimer = this.orderInfo.playDate+' '+item.refundTime
              }
              var todayTimerNum = this.$commonjs.changeTime(todayTimer) //今天时间转化数字
              var playdateTimerNum = this.$commonjs.changeTime(playdateTimer) //游玩时间转化数字
              var playdateEndTimer = ''//退票截止时间
              var playdateEndTimerNum = '' //截止时间转化数字
              if(item.refundDateType!=undefined&&item.refundDateType==2){//refundDateType  退款时间展示文字（0之前1之后2至（用于区间））
                if(item.refundDay!=undefined&&item.refundDay!=0){
                  var itemDay = -item.refundDay//将天数改为负数
                  var orderEndPlayDate = this.getNextDate(this.orderInfo.playDate,itemDay)//最迟退票天数 
                  playdateEndTimer = orderEndPlayDate+' '+item.refundEndTime
                }else{
                  playdateEndTimer = this.orderInfo.playDate+' '+item.refundEndTime //获取游玩时间开始
                }
                playdateEndTimerNum = this.$commonjs.changeTime(playdateEndTimer)
              }
              if(item.refundDateType!=undefined&&item.refundDateType==2){
                if(todayTimerNum>playdateTimerNum&&todayTimerNum<playdateEndTimerNum){
                  this.orderRefundRuleListShowBtn = true
                  this.isRefund = true
                  this.orderRefundRuleTimer = item.refundTime
                  this.orderRefundRuleEndTimer = item.refundEndTime
                }else{
                  this.orderRefundRuleListShowBtn = false
                  this.isRefund = false
                  this.orderRefundRuleTimer = item.refundTime
                  this.orderRefundRuleEndTimer = item.refundEndTime
                }
              }else{
                if(todayTimerNum<playdateTimerNum){
                  this.orderRefundRuleListShowBtn = true
                  this.isRefund = true
                  this.orderRefundRuleTimer = '08:00:00'
                  this.orderRefundRuleEndTimer = item.refundTime
                }else{
                  this.orderRefundRuleListShowBtn = false
                  this.isRefund = false
                  this.orderRefundRuleTimer = '08:00:00'
                  this.orderRefundRuleEndTimer = item.refundTime
                }
              }
					  }
          })
          if(orderRefundRuleListShowType == false&&this.orderInfo.isRefund!=0&&this.orderInfo.orderStatus==2||orderRefundRuleListShowType == false&&this.orderInfo.isRefund!=0&&this.orderInfo.orderStatus==7){
            this.isRefund = true
            this.orderRefundRuleListShowBtn = true
          }else if(orderRefundRuleListShowType == false&&this.orderInfo.isRefund==0){
            this.orderRefundRuleListShowBtn = false
            this.isRefund = false
          }
        }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    getNextDate(date,day) {//天数计算器
      var dd = new Date(date)
      dd.setDate(dd.getDate() + day)
      var y = dd.getFullYear()
      var m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1
      var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()
      return y + '-' + m + '-' + d
    },
    //当前选择的原因
    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
    //     })
    //   }
    // },
    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;
	}
}
.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);
	display: flex;
	flex-direction:column;
	justify-content:center;
	.mask-box{
		width: 500rpx;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 10px;
		margin: auto;
		display: flex;
		flex-direction:column;
		justify-content:center;
		.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>
