<template>
	<view class="container">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- <z-nav-bar title="我的订单"></z-nav-bar> -->
		<z-nav-bar title="充值详情"></z-nav-bar>

		<view class="leve1">
			<view class="item flexbox" v-if="orderDetail.orderStatus == 3">
				<view class="">
					<view class="img">
						<image @click="" style="width: 120rpx; height: 120rpx; margin-top: 0;" class=""
							src="/static/icon/cgts.png" mode="aspectFill"></image>
					</view>
					<view class="txt">
						<text>充值成功</text>
					</view>
					<view class="">
						<text style="font-size: 30rpx;">充值金额：</text><text style=" color: #ff5500;">￥</text>
						<text class="price">{{orderDetail.orderPrice}}</text>
					</view>
				</view>
			</view>
			<view class="item flexbox" v-if="orderDetail.orderStatus == 0">
				<view class="">
					<view class="img">
						<image @click="" style="width: 120rpx; height: 120rpx; margin-top: 0;" class=""
							src="/static/icon/noPay.png" mode="aspectFill"></image>
					</view>
					<view class="txt">
						<text>待付款</text>
					</view>
					<view class="">
						<text style="font-size: 30rpx;">充值金额：</text><text style=" color: #ff5500;">￥</text>
						<text class="price">{{orderDetail.orderPrice}}</text>
					</view>
				</view>
			</view>
			<view class="item flexbox" v-if="orderDetail.orderStatus > 3">
				<view class="">
					<view class="img">
						<image @click="" style="width: 120rpx; height: 120rpx; margin-top: 0;" class=""
							src="/static/icon/fail.png" mode="aspectFill"></image>
					</view>
					<view class="txt">
						<text>充值失败</text>
					</view>
					<view class="">
						<text style="font-size: 30rpx;">充值金额：</text><text style=" color: #ff5500;">￥</text>
						<text class="price">{{orderDetail.orderPrice}}</text>
					</view>
				</view>
			</view>
			<view class="leve2">				
				<view class="times">
					<view class="flexbox">
						<text>订单编号：</text><text>{{orderDetail.orderSn}}</text>
					</view>
					<view class="flexbox">
						<text>订单创建时间：</text><text>{{orderDetail.createTime}}</text>
					</view>
					<view class="flexbox"  v-if="orderDetail.orderStatus > 0">
						<text>到账时间：</text><text>{{orderDetail.createTime}}</text>
					</view>
				</view>
			</view>
			<view class="leve3 flexbox">
				<view class="item">
					<button v-if="orderDetail.orderStatus == 3" @click="goHome" class="mini-btn" type="primary" style="backgroundColor:#1AAD19;borderColor:#1AAD19" >完成</button>					
					<button v-if="orderDetail.orderStatus == 0" @click="goPay" class="mini-btn" type="warn"  >去支付</button>
				</view>
				<view class="item" v-if="orderDetail.orderStatus == 3">
					<button class="mini-btn" type="primary" @click="goCharge">继续充值</button>
				</view>
			</view>
		</view>
		<z-navigation></z-navigation>
		<music-play :playData="playData"></music-play>
	</view>
</template>

<script>
	import {
		setPay,
		setPayAssign,
		setWXPay
	} from '@/config/utils';
	import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},
				orderId: null,
				orderSn: '',
				orderDetail: {},
				titleStat: '',
			}
		},
		onLoad(e) {
			this.orderId = e.orderId
			this.orderSn = e.orderSn
		},
		onShow() {
			this.getOrderDetail()
		},
		components: {
			musicPlay
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			// 支付
			goPay() {
				let payItem = this.orderDetail
				console.log(payItem, 'payItem')
				if (payItem.paymentMethod == 2) {
					console.log('阿里支付')
					setPay({
						typePay: 'alipay',
						subject: 'order',
						totalAmount: payItem.realMoney,
						type: 2,
						relevanceoid: payItem.orderSn,
						customerId: this.userInfo.id,
					}, res => {
						if (res.success) {
							uni.showToast({
								title: "支付成功"
							});
							setTimeout(()=>{
								uni.navigateTo({
									url:'/pages/user/persCount'
								})
							},2000)
						} else {
							uni.showToast({
								title: "支付失败",
								icon: "none",
								image: '../../static/icon/ic_close.png'
							});
						}						
						this.getOrderDetail()
					})
				} else if (payItem.paymentMethod == 1) {
					console.log('微信支付')
					// console.log(this.isAndorid)				
					if (this.isAndorid == false) {
						uni.showModal({
							title: '提示',
							content: '很抱歉，苹果系统暂不支持微信支付',
							showCancel: false
						})
						return false
					} else {
						let data1 = {
							orderSn: payItem.orderSn,
							buyOrderId: null,
							totalAmount: payItem.realMoney
						}
						console.log(data1, 'data1')
						setWXPay(data1, res => {
							if (res.success) {
								uni.showToast({
									title: "支付成功"
								});
								setTimeout(()=>{
									uni.navigateTo({
										url:'/pages/user/persCount'
									})
								},2000)
							} else {
								console.log(res)
								if (res.data.errMsg.indexOf('User canceled') != -1) {
									uni.showToast({
										title: "用户取消支付",
										icon: "none",
										image: '../../static/icon/ic_close.png'
									});
								} else {
									uni.showToast({
										title: "支付失败",
										icon: "none",
										image: '../../static/icon/ic_close.png'
									});
								}
							}
						})
					}
				} else if (payItem.paymentMethod == 3) {
					// 苹果充值
					console.log('苹果二次支付')
					if (this.isAndorid) {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '很抱歉，当前订单属于苹果系统内购订单，安卓系统无法完成支付操作，您可切换到苹果系统进行支付，也可以取消该订单，并重新下单'
						})
					} else {
						// this.iphonepay(payItem)
					}
				}
			},
			goCharge(){
				uni.navigateTo({
					url:'./reCharge'
				})
			},
			goHome(){
				uni.switchTab({
					url:'/pages/peanut/home'
				})
			},
			getOrderDetail() {
				this.$http
					.get(`/book/buyOrder/orderDetail?orderSn=${this.orderSn}`)
					.then(res => {
						console.log('订单详情', res)
						this.orderDetail = res.result
						this.consigneeShow = true
						// console.log(this.orderContet,'this.orderContet')
						if (this.orderDetail.orderStatus == 0) {
							this.titleStat = '待支付'
						} else if (this.orderDetail.orderStatus == 1) {
							this.titleStat = '待发货'
						} else if (this.orderDetail.orderStatus == 2) {
							this.titleStat = '待收货'
						} else if (this.orderDetail.orderStatus == 3) {
							this.titleStat = '已完成'
						}

					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flexbox{display: flex;}
	.container {
		height: 100vh;
		background-color: #fff;
		padding: 10rpx;
	}

	.leve1 {
		.item {
			text-align: center;
			height: 400rpx;
			    justify-content: center;
			    align-items: center;
			.txt{margin-bottom: 20rpx;}
			.price{font-size: 50rpx; color: #ff5500; }
			.img { margin-bottom: 20rpx;
				image {
					margin: 0 auto;
				}
			}
		}
	}
	.leve2{ text-align: center; font-size: 30rpx;
		
		.times{ padding: 20rpx; font-size: 28rpx; line-height: 60rpx;
			.flexbox{width: 100%; justify-content:space-between;}
		}
	}
	.leve3{width: 100%; justify-content: space-around; margin-top: 50rpx;
	.item{width: 40%;}
	}
</style>