<template>
	<!-- 我的培训 -->
	<view>
		<view class="bgWhite">
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control
					:current="current"
					:values="items"
					style-type="text"
					:active-color="activeColor"
					@clickItem="onClickItem"
				/>
			</view>
			<view class="topSearch">
				<!-- 搜索框 -->
				<uni-search-bar
					style="width: 670rpx;"
					@clear="onclear()"
					@confirm="onconfirm()"
					clearButton="auto"
					cancelButton="none"
					v-model="queryParam.trainName"
				></uni-search-bar>
				<!-- 弹出框 -->
				<uni-icons type="settings" size="30" @click="showSearchPop"></uni-icons>
			</view>
		</view>

		<!-- 报项 -->
		<view class="content" v-if="current == 0">
			<view v-for="item in list" :key="item.id" class="list-conter" @click="singDetail(item)">
				<uniList :item="item" :pic="item.cover" :title="item.trainName" :card="item.statusStr" />
			</view>
		</view>

		<!-- 订单 -->
		<view class="billcontent" v-if="current == 1">
			<!-- 订单 -->
			<uni-collapse>
				<uni-collapse-item
					title-border="none"
					:border="false"
					class="baoItem"
					:show-animation="true"
					v-for="(b, index) in billList"
					:key="index"
				>
					<template v-slot:title>
						<view class="bold">{{ b.trainName }}</view>
						<view class="pp">
							订单编号：
							<text>{{ b.id }}</text>
						</view>
						<!-- <view class="pp">
							下单时间：
							<text>{{ b.commitTime }}</text>
						</view> -->
						<view class="pp" v-if="b.totalPayAmount">
							已付金额：
							<text class="orange">￥{{ b.totalPayAmount }}</text>
						</view>
						<view class="pp" v-if="b.payment">
							订单金额：
							<text class="orange" style="font-size: 34rpx;">￥{{ b.payment }}</text>
						</view>
					</template>
					<view class="collapseBody">
						<view class="pp" v-if="b.payTime">
							付款时间：
							<text>{{ b.payTime }}</text>
						</view>
						<view class="pp" v-if="b.payType">
							付款方式：
							<text v-if="b.payType == '0'">微信支付</text>
							<text v-else-if="b.payType == '1'">线下支付</text>
							<text v-else-if="b.payType == '2'">会员支付</text>
							<text v-else-if="b.payType == '4'">后台新增</text>
						</view>
						<view class="pp" v-if="b.needPay == '0'">
							状态：
							<text class="green">免费订单</text>
						</view>
						<view class="pp" v-else>
							付款状态：
							<!-- 0 未支付  1 线下支付待核销  2 付款中 3 已支付 4 退款中 5 已退款 6 退款待核销' -->
							<text v-if="b.payStatus == '0'" @click="payBill(b)" class="orange">
								{{ b.payStatusStr }}
							</text>
							<text v-if="b.payStatus == '1'" class="green">{{ b.payStatusStr }}</text>
							<text v-if="b.payStatus == '2'" class="orange">{{ b.payStatusStr }}</text>
							<text v-if="b.payStatus == '3'" class="green">{{ b.payStatusStr }}</text>
							<text v-if="b.payStatus == '4'" class="red">{{ b.payStatusStr }}</text>
							<text v-if="b.payStatus == '5'" class="red">{{ b.payStatusStr }}</text>
							<text v-if="b.payStatus == '6'">{{ b.payStatusStr }}</text>
						</view>
						<view class="pp" v-if="b.auditStatus != '0'">
							审核状态：
							<text v-if="b.auditStatus == '1'" class="orange">待审核</text>
							<text v-if="b.auditStatus == '2'" class="green">审核通过</text>
							<text v-if="b.auditStatus == '3'" class="red">审核未通过</text>
							<text v-if="b.auditStatus == '4'" class="gary">已取消</text>
						</view>
						<view class="btnsView">
							<button class="comKx" @click="goMatchBillDetail(b)">详情</button>
							<!-- 如果未付款可以取消订单（非报项） -->
							<button class="comKx" @click="cancelBill(b)" v-if="b.payStatus == 0">取消订单</button>
							<button class="greenKx" v-if="b.payStatus == 0" @click="goPay(b)">继续付款</button>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>

			<view class="nodata" v-if="billList.length == 0">
				<image mode="aspectFit" src="/static/nodata.png"></image>
				<text>还没有赛事订单</text>
			</view>
		</view>

		<uni-popup ref="searchPop" type="bottom" background-color="#fff">
			<view class="popTT">筛选</view>
			<view class="popBody">
				<uni-form :modelValue="queryParam" label-position="top" v-if="current == 0">
					<uni-forms-item label="赛事时间">
						<uni-datetime-picker v-model="timePeriod" type="datetimerange" />
					</uni-forms-item>
					<view class="searchBtns">
						<button class="btn btnGray" @click="reset">重置</button>
						<button class="btn btn1" @click="search">查询</button>
					</view>
				</uni-form>
				<uni-form :modelValue="queryParam" label-position="top" v-if="current == 1">
					<uni-forms-item label="状态">
						<uni-data-select v-model="queryParam.payStatus" :localdata="billStatusList"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="付款时间">
						<uni-datetime-picker @change="changeTime" v-model="timePeriod" type="daterange" />
					</uni-forms-item>
					<!-- <uni-forms-item label="下单时间">
						<uni-datetime-picker v-model="commitTimeArr" type="daterange" />
					</uni-forms-item> -->
					<view class="searchBtns">
						<button class="btn btnGray" @click="reset">重置</button>
						<button class="btn btn1" @click="searchBill">查询</button>
					</view>
				</uni-form>
			</view>
		</uni-popup>

		<uni-popup ref="popPayType" type="bottom" :is-mask-click="false" safe-area background-color="#fff">
			<view class="PopcloseBtn" @click="alertGiveup">
				<uni-icons type="closeempty" size="30" color="#999"></uni-icons>
			</view>

			<view class="rrcard" style="padding-bottom: 100rpx;">
				<view class="moneyNum">
					￥
					<text>{{ finialFee }}</text>
				</view>
				<view class="t">支付方式</view>
				<view class="whitebg">
					<radio-group @change="payChange">
						<!-- 支付方式 0 会员卡支付 1 微信支付 2 线下支付 -->
						<label class="uni-list-cell uni-list-cell-pd">
							<view class="littleimgBox">
								<image class="littleimg" src="@/static/zf01.png"></image>
								微信支付
							</view>
							<view><radio checked="checked" value="1" /></view>
						</label>
						<label class="uni-list-cell uni-list-cell-pd">
							<view class="littleimgBox">
								<image class="littleimg" src="@/static/zf02.png"></image>
								会员卡支付(余额：￥{{ myBalance }})
							</view>
							<view><radio checked="checked" value="0" /></view>
						</label>
						<label class="uni-list-cell uni-list-cell-pd">
							<view class="littleimgBox">
								<image class="littleimg" src="@/static/zf03.png"></image>
								线下支付
							</view>
							<view><radio checked="checked" value="2" /></view>
						</label>
					</radio-group>
				</view>

				<button class="payBtn" @click="pay">确认交易</button>
			</view>
		</uni-popup>
		<uni-popup ref="giveup" type="dialog">
			<uni-popup-dialog
				type="success"
				confirmText="放弃"
				cancelText="继续支付"
				content="是否放弃本次支付"
				@confirm="cancelPay"
				@close="closeGiveup"
			></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="payMationPop" :is-mask-click="false">
			<view class="payMationPopBody">
				<view class="t">线下支付</view>
				<view @click="copyOrg(organizerInfo)" class="hoverBg">
					<view class="p">
						公司：
						<text>{{ organizerInfo.organizerName }}</text>
					</view>
					<view class="p">
						开户：
						<text>{{ organizerInfo.organizerBank }}</text>
					</view>
					<view class="p">
						账号：
						<text>{{ organizerInfo.organizerAccount }}</text>
					</view>
					<view class="p">
						应付：
						<text class="orange">{{ organizerInfo.organizerFee }}元</text>
					</view>
				</view>

				<view @click="copyOrg(platformInfo)" v-if="platformInfo" class="hoverBg" style="margin: 40rpx 0 0;">
					<view class="p">
						公司：
						<text>{{ platformInfo.platformName }}</text>
					</view>
					<view class="p">
						开户：
						<text>{{ platformInfo.platformBank }}</text>
					</view>
					<view class="p">
						账号：
						<text>{{ platformInfo.platformAccount }}</text>
					</view>
					<view class="p">
						应付：
						<text class="orange">{{ platformInfo.platformFee }}元</text>
					</view>
				</view>

				<button class="btn btn1" @click="tipForPayMation">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { reactive, toRefs, getCurrentInstance } from 'vue';
