<template>
	<view class="box">
		<view class="box1" v-if="trainList">
			<trainFold title="科目费用" :cost="projectCost" :text="trainList.length + '项'">
				<view class="conter-liner" v-for="item in trainList" :key="item.id">
					<view class="liner-left">{{ item.projectName }}</view>
					<view class="liner-right">{{ item.cost }}元</view>
				</view>
			</trainFold>
		</view>
		<view class="box1" v-if="trainList">
			<trainFold title="考试费用" :cost="examCost" :text="insuranceList.length + '项'">
				<view class="conter-liner" v-for="item in insuranceList" :key="item.id">
					<view class="liner-left">{{ item.projectName }}</view>
					<view class="liner-right">{{ item.cost }}元</view>
				</view>
			</trainFold>
		</view>
		<view class="box1" v-if="hotelList">
			<trainFold title="食宿费用" :cost="accommodationCost" :text="nights + '晚'">
				<view class="conter-liner" v-for="item in hotelList" :key="item.id">
					<view class="liner-left">{{ item.name }}</view>
					<view class="liner-right">{{ item.spend }}元</view>
				</view>
			</trainFold>
		</view>
		<view class="box1" v-if="otherList">
			<trainFold title="其他费用" :cost="otherCost" :text="otherList.length + '项'">
				<view class="conter-liner" v-for="item in otherList" :key="item.id">
					<view class="liner-left">{{ item.name }}</view>
					<view class="liner-right">{{ item.spend }}元</view>
				</view>
			</trainFold>
		</view>
		<view class="box2">
			<view class="text">支付方式</view>
			<view class="conter">
				<view>
					<radio-group @change="radioChange">
						<label class="radio">
							<view class="radio-cost">
								<view class="left"><image class="image" src="@/static/zf01.png"></image></view>
								<view class="radio-right">微信支付</view>
							</view>
							<radio value="0" class="check" />
						</label>
						<label class="radio">
							<view class="radio-cost">
								<view class="left"><image class="image" src="@/static/zf02.png"></image></view>
								<view class="radio-right">会员卡支付</view>
								<view class="vip">(余额:￥{{ (vip * 1).toFixed(2) }})</view>
							</view>
							<radio value="2" class="check" />
						</label>
						<label class="radio">
							<view class="radio-cost">
								<view class="left"><image class="image" src="@/static/zf03.png"></image></view>
								<view class="radio-right">线下支付</view>
							</view>
							<radio value="1" class="check" checked="true" />
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="box3">
			<view class="left">
				合计:
				<view class="cost">{{ (totalCost * 1).toFixed(2) }}元</view>
			</view>

			<view class="ToPay" @click="payment">去支付</view>
		</view>
		<!-- 弹框 -->
		<view class="box4">
			<uni-popup
				ref="popup"
				:is-mask-click="true"
				@maskClick="maskClick"
				type="center"
				@close="close"
				:animation="true"
				background-color="#fff"
			>
				<view class="popup" @click="copyPlat">
					<view class="title">线下支付</view>
					<view class="liner">
						<view class="left">公司:</view>
						<view class="right">{{ bank.accountName }}</view>
					</view>
					<view class="liner">
						<view class="left">开户:</view>
						<view class="right">{{ bank.accountBank }}</view>
					</view>
					<view class="liner">
						<view class="left">账户:</view>
						<view class="right">{{ bank.accountNum }}</view>
					</view>
					<view class="butotn" @click="btnOK">确定</view>
				</view>
			</uni-popup>
		</view>

		<view class="dialog" v-if="dialog">
			<view class="size">支付成功，请看订单状态！</view>
			<view class="butotn" @click="okFN">确定</view>
		</view>
	</view>
</template>

