<template>
	<view class="content">
		<view class="bk-top"></view>
		<view class="order-card">
			<view class="order-title">
				<text class="order-title-text">订单详情</text>
			</view>
			<view class="commodity-list" v-for="(commodity,index) in commdodiryList" :key="index">
				<text class="commodity-name">{{ commodity.commodityName }}</text> 
				<text class="commodity-name-en">{{ commodity.commodityNameEn }}</text>
				<text class="commodity-number">x{{ commodity.number }}</text>
				<text class="commodity-money">￥{{ commodity.money }}</text>
			</view>
			<view class="order-hr"></view>
			<view class="order-all-money">
				<text class="all-money">￥{{ order.money == undefined ? 0 : order.money }}</text>
				<text class="all-money-remark">合计</text>
			</view>
			<view class="bk-on"></view>
			 <radio-group @change="radioChange">
				<view class="pay-way">
					<view class="pay-way-view">
						<icon class="iconfont iconwallet i-iconwallet" :class="iconwallet"></icon>
						<text class="pay-name" :class="payNameColor">余额支付</text>
						<text class="pay-money" :class="payNameColor">（剩余：￥{{ money }}）</text>
						<text class="pay-money pay-name-no" v-if="!userMoneyOK">余额不足</text>
						<radio value="userPay" class="pay-radio" v-if="userMoneyOK" color="#8ADE4D" />
					</view>
				</view>
				<view class="pay-way">
					<view class="pay-way-view pay-way-view-no">
						<icon class="iconfont iconzfbpay i-iconwallet i-iconwechatpay"></icon>
						<text class="pay-name pay-name-yes">支付宝支付</text>
						<radio value="aliApy" class="pay-radio" :checked="true" color="#8ADE4D" />
					</view>
				</view>
			</radio-group>
		</view>
		<view class="order-bottom">
			<text class="bottom-all-money">合计：￥{{ order.money == undefined ? 0 : order.money }}</text>
			<button class="to-pay" :class="toPayColor" @click="toPay">去支付（{{ order.number === undefined ? 0 : order.number }}）</button>
		</view>
	</view>
</template>
<script>
	import {getOrderInfo,unifiedOrder,useUserPay,pay} from '@/api/index/index.js'
	
	// document.title = '确认订单'
	
	export default {
		data() {
			return {
				commdodiryList: [],
				money: 0,
				order: {},
				userId: '',
				sysOpenId: '',
				code: '',
				openId: '',
				wxPayResult: {},
				isPay: false,
				iconwallet: 'i-iconwallet-no',
				payNameColor: 'pay-name-no',
				userMoneyOK: false,
				toPayColor: 'to-pay-no',
				isOrder: false,
				payWay: 'aliApy',
				isPaySuccess: false
			}
		},
		onLoad(param) {
			this.userId = param.userId
			this.sysOpenId = param.sysOpenId
			 // this.userId = '59c7808b-c098-41ca-abe0-e2035ce39f78'
			 // this.sysOpenId = 'oMt0N5KE4QbBPvovuJt6OrIk_wuI'
			this.getOrderInfo()
		},
		methods: {
			radioChange(event){
				this.payWay = event.detail.value
			},
			toPay(){
				if(this.isOrder){
					if(!this.isPaySuccess){
						if(this.payWay == 'aliApy'){
							this.aliApy()
						}else if(this.payWay == 'userPay'){
							this.useUserPay()
						}else {
							uni.showToast({
								title: '请选择支付方式',
								icon: 'none'
							})
						}
					}else {
						uni.showToast({
							title: '请勿重复提交订单',
							icon: 'none'
						})
					}
				}else {
					uni.showToast({
						title: '数据加载中',
						icon: 'none'
					})
				}
			},
			aliApy(){
				let body = ''
				for(var i = 0; i < this.commdodiryList; i++){
					body = body + this.commdodiryList[i].commodityName
				}
				let query = {
					outTradeNo: this.order.orderId,
					subject: '商品',
					totalAmount: this.order.money,
					body: body
				}
				pay(query).then(res=>{
					document.querySelector('body').innerHTML = res
					document.forms[0].submit()
				})
			},
			useUserPay(){
				let query = {
					sysOpenId: this.sysOpenId,
					userId: this.userId
				}
				useUserPay(query).then(res=>{
					if(res.success){
						uni.showToast({
							title: '付款成功',
							icon: 'success'
						})
						this.isPaySuccess = true
						this.toreLaunchPage()
					}else {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
					}
				})
			},
			getOrderInfo(){
				let query = {
					userId: this.userId
				}
				getOrderInfo(query).then(res=>{
					this.sysOpenId = res
					if(res.success){
						this.order = res.data.order
						this.commdodiryList = res.data.order.orderCommodityList
						this.money = res.data.money
						if(this.order.money != undefined && this.order.money > 0){
							this.isOrder = true
							this.toPayColor = 'to-pay-yes'
							if(this.order.money <= this.money){
								this.iconwallet = 'i-iconwallet-yes'
								this.payNameColor = 'pay-name-yes'
								this.userMoneyOK = true
							}
						}
					}
				})
			},
			toreLaunchPage(){
				let vm = this
				uni.reLaunch({
					url: '/pages/pay-ok/pay-ok?money=' + vm.order.money
				});
			}
		}
	}
</script>

