<template>
	<view class="mg-lr-24">
		<view class="white-bg-wrap mg-bot-34">
			<view class="fw700 light-black fs32 mg-bot-20">{{couponInfo.couponName}}</view>
			<image style="width: 100%;height: 334rpx;" :src="couponInfo.couponIcon" class="mg-bot-20"></image>
			<view class="deep-gray fw400 fs24 mg-bot-20">仅用于商城指定产品</view>
			<view class="u-f u-f-jcsb u-f-aic fs24 light-gray">
				<text>订单结算使用</text>
				<text>已兑换 {{couponInfo.alreadyRedeemed}}</text>
			</view>
		</view>

		<view class="mg-bot-24">
			<common-title :msg="'兑换详情'"></common-title>
		</view>

		<view class="white-bg-wrap u-f u-f-jcsb u-f-aic fs28 mg-bot-34">
			<text class="light-black">{{couponInfo.couponName}}</text>
			<view class="u-f u-f-aic u-f-jcfs" v-if="couponInfo.exchangeMethod === 1">
				<text class="light-black mg-right-8">(1张)</text>
				<text class="main-color">￥{{couponInfo.needed}}</text>
			</view>
			<view class="u-f u-f-aic u-f-jcfs" v-else-if="couponInfo.exchangeMethod === 2">
				<text class="light-black mg-right-8">(积分兑换)</text>
				<text class="main-color">所需{{couponInfo.needed}}积分</text>
			</view>
			<view class="u-f u-f-aic u-f-jcfs" v-else>
				<text class="light-black mg-right-8">(1张)</text>
				<text class="main-color">免费</text>
			</view>
		</view>

		<view class="mg-bot-24">
			<common-title :msg="'购买须知'"></common-title>
		</view>

		<view class="white-bg-wrap mg-bot-38">
			<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">
				<text class="fl-1">适用规则</text>
				<text class='fl-3'>{{couponInfo.applicableRules}}</text>
			</view>
		</view>

		<view class="line-gradient-btn" @click="redeemCoupons">
			立即兑换
		</view>
		<!-- 消息通知开始 showPopup-->
		<uni-popup :position="'middle'" class="middle-wrap" :show="showPopup" @hidePopup="handleHidePopup">
			<view class="common-mes-nofity u-f u-f-jcc u-f-aic">
				<view v-if="couponInfo.exchangeMethod === 2" style="width: 100%">
					<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="handleHidePopup">我知道了</view>
					</view>
				</view>
				<view v-if="couponInfo.exchangeMethod === 3" style="width: 100%">
					<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>
		<!-- 消息通知结束 -->

	</view>
</template>

<script>
	import commonTitle from "../../components/common-title/common-title.vue"
	import uniPopup from "../../components/uni-popup/uni-popup.vue"
	export default {
		components: {
			commonTitle,
			uniPopup
		},
		data() {
			return {
				showPopup: false,
				couponId: 0,
				couponInfo: {},
				tipMessage: ''
			}
		},
		onLoad(option) {
			this.couponId = option.id
			this.couponsDetails()
		},
		onShareAppMessage() {
			return {
				title: '蚂蚁车生活',
				path: `/pagesF/coupon-detail/coupon-detail?id=${this.couponId}`
			};
		},
		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
			},
			async redeemCoupons() {
				// 积分购买 / 优惠券购买
				if (this.couponInfo.exchangeMethod === 1) {
					this.User.navigate({
						url: '/pagesD/coupon-quick-exchange/coupon-quick-exchange?couponId=' + this.couponInfo
							.id
					}, "navigateTo", true)
				} else if (this.couponInfo.exchangeMethod === 2) {
					this.User.navigate({
						url: '/pagesD/coupon-quick-exchange/coupon-quick-exchange?couponId=' + this.couponInfo
							.id
					}, "navigateTo", true)
				} else {
					// 免费优惠券直接兑换
					this.freeCoupons()
				}
			},
			// 免费兑换
			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.handleShowPopup()
			},
			handleShowPopup() {
				this.showPopup = true
			},
			handleHidePopup() {
				this.showPopup = false
				this.tipMessage = ''
				this.couponsDetails()
			},
			handleGoUse() {
				this.handleHidePopup()
				if (this.couponInfo.couponType == 5 || this.couponInfo.couponType == 2) {
					this.User.navigate({
						url: '/pagesF/car-beauty/car-beauty?id=2'
					}, "navigateTo", true);
				} else {
					uni.switchTab({
						url: "/pages/shop/shop"
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFBFF;
	}
</style>
<style lang="scss" scoped>
	.fl-1 {
		flex: 1;
	}

	.fl-3 {
		flex: 3;
	}

	.line-gradient-btn {
		padding: 22rpx;
	}

	.sys-mes-nofity {
		padding-bottom: 50rpx;
		position: relative;
		width: 100%;
		border-radius: 14rpx;
		background-color: #ffffff;

		.top {
			width: 100%;
			background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
			border-radius: 14rpx;
			height: 148rpx;
		}

		.bot {
			margin-top: 72rpx;

			.confirm {
				padding: 10rpx 60rpx;
				border-radius: 30rpx;
				color: #ffffff;
				background-color: #FF4502;
			}
		}
	}

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