<script setup>
import { ref, getCurrentInstance, reactive, toRef, toRefs } from 'vue';
import { onLoad, onReady, onShareAppMessage, onShareTimeline, onPullDownRefresh } from '@dcloudio/uni-app';
import trainFold from '@/components/train/train-apply-four/fold/fold.vue';
import * as train from '@/common/train.js';
// import * as api from "@/common/login.js"
import * as api from '@/common/api.js';
import { getMyBalance } from '../../../common/api';
const value = ref();
const nuiCollapse = ref();
const dialog = ref(false);
const nuiDom = ref();
const popup = ref();
const id = ref();
const hotelList = ref();
const trainList = ref();
const insuranceList = ref();
const totalCost = ref();
const accommodationCost = ref();
const projectCost = ref();
const otherList = ref();
const otherCost = ref();
const examCost = ref();
const orderNumber = ref();
const payWay = ref(1);
const timer = ref();
const trainId = ref();
const ids = ref();
const code = ref();
const vip = ref();
const suo = ref(true);
const nights = ref();
const orderFlag = ref();
const payFalg = ref(true);
const data = reactive({
	addForm: {},
	bank: {}
});
const { addForm, bank } = toRefs(data);

// 打开弹框
function open() {
	popup.value.open('center');
}

function close() {
	popup.value.close();
}

// 点击蒙版关闭弹框, 跳转页面
function maskClick() {
	btnOK();
}

function btnOK() {
	copyPlat();
	close();
	clearTimeout(timer.value);
	setTimeout(() => {
		myTrain();
	}, 500);
}

onLoad(option => {
	// ids.value = option.ids;
	trainId.value = option.id;
	orderNumber.value = option.ids;
	id.value = option.id;
	initData();
	VIPFN();
});
// 复制银行账户信息
function copyPlat() {
	let str = `公司：${bank.value.accountName}；开户行：${bank.value.accountBank}；账户：${bank.value.accountNum}；`;
	uni.setClipboardData({
		data: str,
		success: function() {
			console.log('success');
		}
	});
}

// // 提示信息
// function tipForPayMation() {
// 	uni.showModal({
// 		title: '提示',
// 		content: '点击信息复制到剪贴板',
// 		cancelText: '好的',
// 		confirmText: '我已复制',
// 		success: function(res) {
// 			if (res.confirm) {
// 				// 去订单详情页
// 				goDetail()
// 			} else if (res.cancel) {
// 				console.log('返回');
// 			}
// 		}
// 	});
// }

// 支付方式
function radioChange(e) {
	payWay.value = e.target.value;
}

function myTrain() {
	let path = `/pages/train/payScuess/payScuess?payType=${payWay.value}&payTotal=${totalCost.value}`;
	wx.redirectTo({
		url: path
	});
}

function okFN() {
	let path = `/pages/train/payScuess/payScuess?payType=${payWay.value}&payTotal=${totalCost.value}`;
	wx.redirectTo({
		url: path
	});
}
// 获取用户支付信息
async function initData() {
	addForm.value.trainId = id.value;
	const res = await train.searchTrainCost(addForm.value);
	hotelList.value = res.data.accommodationVoList;
	insuranceList.value = res.data.examVoList;
	trainList.value = res.data.trainVoList;
	totalCost.value = res.data.totalCost;
	accommodationCost.value = res.data.accommodationCost;
	projectCost.value = res.data.projectCost;
	otherList.value = res.data.otherList;
	otherCost.value = res.data.otherCost;
	examCost.value = res.data.examCost;
	nights.value = res.data.nights;
	console.log(res);
}

// 1.生成订单
function createOrder() {
	return new Promise(async (resolve, reject) => {
		addForm.value.trainId = id.value;
		addForm.value.orderAmount = totalCost.value;
		const res = await train.createOrder(addForm.value);
		orderNumber.value = res.data;
		console.log(res, orderNumber.value);
		addForm.value = {};
		if (res.code == 200) {
			resolve();
		} else {
			reject();
		}
	});
}

// 2.支付  flag= 0微信/1线下/2会员
async function payFN() {
	return new Promise(async (resolve, reject) => {
		if (payFalg.value == false) {
			return false;
		}
		const nowOpenId = uni.getStorageSync('nowOpenId');
		addForm.value.openId = nowOpenId;
		addForm.value.id = orderNumber.value;
		addForm.value.flag = payWay.value;
		addForm.value.amount = totalCost.value;
		const res = await train.pay(addForm.value);
		addForm.value = {};
		if (res.code == 200) {
			payFalg.value = false;
			resolve('成功');
			code.value = res.code;
			if (payWay.value == 2) {
				// dialog.value = true;
				myTrain();
			}
		} else {
			reject('失败');
		}
	});
}

