<template>
	<view class="mg-lr-24">
		<view class="white-bg-wrap">
			<view class="u-f u-f-jcfs u-f-aifs mg-bot-30">
				<image
					style="width: 128rpx;height: 128rpx;border-radius: 9rpx;"
					class="mg-right-10"
					:src="couponInfo.couponIcon"
				></image>
				<view>
					<view class="fs28 light-black mg-bot-8">{{couponInfo.couponName}}</view>
					<view class="fs24 deep-gray mg-bot-20">仅用于商城指定产品</view>
					<view class="fs24 light-gray">订单结算使用</view>
				</view>
			</view>
			<view v-if="couponInfo.exchangeMethod === 1">
				<text class="light-gray mg-right-8 fs24">所需金额</text>
				<text class="main-color fs28 fw700">￥{{couponInfo.needed}}</text>
			</view>
			<view v-else="couponInfo.exchangeMethod === 2">
				<text class="light-gray mg-right-8 fs24">所需积分</text>
				<text class="main-color fs28 fw700">￥{{couponInfo.needed}}</text>
			</view>
		</view>
		
		<view class="mg-bot-24 mg-top-24">
			<common-title :msg="'兑换须知'"></common-title>
		</view>
		
		<view class="white-bg-wrap">
			<view class="u-f u-f-jcfs u-f-aifs fs28 light-gray mg-bot-30">
				<text class="fl-1">有效日期</text>
				<text class="fl-3">{{couponInfo.effectiveDate}}</text>
			</view>
			
			<view class="u-f u-f-jcfs u-f-aifs fs28 light-gray mg-bot-30">
				<text class="fl-1">使用时间</text>
				<text class="fl-3">{{couponInfo.usageTime}}</text>
			</view>
			
			<view class="u-f u-f-jcfs u-f-aifs fs28 light-gray mg-bot-38">
				<text class="fl-1">适用规则</text>
				<text class='fl-3'>{{couponInfo.applicableRules}}</text>
			</view>
		</view>
		
		<!-- 消息通知开始 -->
		<uni-popup :position="'middle'" :show="showMessage" @hidePopup="hideShowMessage">
			<view class="sys-mes-nofity u-f u-f-jcc u-f-aic">
				<view class="u-f u-f-jcc u-f-fdc u-f-aic" v-if="tipMessage !== '兑换成功'">
					<view class="top u-f u-f-jcc u-f-aic fs32 fw700 mg-bot-38">温馨提示</view>
					<view class="u-f u-f-jcc u-f-aic fs24 fw400 light-gray mg-bot-46">{{tipMessage}}</view>
					<view class="u-f u-f-jcc">
						<view class="main-color-btn" @click="hideShowMessage">我知道了</view>
					</view>
				</view>
				<view class="u-f u-f-jcc u-f-fdc u-f-aic" v-if="tipMessage === '兑换成功'">>
					<view class="top u-f u-f-jcc u-f-aic fs32 fw700 mg-bot-38"></view>
					<view class="u-f u-f-jcc u-f-aic fs24 fw400 light-gray mg-bot-46">{{tipMessage}}</view>
					<view class="u-f u-f-jcc">
						<view class="main-color-btn" @click="handleGoUse">去使用</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 消息通知结束 -->
		
		<!-- 支付密码弹窗开始 -->
		<uni-popup :position="'bottom'" :show="showPassword" @hidePopup="hideFillPassword">
			<view class="sys-mes-nofity u-f u-f-fdc mg-bot-24" style="padding-top: 48rpx;">
				<view class="u-f u-f-jcfs u-f-aic fw700 mg-lr-24 fw400" style="border-radius: 40rpx;text-align: left;">密码验证</view>
				<view class="white-bg-wrap" style="padding: 24rpx 44rpx;">
					<view class="u-f u-f-jcfs u-f-aic mg-bot-24">
						<view class="u-f u-f-jcfs u-f-aic">
							<image class="mg-right-10" style="width: 102rpx;height: 102rpx;background-color: gray;border-radius: 9rpx;"></image>
							<view class="fs28">旅行的小七仔</view>
						</view>
					</view>
					<view class="u-f u-f-jcsb u-f-aic mg-bot-24 fs24">
						<text class="light-black">请输入您的支付密码</text>
						<text class="light-gray">忘记密码</text>
					</view>
					<view class="u-f u-f-jcfs u-f-aic">
						<view style="background: #FAFBFF;border-radius: 8rpx 8rpx 8rpx 8rpx;"
							class="u-f u-f-aic u-f-jcc mg-right-10 fill-box"
							v-for="(item,index) in passwordNum"
							:key="index"
						>
							<input class="my-input" :password="true" :maxlength="1" :id="'input-'+ index" :focus="focusIndex == index"
	 autocomplete="off" autocapitalize="off" autocorrect="off" @keyup.delete="funDeletePhoneNum"
	 @input="funInputPhoneNum" @focus="funFocusInput"/>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 支付密码弹窗结束 -->
		
		<view class="fix-bot">
			<view class="u-f u-f-jcsb u-f-aic" style="padding: 24rpx;">
				<view class="u-f u-f-aic u-f-jcfs">
					<text class="fs24 light-gray mg-right-6">
						{{couponInfo.exchangeMethod === 1 ? '金额合计' : '积分合计'}}
					</text>
					<view class="main-color">
						<text class="fs24">￥</text>
						<text class="fs32">{{couponInfo.needed}}</text>
					</view>
				</view>
				<view class="line-gradient-btn" @click="submitApply">
					提交支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword: false,
				showMessage: false,
				couponId: 0,
				tipMessage: '',
				couponInfo: {},
				focusIndex: -1,
				passwordNum: {0: '', 1:'', 2:'', 3:'', 4:'', 5:''}
			}
		},
		onLoad(option) {
			this.couponId = option.couponId
			this.couponsDetails()
		},
		methods: {
			async couponsDetails() {
				let res = await this.$http.get('/api/client/coupon/couponsDetails?couponId='+this.couponId, {}, {token: true, checkToekn: true})
				let resData = res.data.data
				this.couponInfo = resData
				console.log('this.couponInfo', resData)
			},
			// 积分兑换
			async redeem() {
				let res = await this.$http.get('/api/client/coupon/redeem?couponId='+this.couponId, {}, {token: true, checkToekn: true})
				let resData = res.data
				this.tipMessage = resData.msg
				this.showMessage()
			},
			// 免费兑换
			async freeCoupons() {
				let res = await this.$http.get('/api/client/coupon/redeemCoupons?couponId='+this.couponInfo.id, {}, {token: true, checkToekn: true})
				let resData = res.data
				this.tipMessage = resData.msg
				this.showMessage()
			},
			submitApply() {
				if (this.couponInfo.exchangeMethod === 1) {
					// 金额兑换没有支付接口待对接
					this.showFillPassword()
				} else {
					// 积分兑换
					this.redeem()
				}
			},
			showFillPassword() {
				this.showPassword = true
			},
			hideFillPassword() {
				this.showPassword = false
			},
			showMessage() {
				this.showMessage = true
			},
			hideShowMessage() {
				this.tipMessage = ''
				this.showMessage = false
			},
			funInputPhoneNum(e) {
				var index = (e.target.id).replace('input-', '');
				var value = e.detail.value;
				if (index != '10' && value != '') {
					this.focusIndex = Number(index) + 1
				}
			},
			funDeletePhoneNum(e) {
				var index = (e.target.id).replace('input-', '');
				if (this.passwordNum[index] == '' && index > 1 ) {
					this.focusIndex = Number(index) - 1;
				}
			},
			funFocusInput(e){
				var index = (e.target.id).replace('input-', '');
				if(this.passwordNum[index] != ''){
					this.passwordNum[index] = '';
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFBFF;
	}
</style>

<style lang="scss">
	.fix-bot {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 333;
		.content {
			background-color: #ffffff;
		}
	}
	
	.line-gradient-btn {
		background: linear-gradient( 90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		text-align: center;
		padding: 22rpx 120rpx;
		color: #ffffff;
	}
	
	.fl-1 {
		flex: 1;
	}

	.fl-3 {
		flex: 3;
	}
	
	.sys-mes-nofity {
		width: 100%;
		background-color: #ffffff;
		border-radius: 14rpx;
	}
	
	.fill-box {
		height: 106rpx;
		flex: calc(100% / 6 - 10rpx);
		&:last-child {
			margin-right: 0;
		}
	}
	
	.my-input {
		width: 100%;
		height: 100%;
	}
</style>
