<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>
				<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>
			退款时间为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,
        },
      ],//用户信息
      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 = '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.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
          }
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    //当前选择的原因
    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);
	.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>
