<template>
	<view v-if="!isLoading" class="container" :style="appThemeStyle">

		<!-- 订单信息 -->
		<view class="order-info">
			<!-- 支付剩余时间 -->
			<view class="order-countdown">
				<text class="m-r-6">剩余时间</text>
				<count-down :date="order.expirationTime" separator="zh" theme="text" />
			</view>
			<!-- 付款金额 -->
			<view class="order-amount">
				<text class="unit">￥</text>
				<text class="amount">{{ 300 + Number(order.pay_price) }}</text>
			</view>
		</view>

		<view class="checkout-item">
			<view class="head-info">
				<view class="title">订单信息</view>
			</view>
			<view class="line"></view>
			<view class="goods-info">
				<image class="image" src="../../../static/order/status/wait_deliver.png" mode="widthFix"></image>
				<view class="goods-info-box">
					<view class="title">云芯威72v50AH锂电池</view>
					<view class="desc">归属门店：白沙店</view>
					<view class="desc">租赁时长：3个月</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="contacts">
				<view class="bms-info">
					<view class="item">
						<text>电池租金：</text>
						<text>300元</text>
					</view>
					<view class="item">
						<text>电池押金：</text>
						<text>300元</text>
					</view>
					<view class="item">
						<text>电池保险：</text>
						<text>30元</text>
					</view>
					<view class="item">
						<text>合计：</text>
						<text class="totao-price">￥{{ 300 + Number(order.pay_price) }}元</text>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="form-license dis-flex flex-x-center flex-y-center">
				<view class="license-radio dis-flex flex-y-center" @click="setIsRead">
					<text class="license-icon f-38 iconfont icon-radio"
						:class="[isRead ? 'c-violet' : 'col-bb']"></text>
					<text class="f-28 col-80">我已阅读并同意</text>
				</view>
				<text @click="handleShowLicense(0)" class="f-28 c-violet f-blue">{{ xieyiText[0] }}</text>
				<text class="f-28 c-violet">与</text>
				<text @click="handleShowLicense(1)" class="f-28 c-violet f-blue">{{ xieyiText[1] }}</text>
			</view>
		</view>

		<!-- 支付方式 -->
		<view class="payment-method">
			<view v-for="(item, index) in methods" :key="index" class="pay-item dis-flex flex-x-between"
				@click="handleSelectPayType(index)">
				<view class="item-left dis-flex flex-y-center">
					<view class="item-left_icon" :class="[item.method]">
						<text class="iconfont" :class="[PayMethodIconEnum[item.method]]"></text>
					</view>
					<view class="item-left_text">
						<text>{{ PayMethodEnum[item.method].name }}</text>
					</view>
					<view v-if="item.method === PayMethodEnum.BALANCE.value" class="user-balance">
						<text>(可用￥{{ personal.balance }}元)</text>
					</view>
				</view>
				<view class="item-right col-m" v-if="curPaymentItem && curPaymentItem.method == item.method">
					<text class="iconfont icon-check"></text>
				</view>
			</view>
		</view>

		<!-- 确认按钮 -->
		<view class="footer-fixed">
			<view class="btn-wrapper">
				<view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">确认支付</view>
			</view>
		</view>

		<!-- 支付确认弹窗 -->
		<!-- #ifdef H5 -->
		<u-modal v-if="tempUnifyData" v-model="showConfirmModal" title="支付确认" show-cancel-button confirm-text="已完成支付"
			:confirm-color="appTheme.mainBg" negative-top="100" :asyncClose="true"
			@confirm="onTradeQuery(tempUnifyData.outTradeNo, tempUnifyData.method)">
			<view class="modal-content">
				<text>请在{{ PayMethodClientNameEnum[tempUnifyData.method] }}内完成支付，如果您已经支付成功，请点击“已完成支付”按钮</text>
			</view>
		</u-modal>
		<!-- #endif -->

		<!-- 入驻协议弹窗 -->
		<u-modal v-model="showLicense" :title="xieyiText[showConfirmIndex]">
			<scroll-view class="pops-content" :scroll-y="true">
				<text v-if="showConfirmIndex == 0">{{ license }}</text>
				<text v-if="showConfirmIndex == 1">{{ license1 }}</text>
			</scroll-view>
		</u-modal>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import {
		inArray,
		urlEncode
	} from '@/utils/util'
	import {
		Alipay,
		Wechat
	} from '@/core/payment'
	import CountDown from '@/components/countdown'
	import {
		PayMethodEnum
	} from '@/common/enum/payment'
	import {
		PayStatusEnum
	} from '@/common/enum/order'
	import * as Api from '@/api/solution/cashier.js'
	import SettingModel from '@/common/model/dealer/Setting'

	// 支付方式对应的图标
	const PayMethodIconEnum = {
		[PayMethodEnum.WECHAT.value]: 'icon-wechat-pay',
		[PayMethodEnum.ALIPAY.value]: 'icon-alipay',
		[PayMethodEnum.BALANCE.value]: 'icon-balance-pay'
	}

	// 支付方式的终端名称
	const PayMethodClientNameEnum = {
		[PayMethodEnum.WECHAT.value]: '微信',
		[PayMethodEnum.ALIPAY.value]: '支付宝'
	}

	export default {
		components: {
			CountDown
		},
		data() {
			return {
				// 加载中
				isLoading: true,
				// 确认按钮禁用
				disabled: true,
				// 枚举类
				PayMethodEnum,
				PayMethodIconEnum,
				PayMethodClientNameEnum,
				// 当前选中的支付方式
				curPaymentItem: null,
				// 当前订单ID
				orderId: null,
				// 当前结算订单信息
				order: {},
				// 显示入驻协议弹窗
				showLicense: false,
				// 个人信息
				personal: {
					balance: '0.00'
				},
				// 入驻协议阅读状态
				isRead: false,
				// 当前客户端的支付方式列表（后端根据platform判断）
				methods: [],
				setting: {},
				// 文字设置
				words: undefined,
				// 显示入驻协议弹窗
				// 租赁服务协议
				license: undefined,
				// 隐私协议
				license1: undefined,
				// 支付确认弹窗
				showConfirmModal: false,
				showConfirmIndex: 0,
				xieyiText: ["《租赁协议》", "《隐私协议》"],
				// #ifdef H5
				// 当前微信支付信息 (临时数据, 仅用于H5端)
				tempUnifyData: {
					outTradeNo: '',
					method: ''
				},
				// #endif
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad({
			orderId
		}) {
			// 记录订单ID
			this.orderId = Number(orderId)
			// 获取收银台信息
			this.getCashierInfo()
			// 获取设置信息
			this.getSetting()
		},

		methods: {

			// 获取分销设置
			getSetting() {
				const app = this
				SettingModel.data()
					.then(setting => {
						// 赋值属性
						app.words = setting.words.apply.words
						app.background = setting.background.apply
						app.license = setting.license.license
						app.license1 = setting.license.license1
						// 设置当前页面标题
						app.setPageTitle(setting.words.apply.title)
					})
			},

			// 获取收银台信息
			getCashierInfo() {
				const app = this
				app.isLoading = true
				Api.orderInfo()
					.then(result => {
						app.order = result.data.order
						app.personal = result.data.personal
						app.methods = result.data.paymentMethods
						app.isLoading = false
						app.setDefaultPayType()
						app.checkOrderPayStatus()
						// #ifdef H5
						// 判断当前页面来源于浏览器返回
						this.performance()
						// #endif
					})
			},

			// 设置默认的支付方式
			setDefaultPayType() {
				const app = this
				if (app.disabled) return
				const defaultIndex = app.methods.findIndex(item => item.is_default == true)
				defaultIndex > -1 && app.handleSelectPayType(defaultIndex)
			},

			// 判断当前订单是否为已支付
			checkOrderPayStatus() {
				const app = this
				if (app.order.pay_status == PayStatusEnum.SUCCESS.value) {
					app.$toast('恭喜您，订单已付款成功')
					app.onSuccessNav()
				}
			},

			// 显示入驻协议弹窗
			handleShowLicense(index) {
				this.showLicense = true
				this.showConfirmIndex = index
			},

			// 选择支付方式
			handleSelectPayType(index) {
				this.curPaymentItem = this.methods[index]
			},

			// 判断当前页面来源于浏览器返回
			// #ifdef H5
			performance() {
				const app = this
				// 判断订单状态, 异步回调会将订单状态变为已支付, 那么就不需要让用户手动查单了
				if (app.order.pay_status == PayStatusEnum.PENDING.value) {
					app.alipayPerformance()
					app.wechatPerformance()
				}
			},

			// H5端支付宝支付完成跳转回当前页面时触发
			alipayPerformance() {
				const app = this
				app.tempUnifyData = Alipay.performance()
				if (app.tempUnifyData) {
					app.onTradeQuery(app.tempUnifyData.outTradeNo, app.tempUnifyData.method)
				}
			},

			// H5端微信支付完成或返回时触发
			wechatPerformance() {
				const app = this
				app.tempUnifyData = Wechat.performance(app.orderId)
				if (app.tempUnifyData) {
					app.showConfirmModal = true
				}
			},
			// #endif

			// 确认支付
			handleSubmit() {
				const app = this
				// 判断是否选择了支付方式
				if (!app.curPaymentItem) {
					app.$toast('您还没有同意租赁协议或选择支付方式')
					return
				}
				// 按钮禁用
				if (app.disabled) return
				app.disabled = true
				// 提交到后端API
				Api.orderPay(app.orderId, {
						method: app.curPaymentItem.method,
						client: app.platform,
						extra: app.getExtraAsUnify(app.curPaymentItem.method)
					})
					.then(result => app.onSubmitCallback(result))
					.finally(err => {
						setTimeout(() => app.disabled = false, 10)
					})
			},

			// 获取第三方支付的扩展参数
			getExtraAsUnify(method) {
				if (method === PayMethodEnum.ALIPAY.value) {
					return Alipay.extraAsUnify()
				}
				if (method === PayMethodEnum.WECHAT.value) {
					return Wechat.extraAsUnify()
				}
				return {}
			},

			// 订单提交成功后回调
			onSubmitCallback(result) {
				const app = this
				const method = app.curPaymentItem.method
				const paymentData = result.data.payment
				// 余额支付
				if (method === PayMethodEnum.BALANCE.value) {
					app.onShowSuccess(result)
				}
				// 发起支付宝支付
				if (method === PayMethodEnum.ALIPAY.value) {
					console.log('paymentData', paymentData)
					Alipay.payment(paymentData)
						.then(res => app.onPaySuccess(res))
						.catch(err => app.onPayFail(err))
				}
				// 发起微信支付
				if (method === PayMethodEnum.WECHAT.value) {
					console.log('paymentData', paymentData)
					Wechat.payment({
							orderKey: app.orderId,
							...paymentData
						})
						.then(res => app.onPaySuccess(res))
						.catch(err => app.onPayFail(err))
				}
			},

			// 订单支付成功的回调方法
			// 这里只是前端支付api返回结果success,实际订单是否支付成功 以后端的查单和异步通知为准
			onPaySuccess({
				res,
				option: {
					isRequireQuery,
					outTradeNo,
					method
				}
			}) {
				const app = this
				// 判断是否需要主动查单
				// isRequireQuery为true代表需要主动查单
				if (isRequireQuery) {
					app.onTradeQuery(outTradeNo, method)
					return true
				}
				this.onShowSuccess(res)
			},

			// 显示支付成功信息并页面跳转
			onShowSuccess({
				message
			}) {
				this.$toast(message || '订单支付成功')
				this.onSuccessNav()
			},
			
			setIsRead(){
				this.isRead = true
				this.disabled = false
			},

			// 订单支付失败
			onPayFail(err) {
				console.log('onPayFail', err)
				const errMsg = err.message || '订单未支付'
				this.$error(errMsg)
			},

			// 已完成支付按钮事件: 请求后端查单
			onTradeQuery(outTradeNo, method) {
				const app = this
				// 交易查询
				// 查询第三方支付订单是否付款成功
				Api.tradeQuery({
						outTradeNo,
						method,
						client: app.platform
					})
					.then(result => result.data.isPay ? app.onShowSuccess(result) : app.onPayFail(result))
					.finally(() => app.showConfirmModal = false)
			},

			// 支付成功后的跳转
			onSuccessNav() {
				const pages = getCurrentPages()
				const lastPage = pages.length < 2 ? null : pages[pages.length - 2]
				const backRoutes = [
					// 'package/equipment/index',
					'package/equipment/detail'
				]
				if (lastPage && inArray(lastPage.route, backRoutes)) {
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				} else {
					setTimeout(() => {
						this.$navTo('pages/order/index', {}, 'redirectTo')
					}, 1200)
				}
			},

		}
	}
</script>

<style>
	page {
		background: #F4F4F4;
	}
</style>
<style lang="scss" scoped>
	.container {
		background-color: #F4F4F4;
	}

	// 订单信息
	.order-info {
		padding: 80rpx 0;
		text-align: center;

		.order-countdown {
			display: flex;
			justify-content: center;
			font-size: 26rpx;
			color: #666666;
			margin-bottom: 20rpx;
		}

		.order-amount {
			margin: 0 auto;
			max-width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #111111;

			.unit {
				font-size: 30rpx;
				margin-bottom: -18rpx;
			}

			.amount {
				font-size: 56rpx;
			}
		}
	}

	// 支付方式
	.payment-method {
		width: 94%;
		margin: 0 auto 20rpx auto;
		padding: 0 40rpx;
		background-color: #ffffff;
		border-radius: 20rpx;

		.pay-item {
			padding: 26rpx 0;
			font-size: 28rpx;
			border-bottom: 1rpx solid rgb(248, 248, 248);

			&:last-child {
				border-bottom: none;
			}

			.item-left_icon {
				margin-right: 20rpx;
				font-size: 44rpx;

				&.wechat {
					color: #00c800;
				}

				&.alipay {
					color: #009fe8;
				}

				&.balance {
					color: #ff9700;
				}
			}

			.item-left_text {
				font-size: 28rpx;
			}

			.item-right {
				font-size: 32rpx;
			}

			.user-balance {
				margin-left: 20rpx;
				font-size: 26rpx;
			}
		}

	}


	// 支付确认弹窗
	.modal-content {
		padding: 40rpx 48rpx;
		font-size: 30rpx;
		line-height: 50rpx;
		text-align: left;
		color: #606266;
		// height: 620rpx;
		box-sizing: border-box;
	}


	// 底部操作栏
	.footer-fixed {
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		z-index: 11;
		box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
		background: #fff;

		// 设置ios刘海屏底部横线安全区域
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.btn-wrapper {
			height: 120rpx;
			display: flex;
			align-items: center;
			padding: 0 40rpx;
		}

		.btn-item {
			flex: 1;
			font-size: 28rpx;
			height: 80rpx;
			color: #fff;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn-item-main {
			background: linear-gradient(to right, $main-bg, $main-bg2);

			// 禁用按钮
			&.disabled {
				opacity: 0.6;
			}
		}

	}

	// 项目内容
	.checkout-item {
		margin: 0 auto 20rpx auto;
		padding: 30rpx 40rpx;
		width: 94%;
		box-shadow: 0 1rpx 5rpx 0 rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		background: #fff;

		.title {
			display: flex;
			justify-content: space-between;
		}

		.head-info {
			width: 750rpx;
			margin: auto;
			display: felx;
			flex-direction: column;

			.title {
				font-weight: bold;
				font-size: 34rpx;
			}

			.description {
				padding: 10rpx 0;
				font-size: 30rpx;
				color: #999999;
			}
		}

		.line {
			margin: 20rpx 0;
			border-bottom: 1rpx solid #f3f3f3;
		}

		.goods-info {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.image {
				width: 90rpx;
				height: 90rpx;
				padding: 10rpx;
			}
			
			.goods-info-box{
				margin-left: 20rpx;
				.title{
					font-weight: bold;
					font-size: 38rpx;
					margin-bottom: 10rpx;
				}
				.desc{
					color: #999999;
				}
			}
		}

		.contacts {
			margin-bottom: 16rpx;
			display: flex;
			justify-content: space-between;


			.bms-info {
				display: flex;
				flex-direction: column;
				width: 96%;

				.item {
					margin-bottom: 10rpx;
					display: flex;
					justify-content: space-between;
				}

				.name {
					margin-right: 16rpx;
				}

				.totao-price {
					color: #ff0000;
				}
			}

			.bms-image {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				width: 120rpx;

				.bms-image-box {
					display: flex;
					font-size: 22rpx;
					margin-bottom: 18rpx;
					color: #00af00;

					.bms-image-fbf {
						margin-top: 22rpx;
					}
				}

				.image {
					width: 50rpx;
					height: 60rpx;
				}
			}
		}
	}

	.f-blue {
		color: #3f6fc1;
	}

	.c-violet {
		color: #786cff;
	}

	.col-bb {
		color: #bbb;
	}
</style>
