<template>
	<view class="top_main">
		<view class="top_page_out">
			<view class="top_page">
				<view>
					<view class="pay_title">已为您生成深度分析报告</view>
					<!-- <img class='top_page_img' src='https://test.jue-ming.com:8849/api/show?filePath=./webo/top_1.png' /> -->
					<view class="top_page_tab">
						<view class="top_page_m">
							<view style="margin-left: 23px">
								<img style="width: 80px; height: 80px"
									src="https://test.jue-ming.com:8849/api/show?filePath=./webo/top_2.png" />
							</view>
							<view class="top_page_tab_right">
								<view class="top_page_scale_title">{{orderInfo.description}}</view>
								<view class="top_page_scale_title">个人深度分析报告</view>
								<view class="top_page_yh">{{hasDiscount? '限时专享优惠价' : '专享价'}}</view>
								<view class="top_page_price"> ￥{{hasDiscount? promotionPrice : price}} </view>
								<!-- <view class='top_people'>
									100.3w<text class='page_yice'>人已测</text>
								</view> -->
							</view>
						</view>
						<view class="top_page_b">
							<button class="top_page_b_b">{{hasDiscount? promotionPrice : price}}元解锁报告数据</button>
						</view>
					</view>
				</view>
				<!-- <view style="margin-top: 40px">
					<view class="main_scale_gmcp">
						<img class="main_xing_left" src="https://test.jue-ming.com:8849/api/show?filePath=./webo/xing_left3.png" />
						<view class="main_scale_font_gmcp">购买测评的这样说</view>
						<img class="main_xing_right" src="https://test.jue-ming.com:8849/api/show?filePath=./webo/xing_right3.png" />
					</view>
				</view>
				<view class="scale_gmcp_connent">
					<view style="display: flex; margin-bottom: 20px">
						<img style="width: 43px; height: 43px; border-radius: 50%" src="https://test.jue-ming.com:8849/api/show?filePath=./webo/topImg1.png" />
						<view style="margin-left: 20px">
							<view class="pub_time">发布时间：2023-01-01 12：00</view>
							<view class="pub_connnet">测得很准</view>
						</view>
					</view>
					<view style="display: flex">
						<img style="width: 43px; height: 43px; border-radius: 50%" src="https://test.jue-ming.com:8849/api/show?filePath=./webo/phone2.png" />
						<view style="margin-left: 20px">
							<view class="pub_time">发布时间：2023-05-01 12：00</view>
							<view class="pub_connnet">确实不错</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>

		<view class="top_footer">
			<template v-if="hasDiscount">
				<view class="pay_price">
					<!-- <view class='pay_price_y'>优惠价</view> -->
					<view class="pay_price_p">￥{{price}}</view>
					<view class="pro_tag">优惠价:￥<text class="price"> {{promotionPrice}}</text></view>
				</view>
				<view style="display: flex;justify-content: space-between; align-items: center; margin: 20rpx 0;">
					<view class="people_sy"> 本次优惠剩余名额：{{residueNum}} </view>
					<view class="people_sy_time">
						<!-- <uni-countdown :show-day="false" :hour="testHour" :minute="testMinute" :second="testSecond" /> -->
						<text>倒计时：</text><uni-countdown :show-day="true" background-color="#FF9D41" color="#ffffff"
							:start="start" :hour="testHour" :minute="testMinute" :second="testSecond" />
					</view>
				</view>
			</template>
			<!-- <view>
				<radio-group @change="radioChange" class='radio_class_1'>
					<label class='radio_class' v-for="(item, index) in payList" :key="item.value">
						<img style='width:25px;height:25px' :src='item.url' />&nbsp;
						<view>{{item.value}}</view>&nbsp;
						<view>
							<radio :value="item.value" color='#fe605f' :checked="index === current" />
						</view>
					</label>
				</radio-group>
			</view> -->
			<view style="margin-bottom: 20rpx;">
				<button class="top_page_b_1" @click="getH5Pay()">
					<text class="price-suo">{{hasDiscount? promotionPrice : price}}元解锁报告数据</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		timestampFormatter
	} from '../../utils/util.js'
	export default {
		data() {
			return {
				current: 0,
				payList: [{
						index: 1,
						value: "微信支付",
						url: new URL(`https://test.jue-ming.com:8849/api/show?filePath=./webo/wx.png`, import.meta.url)
							.href,
						checked: true,
					},
					{
						index: 1,
						value: "支付宝支付",
						url: new URL(`https://test.jue-ming.com:8849/api/show?filePath=./webo/zfb.png`, import.meta
							.url).href,
						checked: false,
					},
				],
				orderInfo: null,
				residueNum: 0, // 剩余名额
				price: 0, // 正常价格
				promotionPrice: 0, // 优惠价格
				promotionEndTime: 0, // 结束时间（时间戳）
				testHour: 0, // 时
				testMinute: 0, // 分
				testSecond: 0, // 秒
				start: false
			};
		},
		computed: {
			// 是否有折扣
			hasDiscount() {
				let timeSpan = new Date().getTime();
				let endTime = this.promotionEndTime - timeSpan;
				debugger
				return this.residueNum > 0 && endTime > 0
			}
		},
		onLoad(options) {
			if (options.orderNo) {
				this.orderNo = options.orderNo;
				this.payEnsure();
			}
			this.orderInfo = uni.getStorageSync('orderInfo');
			this.queryPromotion();
		},
		methods: {
			radioChange() {},
			// 查询优惠信息
			queryPromotion() {
				let _this = this;
				_this.$request
					.get({
						url: `api/promotionInfo/queryPromotionDetail/${this.orderInfo.productId}`,
						loadingTip: "加载中...",
						data: {},
					})
					.then((res) => {
						this.residueNum = res.data.residueNum
						this.price = res.data.price;
						this.promotionPrice = res.data.promotionPrice;
						this.promotionEndTime = new Date(res.data.promotionEndTime).getTime()
						this.getDhms();
						uni.hideLoading();
					});
			},

			// 查询是否有订单
			queryHasOrder() {
				let _this = this;
				_this.$request
					.get({
						url: `api/orderInfo/queryOrderByResultIdAndUserId/${this.orderInfo.userId}/${this.orderInfo.resultId}`,
						loadingTip: "加载中...",
						data: {},
					})
					.then((res) => {
						uni.hideLoading();
					});
			},

			// 检查订单支付状态
			checkOrder() {
				let _this = this;
				_this.$request
					.get({
						url: `api/wx-pay/queryOrder/${_this.orderNo}`,
						loadingTip: "加载中...",
						data: {},
					})
					.then((res) => {
						uni.hideLoading();
						let resultInfo = JSON.parse(res.data.body)
						if (resultInfo.trade_state === 'SUCCESS') {
							uni.navigateTo({
								url: `/paymentPage/phoneSave/index?resultId=${this.orderInfo.resultId}&userId=${this.orderInfo.userId}`
							});
						} else {
							return;
						}
					});
			},
			// 拉起微信支付
			getH5Pay(params) {
				let _this = this;
				uni.showLoading();
				_this.$request
					.get({
						url: `api/orderInfo/queryOrderByResultIdAndUserId/${this.orderInfo.userId}/${this.orderInfo.resultId}`,
						loadingTip: "加载中...",
						data: {},
					})
					.then((res) => {
						uni.hideLoading();
						if (res.data && res.data.orderStatus === '支付成功') {
							uni.navigateTo({
								url: `/paymentPage/phoneSave/index?resultId=${this.orderInfo.resultId}&userId=${this.orderInfo.userId}`
							});
						} else {
							_this.orderInfo.total = _this.hasDiscount ? _this.promotionPrice : _this.price;
							_this.$request
								.post({
									url: "api/wx-pay/h5Pay",
									loadingTip: "加载中...",
									data: _this.orderInfo
								})
								.then((res) => {
									let redirect_url = encodeURI(
										`http://hnhong-duo.com/webo/paymentPage/paymentPage/index?orderNo=${res.data.orderNo}`
									)
									window.location.href = `${res.data.codeUrl}&redirect_url=${redirect_url}`;
								});
						}
					});
			},
			payEnsure() {
				let _this = this;
				uni.showModal({
					title: '支付确认',
					content: '请在微信内完成支付，如您已支付成功，请点击"已完成支付按钮"',
					cancelText: '未支付',
					confirmText: '已完成支付',
					success() {
						uni.showLoading({
							title: ''
						});
						_this.checkOrder();
					},
					fail() {

					}
				})
			},

			// 获取天时分秒
			getDhms() {
				let timeSpan = this.promotionEndTime - new Date().getTime();
				let time = timestampFormatter(timeSpan);
				this.testHour = time.h;
				this.testMinute = time.m;
				this.testSecond = time.s;
				this.start = true;
			}
		},
	};