import * as match from '@/common/match.js';
import * as train from '@/common/train.js';
import * as api from '@/common/api.js';
import { onShow, onReady, onLoad } from '@dcloudio/uni-app';
import uniList from '@/components/train/ulist/ulist1';
const data = reactive({
	items: ['报项', '订单'],
	// 0 未支付  1 线下支付待核销  2 付款中 3 线下支付已核销/已支付 4 退款中 5 已退款 6 线下退款待核销
	billStatusList: [
		{ value: 0, text: '未支付' },
		{ value: 1, text: '支付待核销' },
		{ value: 2, text: '付款中' },
		{ value: 3, text: '已付款' },
		{ value: 4, text: '退款中' },
		{ value: 5, text: '已退款' },
		{ value: 6, text: '退款待核销' }
	],
	queryParam: {},
	queryParam2: {
		cptName: '',
		payTimeRange: '',
		createTimeRange: ''
	},
	list: [],
	current: 0,
	billList: [],
	cptPeriodArr: [],
	payTimeArr: [],
	commitTimeArr: [],
	searchPop: null,
	popPayType: null,
	payMationPop: null,
	time: '',
	myBalance: '',
	finialFee: '',
	giveup: null,
	payType: '2',
	organizerInfo: {},
	platformInfo: {},
	timePeriod: []
});
const {
	timePeriod,
	items,
	queryParam,
	queryParam2,
	list,
	current,
	billList,
	payTimeArr,
	commitTimeArr,
	cptPeriodArr,
	searchPop,
	popPayType,
	payMationPop,
	billStatusList,
	time,
	myBalance,
	finialFee,
	payType,
	giveup,
	organizerInfo,
	platformInfo
} = toRefs(data);
const currUser = uni.getStorageSync('currUser');
onLoad(option => {
	if (option.current) {
		current.value = option.current;
	}
	getList();
	getBillList();
	// current
});

