<template>
	<view v-if="istrue" class="contents" style="overflow: hidden">
		<view class="flex_items flex_center mt30" style="width: 100%; height:160rpx">
			<view class="flex_column flex_items">
				<span class="bolder" style="font-size: 70rpx"> ￥{{ info.price }} </span>
				<view class="flex_start flex_items f32 mt20">
					<span>支付剩余时间</span>
					<view style="color: red" class="flex_start flex_items ml5">
						<view class="">{{ minutes }}</view>
						<view class="">:</view>
						<view class="">{{ secondsCom }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex_column flex_items plr20 ptb10 mt30">
			<!-- <view class="bgwhite plr20 ptb30 flex_column" style="border-radius: 20rpx; width: calc(100% - 60rpx)">
				<span class="bold f40">支付方式</span>
				<view class="mt30 flex_between flex_items f32">
					<view class="flex_start flex_items">
						<img :src="wwimg" mode="" style="width:70rpx; height: 70rpx" />
						<span class="ml10 f132">微信支付</span>
					</view>
					<span class="chooseIcon" :class="payIndex == 0 ? 'active' : ''"></span>
				</view>
			</view> -->
			<view class="bgwhite plr20 ptb30 flex_column" style="border-radius: 20rpx; width: calc(100% - 60rpx)">
				<view class="flex_between flex_items f30">
					<text class="f32">订单编号</text>
					<text style="color: #a3a1a1e6;">{{orderno}}</text>
				</view>
				<view class="flex_between flex_items f30 mt30">
					<text class="f32">支付方式</text>
					<text style="color: #a3a1a1e6;">微信支付</text>
				</view>
				<view @click="goredm" class="flex_between flex_items f30 mt30">
					<text class="f32">可用红包</text>
					<text v-if="hbs.length==0" style="color: #a3a1a1e6;">暂无可用</text>
					<view v-else class="f24" style="background: red;color: #fff;padding:8rpx;border-radius:6rpx;">
						<text v-if="whoname==''">{{hbs.length}}张可用</text>
						<text v-else>{{whoname}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex_between flex_items bgwhite">
		</view>
		<view class="flex_items flex_center" style="width: 100%; position: fixed; left: 0; bottom:30rpx">
			<view class="f30 ptb20 f-center que" style="background: #fde64f; border-radius: 18rpx" @click="goorder">
				确认支付
			</view>
		</view>
		<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payIndex: 0,
				paymoney: "",
				minutes: null,
				seconds: 0,
				timeShow: true,
				foods: [],
				other: "",
				wwimg: require('@/static/wxzf.png'),
				info: {},
				hbs: [],
				istrue: false,
				hbimg: require('@/static/hbt.png'),
				orderno: "",
				whoindex: '',
				whoname: "",
				packet_id: ""
			};
		},
		onLoad() {
			// this.foods = JSON.parse(this.$route.params.foods);
			// this.other = this.$route.params.other.split("¥")[1];
			// this.paymoney = Number(this.$route.params.price) + Number(this.other);
			// this.add();
			// this.getlogin()
			// 获取参数
			let params = this.getRequestParams();
			let mobile = params['order_no'];
			this.orderno = mobile
			this.getinfo(mobile)
		},
		computed: {
			secondsCom() {
				return this.seconds < 10 ? "0" + this.seconds : this.seconds;
			},
		},
		methods: {
			add() {
				var _this = this;
				_this.istrue = true
				uni.hideLoading()
				var time = window.setInterval(function() {
					if (_this.seconds === 0 && _this.minutes !== 0) {
						_this.seconds = 59;
						_this.minutes -= 1;
					} else if (_this.minutes === 0 && _this.seconds === 0) {
						_this.seconds = 0;
						_this.timeShow = false;
						window.clearInterval(time);
						uni.showModal({
							title: '提示',
							content: '支付已超时！',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定')
									uni.navigateBack({
										delta: 1,
									})
								} else {
									console.log('用户点击取消')
								}
							}
						})
						// alert("支付已超时");
						// uni.navigateBack({
						// 	delta: 1,
						// })
					} else {
						_this.seconds -= 1;
					}
				}, 1000);
			},
			getinfo(mobile) {
				uni.showLoading({
					title: "加载中...",
					icon: "none"
				})
				this.api.getinfoorder({
					order_no: mobile,
				}).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						uni.hideLoading()
						this.info = res.data.data.order
						this.hbs = res.data.data.packet
						this.changs(this.info.count_time)
						this.info.price = Number(this.info.price) + Number(this.info.service_amount)
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			goorder() {
				uni.showLoading({
					title: "支付中..."
				})
				this.api.paym({
					order_no: this.orderno,
					packet_id: this.packet_id
				}).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						uni.hideLoading()
						window.open(res.data.data.h5_url, '_self')
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
				// this.$router.replace({
				// 	name: "order",
				// 	params: {
				// 		paymoney: this.paymoney,
				// 		foods: JSON.stringify(this.foods),
				// 		other: this.other,
				// 	},
				// });
			},
			// 秒钟转分钟
			changs(times) {
				let durationMi = `${parseInt(times / 60)}`
				this.minutes = durationMi
				this.add()
				console.log(durationMi)
			},
			// 联合登陆
			getlogin() {
				uni.showLoading({
					title: "加载中...",
				});
				uni.request({
					url: "http://139.9.58.213:8091/v1/union/a50482b7b61efcf3e272d27cb7d42d38",
					method: "GET",
					data: {
						uid: "uid",
						phone: "18048557688",
						nickname: "啊啊",
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							uni.setStorageSync("token", res.data.data.token);
							uni.navigateTo({
								url: "../web/index?url=" + res.data.data.jump_url,
							});
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon: "none",
							});
						}
					},
				});
			},
			// 参数获取
			getRequestParams() {
				let url = location.href;
				let requestParams = {};
				if (url.indexOf("?") !== -1) {
					let str = url.substr(url.indexOf("?") + 1); //截取?后面的内容作为字符串
					// console.log(str, '?后面的内容');
					let strs = str.split("&"); //将字符串内容以&分隔为一个数组
					// console.log(strs, '以&切割的数组');
					for (let i = 0; i < strs.length; i++) {
						requestParams[strs[i].split("=")[0]] = decodeURI(
							strs[i].split("=")[1]
						);
						// 将数组元素中'='左边的内容作为对象的属性名，'='右边的内容作为对象对应属性的属性值
					}
				}
				return requestParams;
			},
			goredm() {
				if (this.hbs.length == 0) {
					return false
				}
				uni.navigateTo({
					url: "/pages/mt/redm?hbs=" +
						JSON.stringify(this.hbs) + "&&whoindex=" + this.whoindex
				})
			},
			jian(arg2, arg1) {
				var r1, r2, m, n;
				try {
					r1 = arg1.toString().split(".")[1].length
				} catch (e) {
					r1 = 0
				}
				try {
					r2 = arg2.toString().split(".")[1].length
				} catch (e) {
					r2 = 0
				}
				m = Math.pow(10, Math.max(r1, r2));
				//lastmodifybydeeka  
				//动态控制精度长度  
				n = (r1 >= r2) ? r1 : r2;
				return ((arg2 * m - arg1 * m) / m).toFixed(n);
			}
		},
		onShow() {
			if (uni.getStorageSync('who')) {
				this.whoindex = uni.getStorageSync('who')
				this.packet_id = this.hbs[this.whoindex].id
				this.whoname = '已使用红包 -￥' + this.hbs[this.whoindex].balance
				// this.info.price = Number(info.price) - Number(this.hbs[this.whoindex].balance)
				this.info.price = this.jian(this.info.price,this.hbs[this.whoindex].balance)
				uni.removeStorageSync('who')
				console.log(this.info.price)
			}
		},
	};
</script>

<style>
	.contents {
		background: #f5f5f5 !important;
		height: 100vh;
		margin: 0 auto;
	}

	.que {
		width: calc(100% - 50rpx);
	}

	/* @media screen and (max-width: 768px) {
  .contents {
    width: 100%;
  }
  .que {
    width: calc(100% - 25px);
  }
}
@media screen and (min-width: 769px) {
  .contents {
    width: 500px;
  }
    .que {
    width:460px;
  }
} */
	.chooseIcon {
		width: 48rpx;
		height: 48rpx;
		display: inline-block;
		background: url(~@/static/hasSelect1.png) no-repeat;
		background-size: 100%;
	}

	.active {
		width: 48rpx;
		height: 48rpx;
		display: inline-block;
		background: url(~@/static/noselect.png) no-repeat;
		background-size: 100%;
	}
</style>