</script>

<style scoped>
	.top_page {
		width: 90%;

		/* height: 400px; */
		padding-left: 5%;
		padding-right: 5%;
		overflow-y: scroll;
	}

	.top_page_out {
		width: 100%;
		height: 100vh;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/top-bg.png) no-repeat center;
		background-size: cover;
	}

	.top_page_img {
		/* max-width: 100%; */
		width: 100%;
		margin-top: 100px;
	}

	.top_main {
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, #ffecd5 0%, #ffffff 100%);
	}

	.top_page_tab {
		width: 100%;
		height: 180px;
		background-color: #ffffff;
		border-radius: 6px;
		margin-top: 5px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.top_page_m {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 150px;
		align-items: center;
		/* margin-left: 10px;
		margin-top: 20px; */
	}

	.top_page_b {
		margin-left: 20px;
		margin-right: 20px;
		/* width: 100%; */
		/* height:150px; */
		margin-bottom: 10px;
	}

	.top_page_tab_right {
		margin-left: 10px;
	}

	.top_page_b_b {
		font-size: 32rpx;
		line-height: 72rpx;
		height: 72rpx;
		background: linear-gradient(270deg, #fc3c3c 0%, #ff9d41 100%);
		box-shadow: 0px 8rpx 20rpx 0px rgba(244, 107, 107, 0.302);
		border-radius: 20px 20px 20px 20px;
		opacity: 1;
		border: 1px solid #ffe8ba;
		color: #ffffff;
	}

	.top_page_b_1 {
		color: #ffffff;
		line-height: 80rpx;
		background: linear-gradient(270deg, #fc3c3c 0%, #ff9d41 100%);
		box-shadow: 0px 4px 10px 0px rgba(244, 107, 107, 0.302);
		border-radius: 10px 10px 10px 10px;
		opacity: 1;
		border: 1px solid #ffe8ba;
		margin-left: 10px;
		margin-right: 10px;
	}

	.top_page_scale_title {
		/* margin-bottom: 5px;
		font-size: 16px;
		font-weight: 700; */
		font-size: 14px;
		font-family: Source Han Sans-Bold, Source Han Sans;
		font-weight: 700;
		color: #040000;
		line-height: 20px;
	}

	.top_page_price {
		color: #f94206;
		font-size: 14px;
	}

	.page_yice {
		color: #a4a4a4;
	}

	.top_people {
		font-size: 14px;
		display: flex;
	}

	.top_page1 {
		width: 90%;
		/* height: 400px; */
		/* background-image: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/top-bg.png); */
		padding-left: 5%;
		padding-right: 5%;
	}

	.middle_get {
		text-align: center;
		font-size: 16px;
		font-weight: 700;
		margin-bottom: 10px;
		margin-top: 10px;
	}

	.middle_get::before {
		background: url("https://test.jue-ming.com:8849/api/show?filePath=./webo/middle_left.png");
		background-size: 100% 100%;
		content: "";
		display: inline-flex;
		width: 50px;
		height: 10px;
	}

	.middle_get::after {
		background: url("https://test.jue-ming.com:8849/api/show?filePath=./webo/middle_right.png");
		background-size: 100% 100%;
		content: "";
		display: inline-flex;
		width: 50px;
		height: 10px;
	}

	.middle_get_img {
		width: 100%;
	}

	.middle_get_img1 {
		width: 100%;
		margin-bottom: 140px;
	}

	.top_footer {
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		background: linear-gradient(355deg, #fff0e5, #fff8e0);
		width: 100%;
		/* max-width: 10rem; */
		position: fixed;
		bottom: 0;
	}

	.pay_price {
		display: flex;
		align-items: center;
		padding-top: 10px;
	}

	.pay_price_y {
		background-color: #fe605f;
		margin-left: 20px;
		margin-right: 5px;
		color: #ffffff;
	}

	.pay_price_p {
		font-size: 32rpx;
		font-family: Source Han Sans-Bold, Source Han Sans;
		font-weight: 700;
		color: #f94206;
		/* line-height: 38px; */
		margin-left: 10px;
	}

	.radio_class {
		display: flex;
		background-color: #ffffff;
		margin-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		border-radius: 5px;
		padding-bottom: 5px;
		align-items: center;
	}

	.radio_class_1 {
		display: flex;
		justify-content: space-around;
	}

	.pay_title {
		text-align: center;
		/* margin-top:38px; */
		font-size: 20px;
		font-family: AlibabaPuHuiTi-Heavy, AlibabaPuHuiTi;
		font-weight: 900;
		color: #500000;
		line-height: 101px;
	}

	.top_page_yh {
		font-size: 14px;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #656c74;
		line-height: 20px;
	}

	.main_scale_gmcp {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.main_scale_font_gmcp {
		font-size: 16px;
		font-family: Source Han Sans-Medium, Source Han Sans;
		font-weight: 700;
		color: #040000;
	}

	.main_xing_left {
		height: 30px;
		width: 20px;
		margin-right: 20px;
	}

	.main_xing_right {
		height: 30px;
		width: 20px;
		margin-left: 20px;
	}

	.scale_gmcp_connent {
		margin-top: 10px;
		background-color: #ffffff;
		border-radius: 10px 10px 10px 10px;
		opacity: 1;
		padding: 24px 15px;
		margin-bottom: 200px;
		overflow-y: scroll;
	}

	.pub_time {
		margin-top: 5px;
		font-size: 12px;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #c4c4c4;
		line-height: 17px;
	}

	.pub_connnet {
		font-size: 14px;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #3d3d3d;
		line-height: 20px;
	}

	.people_sy {
		font-size: 14px;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #656c74;
		line-height: 20px;
		margin-left: 4px;
	}

	.people_sy_time {
		font-size: 14px;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #656c74;
		line-height: 20px;
		display: flex;
		margin-right: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.time_ol {
		background: linear-gradient(270deg, #ff9d41 0%, #fc3c3c 100%);
		border-radius: 4px 4px 4px 4px;
		padding: 2px;
		color: #ffffff;
	}

	.time_mao {
		color: #ff9d41;
	}

	.price-suo {
		font-size: 16px;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #ffffff;
		line-height: 40px;
	}

	.pro_tag {
		padding: 12rpx 20rpx;
		background: #EA0000;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin-left: 16rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		font-size: 24rpx;

		.price {
			font-size: 39rpx !important;
			font-weight: 700;
			margin: 0 0 10rpx 10rpx;
		}
	}
</style>