// 报项列表
function getList() {
	//赛选时间
	if (timePeriod.value.length > 0) queryParam.value.timePeriod = timePeriod.value.join();
	train.signList(queryParam.value).then(res => {
		list.value = res.data;
	});
}

// 订单列表
async function getBillList() {
	if (timePeriod.value.length > 0) queryParam.value.timePeriod = timePeriod.value.join();
	let res = await train.orderList(queryParam.value);
	billList.value = res.data;
	console.log(res);
}

function singDetail(item) {
	uni.navigateTo({
		url: `/pages/usercenter/myTrain/trainSing/trainSing?id=${item.id}&str=${item.statusStr}&trainName=${
			item.trainName
		}`
	});
}

// 订单详情
function goMatchBillDetail(item) {
	uni.navigateTo({
		url: `/pages/usercenter/myTrain/trainBillDetail/trainBillDetail?id=${item.trainId}&order=${JSON.stringify(
			item
		)}`
	});
}

// 去支付
function payBill(item) {
	let path =
		'/pages/train/costBreakdown/costBreakdown?ids=' + item.id + '&payType =' + item.payType + '&id=' + item.trainId;
	uni.navigateTo({
		url: path
	});
}

function onClickItem(e) {
	current.value = e.currentIndex;
	if (current.value == 0) {
		getList();
	} else {
		getBillList();
	}
	queryParam.value = {};
}
function bindTimeChange(e) {
	time.value = e.detail.value;
}
function showSearchPop() {
	searchPop.value.open();
}
function onconfirm() {
	if (current.value == 0) {
		getList();
	} else {
		getBillList();
	}
}
function onclear() {
	queryParam.value.name = '';
	if (current.value == 0) {
		getList();
	} else {
		getBillList();
	}
}
function search() {
	getList();
	searchPop.value.close();
}
function searchBill() {
	getBillList();
	searchPop.value.close();
}
function reset() {
	timePeriod.value = [];
	queryParam.value = {};
	if (current.value == 0) {
		getList();
	} else {
		getBillList();
	}
}
let thisBill = {};
function goPay(item) {
	// // 获取会员卡余额
	// api.getMyBalance().then(res => {
	// 	myBalance.value = res.data;
	// });
	// popPayType.value.open();
	// thisBill = b;
	// finialFee.value = b.totalAmount;
	let path =
		'/pages/train/costBreakdown/costBreakdown?ids=' + item.id + '&payType =' + item.payType + '&id=' + item.trainId;
	uni.navigateTo({
		url: path
	});
}
function payChange(evt) {
	payType.value = evt.detail.value;
}
function alertGiveup() {
	giveup.value.open();
}
function closeGiveup() {
	giveup.value.close();
}
function cancelPay() {
	// 点击放弃
	popPayType.value.close();
}
function tipForPayMation() {
	uni.showModal({
		title: '提示',
		content: '点击信息复制到剪贴板',
		cancelText: '好的',
		confirmText: '我已复制',
		success: function(res) {
			if (res.confirm) {
				// 去订单详情页
				payMationPop.value.close();
			} else if (res.cancel) {
				console.log('返回');
			}
		}
	});
}
function copyOrg(info) {
	let str = `公司：${info.organizerName}；开户行：${info.organizerBank}；账户：${info.organizerAccount}；`;
	uni.setClipboardData({
		data: str,
		success: function() {
			console.log('success');
		}
	});
}
function pay() {
	// 继续支付
	if (payType.value == '') {
		uni.showToast({
			title: '请选择支付方式',
			icon: 'none',
			duration: 2000
		});
		return;
	}
	match.payMatch({ orderId: thisBill.id, payType: payType.value }).then(res => {
		thisBill = {};
		finialFee.value = '0';
		if (res.data.success == '1') {
			console.log('支付成功');
			popPayType.value.close();
			getList();
			getBillList();
			if (payType.value == '2') {
				// 线下支付
				organizerInfo.value = res.data.org;
				platformInfo.value = res.data.plat;
				payMationPop.value.open();
			} else {
				uni.showToast({
					title: '支付成功',
					duration: 2000
				});
			}
		} else {
			uni.showToast({
				title: '支付失败，请稍后重试',
				icon: 'none',
				duration: 2000
			});
		}
	});
}
function cancelBill(b) {
	uni.showModal({
		title: '提示',
		content: '确定取消吗',
		success: async function(res) {
			if (res.confirm) {
				let res = await train.cancelOrder({ id: b.id });
				getBillList();
				getList();
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}
</script>

<style lang="scss" scoped>
.list-conter {
	padding: 5rpx 20rpx;
	background-color: #fff;
}
.topSearch {
	display: flex;
	align-items: center;
}
.bgWhite {
	background: #fff;
}
.popTT {
	text-align: center;
	padding: 30rpx 0 0;
}
.popBody {
	background: #fff;
	padding: 30rpx;
	height: 50vh;
}
.searchBtns {
	display: flex;
}
.btnGray {
	color: #1b1b1b;
	background: #f5f7f9;
}
.billcontent {
	:deep(.uni-collapse) {
		background-color: transparent;
		margin: 30rpx;
		width: 700rpx;
	}
	:deep(.uni-collapse-item) {
		position: relative;
	}
}
.baoItem {
	.bold {
		color: #2b3133;
		font-weight: 500;
		font-size: 30rpx;
		margin: 0 0 20rpx;
	}
	.pp {
		font-size: 28rpx;
		color: #7b7f83;
		padding: 10rpx 0;
		text {
			color: #2b3133;
			float: right;
		}
	}
	.orange {
		font-size: 26rpx;
	}
	button {
		border-radius: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		background: #fff;
		margin: 0 0 0 25rpx;
	}
	.btnsView {
		display: flex;
		justify-content: flex-end;
		margin: 34rpx 0 0;
		padding-bottom: 10rpx;
	}
	.comKx {
		color: #0d0d0d;
		border: 1rpx solid #d2d7d9;
	}
	.greenKx {
		color: #00c176;
		border: 1rpx solid #00c176;
	}
}
:deep(.uni-collapse-item__title-arrow) {
	position: absolute;
	right: 0;
	top: 20rpx;
	line-height: 20px;
}
.littleimgBox {
	display: flex;
	align-items: center;
}

.littleimg {
	width: 50rpx;
	height: 50rpx;
	margin-right: 15rpx;
}
.payMationPopBody {
	background: #ffffff;
	width: 550rpx;
	border-radius: 15px;
	padding: 50rpx;
	box-sizing: border-box;
	.t {
		text-align: center;
		color: #7b7f83;
		font-size: 34rpx;
		margin: 0 0 50rpx;
	}
	.p {
		color: #7b7f83;
		font-size: 30rpx;
		text {
			color: #1a1a1a;
		}
	}
	.btn {
		margin-top: 60rpx;
	}
}
.payBtn {
	margin: 100rpx 0;
}
</style>