// 获取线下支付时银行账户信息
async function bankInfo() {
	return new Promise(async (resolve, reject) => {
		addForm.value.id = orderNumber.value;
		let res = await train.bankSlip(addForm.value);
		bank.value = res.data;
		if (res.code == 200 && payWay.value == 1) {
			open();
		}
		if (res.code == 200) {
			resolve();
		} else {
			reject();
		}
	});
}

// 支付按钮
async function payment() {
	if (suo.value) {
		suo.value = true;
		if (payWay.value == 0) {
			uni.showToast({
				title: '暂未开通',
				duration: 2000,
				icon: 'error'
			});
			return false;
		}
		// 生成订单
		if (!orderNumber.value) await createOrder();
		// 支付
		await payFN();
		await bankInfo();
		if (code.value) suo.value = true;
	}
}

// 获取会员余额信息
async function VIPFN() {
	let res = await getMyBalance();
	vip.value = res.data;
}
</script>

<style scoped lang="scss">
.box {
	padding: 35rpx 25rpx;
	padding-bottom: 100rpx;

	.box1 {
		background-color: #fff;
		margin-bottom: 40rpx;
		padding: 10rpx;
		border-radius: 15rpx;

		.text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #2b3133;
		}

		.conter-liner {
			display: flex;
			justify-content: space-between;
			margin-top: 32rpx;
			padding-bottom: 30rpx;

			.liner-left {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #7b7f83;
			}

			.liner-right {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ff8124;
			}
		}
	}

	.box2 {
		padding: 10rpx;

		.text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #2b3133;
			margin-bottom: 40rpx;
		}

		.conter {
			background-color: #fff;
			border-radius: 15rpx;
			padding: 25rpx 10rpx;
		}

		.radio {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.radio-cost {
				display: flex;

				.left {
					width: 50rpx;
					height: 50rpx;

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

				.radio-right {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
					margin-left: 10rpx;
				}

				.vip {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #4c5359;
				}
			}
		}
	}

	.box3 {
		display: flex;
		justify-content: space-between;
		border: 1rpx solid #dcdcdc;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;

		.left {
			display: flex;
			line-height: 100rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #7b7f83;
			padding-left: 30rpx;

			.cost {
				font-size: 45rpx;
				font-family: DIN Alternate;
				font-weight: bold;
				color: #ff8124;
				padding-left: 10rpx;
			}
		}

		.ToPay {
			background: #ff8124;
			border: 1px solid #dcdcdc;
			color: #fff;
			width: 214rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
		}
	}

	.box4 {
		:deep(.uni-popup__wrapper) {
			border-radius: 15rpx;
		}

		.popup {
			padding: 44rpx;
			width: 550rpx;
			height: 450rpx;
			border-radius: 15rpx;

			.title {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #7b7f83;
				text-align: center;
				margin-bottom: 40rpx;
			}

			.liner {
				display: flex;
				margin-bottom: 30rpx;

				.left {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #7b7f83;
				}

				.right {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000;
				}
			}

			.butotn {
				margin: 0 auto;
				margin-top: 63rpx;
				width: 268rpx;
				height: 80rpx;
				background: linear-gradient(270deg, #54e1b9, #00caa6);
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}
		}
	}
}

.dialog {
	width: 95%;
	background-color: #000;
	border-radius: 30rpx;
	padding: 50rpx 0;
	margin: 0 auto;
	opacity: 0.8;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	.size {
		color: #fff;
		text-align: center;
	}

	.butotn {
		margin: 0 auto;
		margin-top: 63rpx;
		width: 268rpx;
		height: 80rpx;
		background: linear-gradient(270deg, #54e1b9, #00caa6);
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}
}
</style>