<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="'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" v-if="couponInfo.exchangeMethod === 1">￥</text>
						<text class="fs32">{{couponInfo.needed}}</text>
					</view>
				</view>
				<view class="line-gradient-btn" @click="submitApply">
					提交支付
				</view>
			</view>
		</view>
		<!-- 消息通知开始 -->
		<uni-popup class="middle-wrap" :position="'middle'" :show="showMessage" @hidePopup="hideShowMessage">
			<view class="sys-mes-nofity u-f u-f-jcc u-f-aic" style="padding: 20rpx 0;">
				<view class="u-f u-f-jcc u-f-fdc u-f-aic" v-if="showType ===1">
					<view class="top u-f u-f-jcc u-f-aic fs38 fw700 mg-bot-38">温馨提示</view>
					<view class="u-f u-f-jcc u-f-aic fs30 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 v-else>
					<view class="u-f u-f-jcc u-f-fdc u-f-aic" v-if="couponInfo.exchangeMethod ===1">
						<view class="top u-f u-f-jcc u-f-aic fs38 fw700 mg-bot-38">温馨提示</view>
						<view class="u-f u-f-jcc u-f-aic fs30 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="couponInfo.exchangeMethod===2">
						<view class="top u-f u-f-jcc u-f-aic fs38 fw700 mg-bot-38">温馨提示</view>
						<view class="u-f u-f-jcc u-f-aic fs30 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>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword: false,
				showMessage: false,
				couponId: 0,
				tipMessage: '',
				couponInfo: {},
				focusIndex: -1,
				passwordNum: {
					0: '',
					1: '',
					2: '',
					3: '',
					4: '',
					5: ''
				},
				orderId: 0,
				showType: 0
			}
		},
		onLoad(option) {
			this.couponId = option.couponId
			this.couponsDetails()
		},
		methods: {
			handleGoUse() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},

			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
				if (resData.msg == "您得积分不够") {
					this.showType = 1
					this.tipMessage = resData.msg
					this.showMessage = true
				} else {
					this.showType = 0
					this.tipMessage = resData.msg
					this.showMessage = true
				}



			},
			// 免费兑换
			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 = true
			},
			async placeOrder() {
				console.log("this.couponInfo", this.couponInfo)
				// 下单
				let data = {
					"type": 5, // 5 优惠券
					"couponId": this.couponInfo.id,
					"goodsNum": 1
				}

				uni.showLoading({
					title: '正在下单...',
					mask: true
				})

				let res = await this.$http.post('/api/client/order/placeOrder', data)

				uni.hideLoading()
				if (res.data.code === 200) {
					this.orderId = res.data.data
					// 支付
					this.payMoney()
				} else {
					uni.showToast({
						title: '下单失败',
						icon: 'none'
					})
				}
			},
			async payMoney() {
				let data = {
					"orderId": this.orderId,
				}

				let res = await this.$http.get('/api/client/lkl/pay', data)
				let resData = res.data.data

				this.wakeWxPay(resData)
			},
			wakeWxPay(resData) {
				var app_id = resData.resp_data.acc_resp_fields.app_id
				var nonce_str = resData.resp_data.acc_resp_fields.nonce_str
				var package_word = resData.resp_data.acc_resp_fields['package']
				var partner_id = resData.resp_data.acc_resp_fields.partner_id
				var prepay_id = resData.resp_data.acc_resp_fields.prepay_id
				var time_stamp = resData.resp_data.acc_resp_fields.time_stamp
				var pay_sign = resData.resp_data.acc_resp_fields.pay_sign
				var sign_type = resData.resp_data.acc_resp_fields.sign_type

				var orderInfo = {
					appid: app_id, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					nonceStr: nonce_str, // 随机字符串
					package: package_word, // 固定值
					partnerid: partner_id, // 微信支付商户号
					prepayid: prepay_id, // 统一下单订单号
					timeStamp: time_stamp, // 时间戳（单位：秒）
					signType: sign_type,
					paySign: pay_sign // 签名，这里用的 MD5/RSA 签名
				}

				uni.requestPayment({
					provider: "wxpay",
					appid: app_id, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					nonceStr: nonce_str, // 随机字符串
					package: package_word, // 固定值
					partnerid: partner_id, // 微信支付商户号
					prepayid: prepay_id, // 统一下单订单号
					timeStamp: time_stamp, // 时间戳（单位：秒）
					signType: sign_type,
					paySign: pay_sign, // 签名，这里用的 MD5/RSA 签名
					success(res) {
						console.log("success", res)
						uni.redirectTo({
							url: "/pagesE/pay-success/pay-success"
						})
					},
					fail(e) {
						console.log("fail", e)
					}
				})
			},
			submitApply() {
				if (this.couponInfo.exchangeMethod === 1) {
					this.placeOrder()
				} else {
					// 积分兑换
					this.redeem()
				}
			},
			showFillPassword() {
				this.showPassword = true
			},
			hideFillPassword() {
				this.showPassword = false
			},
			hideShowMessage() {
				this.tipMessage = ''
				this.showMessage = false
				this.showType = 0

			},
			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%;
	}

	.middle-wrap :deep(.uni-popup-insert) {
		width: 624rpx !important;
	}
</style>