<style>
	
	page {
		background: #FFFFFF;
	}
	
	.content {
		width: 750upx;
		width: 750upx;
	}
	
	.bk-top {
		background: #F7F7F7;
		width: 750upx;
		height: 10.41upx;
	}
	
	.order-card {
		width: 750upx;
		width: 100%;
		margin-bottom: 625upx;
	}
	
	.order-title {
		height: 97.91upx;
		width: 750upx;
	}
	
	.order-title-text {
		height:45.83upx;
		font-size:33.33upx;
		font-family:PingFangSC-Regular;
		font-weight:700;
		color:rgba(17,17,17,1);
		line-height:45.83upx;
		margin-top: 31.25upx;
		margin-left: 31.25upx;
		float: left;
	}
	
	.commodity-list {
		width: 750upx;
		height: 118.75upx;
		position: relative;
	}
	
	.commodity-name {
		height:41.66upx;
		font-size:29.16upx;
		font-family:PingFangSC-Semibold;
		font-weight:700;
		color:rgba(17,17,17,1);
		line-height:41.66upx;
		position: absolute;
		left: 41.66upx;
		top: 0;
	}
	
	.commodity-name-en {
		height:29.16upx;
		font-size:25upx;
		font-family:PingFangSC-Regular;
		font-weight:400;
		color: #333333;
		line-height:29.16upx;
		position: absolute;
		left: 41.66upx;
		top: 47.91upx; 
	}
	
	.commodity-number {
		height:35.41upx;
		font-size:25upx;
		font-family:PingFangSC-Regular;
		font-weight:400;
		color:rgba(17,17,17,1);
		line-height:35.41upx;
		position: absolute;
		left: 550upx;
		top: 52.08upx;
	}
	
	.commodity-money {
		height:35.41upx;
		font-size:25upx;
		font-family:PingFangSC-Regular;
		font-weight:700;
		color:rgba(17,17,17,1);
		line-height:35.41upx;
		position: absolute;
		right: 31.25upx;
		top: 52.08upx; 
	}
	
	.order-hr {
		width:687.5upx;
		height:2.08upx;
		margin-left: 31.25upx;
		background: #F0F0F0;
	}
	
	.order-all-money {
		width: 750upx;
		height: 45.83upx;
		margin-top: 29.16upx;
	}
	
	.all-money-remark {
		height:33.33upx;
		font-size:22.91upx;
		font-family:PingFangSC-Regular;
		font-weight:400;
		color:rgba(17,17,17,1);
		line-height:33.33upx;
		margin-top: 37.5upx;
		margin-right: 12.5upx;
		float: right;
	}
	
	.all-money {
		height:45.83upx;
		font-size:33.33upx;
		font-family:PingFangSC-Medium;
		font-weight:700;
		color:rgba(17,17,17,1);
		line-height:45.83upx;
		margin-top: 29.16upx;
		margin-right: 31.25upx;
		float: right;
	}
	
	.order-bottom {
		width: 750upx;
		height: 112.5upx;
		border-top: 4.16upx solid #EFEFEF;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
	}
	
	.bottom-all-money {
		height:112.5upx;
		font-size:33.33upx;
		font-family:PingFangSC-Medium;
		font-weight:650;
		color:rgba(17,17,17,1);
		line-height:112.5upx;
		margin-left: 20.83upx;
	}
	
	.to-pay {
		padding: 0;
		margin: 0;
		border: 0 solid #38ADFF !important;
		width:281.25upx;
		height:114.58upx;
		margin-top: -2.08upx;
		line-height: 114.58upx;
		float: right;
		border-radius: 0;
		font-size:37.5upx;
		font-family:PingFangSC-Medium;
		color: #FFFFFF;
		font-weight:500;
	}
	
	.to-pay-no {
		background: #98D4FF;
	}
	
	.to-pay-yes {
		background: #38ADFF;
	}
	 
	.to-pay:after {
		border: 0 solid #38ADFF !important;
	}
	
	.bk-on {
		width:750upx;
		height:20.83upx;
		background:rgba(247,247,247,1);
		margin-top: 47.91upx;
	}
	
	.pay-way {
		width: 750upx;
		height: 102.08upx;
	}
	
	.pay-way-view {
		width: 687.5upx;
		height: 102.08upx;
		margin-left: 31.25upx;
		border-bottom: 2.08upx solid #F0F0F0;
	}
	
	.pay-way-view-no {
		border-bottom: 0upx;
	}
	
	.i-iconwallet {
		width:35.41upx;
		height:41.66upx;
		font-size: 39.58upx;
		line-height: 102.08upx;
	}
	
	.i-iconwallet-yes {
		color: #FD9B2F;
	}
	
	.i-iconwallet-no {
		color: #FFCD97;
	}
	
	.pay-name {
		font-size:29.16upx;
		font-family:PingFangSC-Regular;
		font-weight:400;
		line-height:102.08upx;
		margin-left: 35.41upx;
	}
	
	.pay-name-yes {
		color: #111111;
	}
	
	.pay-name-no {
		color: #C3C3C3;
	}
	
	.pay-money {
		font-size:25upx;
		font-family:PingFangSC-Regular;
		font-weight:400;
		line-height:102.08upx;
		margin-left: 4.16upx;
	}
	
	.pay-radio {
		text-align: center;
		line-height: 102.08upx;
		float: right;
		transform:scale(0.8)
	}
	
	.i-iconwechatpay {
		color: #1AACEB;
	}

</style>
