<template>
	<view>
		<Head title='确认订单' isfanhui="true" />
		<view class="zhanwei"></view>
		<view class="shouhuo">
			<text style="font-size: 30rpx;">应付金额</text>
			<view style="color: #ffffff;font-size: 50rpx;font-weight: bold;margin: 15rpx 0;"><tetx style='font-size: 26rpx;'>￥</tetx>1280.00</view>
			<text style="font-size: 26rpx;">支付剩余时间00:{{min}}:{{sec}}</text>
		</view>
		<text class="titletext">选择支付方式</text>
		<view class="xuan_box">
			<view>
				<view class="xuan_box_rigth">
					<image class="tb" src="../../static/wx.png" mode=""></image>
					<text>微信支付</text>
				</view>
				<view class="gouxuan" @click="qiehuan(1)">
					<image v-if="paytype==1" src="../../static/yixuan.png"></image>
					<image v-if="paytype==2" src="../../static/weixuan.png"></image>
				</view>
			</view>
			<!-- 支付宝支付暂时注释 -->
			<!-- <view>
				<view class="xuan_box_rigth">
					<image class="tb" src="../../static/zfb.png" mode=""></image>
					<text>支付宝</text>
				</view>
				<view class="gouxuan" @click="qiehuan(2)">
					<image v-if="paytype==1" src="../../static/weixuan.png"></image>
					<image v-if="paytype==2" src="../../static/yixuan.png"></image>
				</view>
			</view> -->
		</view>
		<view class="button" @click="zhifu">
			确认支付
		</view>
	</view>
</template>

<script>
	import Head from '@/components/head/head.vue'
	export default {
		components: {
			Head
		},
		data() {
			return {
				min: 30,
				sec: 0,
				now: "",
				end: "",
				paytype:1
			}
		},
		onLoad: function() {
			this.end = new Date().getTime() + 30 * 60 * 1000;
			this.timeDown();
		},
		methods: {
			//倒计时
			timeDown() {
				this.now = new Date().getTime();
				if (this.now >= this.end) {
					this.min = 0;
					this.sec = 0;
					alert("已经超时，订单已经取消");
					this.$router.back();
					return;
				}
				// 用结束时间戳减去当前时间
				const msec = this.end - this.now;
				let min = parseInt(msec / 1000 / 60); //算出分钟数
				let sec = parseInt((msec / 1000) % 60); //算出秒数
				// 给数据赋值
				this.min = min > 9 ? min : "0" + min;
				this.sec = sec > 9 ? sec : "0" + sec;
				//定义this指向
				const that = this;
				// 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
				setTimeout(function() {
					that.timeDown();
				}, 1000);
			},
			//切换支付方式，预留
			qiehuan(val){
				this.paytype=val
			},
			//支付请求
			zhifu(){
				uni.navigateTo({
					url:'../paysuccess/paysuccess'
				})
			}
		}
	}
</script>

<style lang="scss">
	.gouxuan{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		>image{
			width: 50rpx;
			height: 50rpx;
		}
	}
	.xuan_box{
		width: 690rpx;
		padding:10rpx 30rpx;
		box-sizing: border-box;
		background-color: #262626;
		margin: auto;
		margin-top: 50rpx;
		border-radius: 15rpx;
		>view{
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
		}
		.tb{
			width: 60rpx;
			height: 60rpx;
		}
		.xuan_box_rigth{
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			>text{
				margin-left: 30rpx;
			}
		}
	}
	.titletext{
		color: #ffffff;
		font-size: 30rpx;
		margin-left: 30rpx;
		margin-top: 50rpx;
		margin-bottom: 50rpx;
	}
	.button {
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 80rpx;
		margin: auto;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		border-radius: 40rpx;
		background: #77A1D3;
		/* fallback for old browsers */
		background: -webkit-linear-gradient(to right, #e4b3e8, #5dfef4);
		/* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to right, #e4b3e8, #5dfef4);
		/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	}

	
	.zhanwei {
		margin-top: 150rpx;
	}

	.shouhuo {
		width: 690rpx;
		background-color: #262626;
		padding: 30rpx;
		box-sizing: border-box;
		margin: auto;
		margin-bottom: 50rpx;
		border-radius: 15rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #bdbdbd;

		>image {
			width: 50rpx;
			height: 50rpx;
			margin-bottom: 15rpx;
		}
	}

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