<template>
	<view>
		<template v-if="item.status == '待核销'">
			<view class="min-page bg-f7 color-333 u-font-28 relative">
				<up-navbar bg-color="#F8F8F8" :fixed="true" :placeholder="true" title="支付成功" @leftClick="uni.navigateBack()"></up-navbar>

				<view class="bottom">
					<view class="u-p-32 u-flex u-row-center u-col-center u-flex-col bg-fff">
						<image :src="imgs.success" mode="" class="success-icon"></image>
						<view class="u-font-36 font-bold u-m-t-16">拼团成功</view>
					</view>

					<view class="shop">
						<view class="u-flex">
							<text style="min-width: 180rpx" class="color-666">可核销门店：</text>
							<text>{{ item.shopName }}</text>
						</view>
						<view class="u-m-t-32 u-flex">
							<text style="min-width: 180rpx" class="color-666">门店地址：</text>
							<text>{{ item.shopAddress }}</text>
						</view>
					</view>

					<view class="goods u-flex u-col-center">
						<up-image width="158rpx" height="158rpx" radius="14rpx" :src="item.goodsImg"></up-image>
						<view class="u-flex-1 u-p-l-16">
							<view class="u-flex u-col-center u-row-between">
								<view class="u-flex tuan-members">
									<image :src="imgs.pin" class="pin" mode=""></image>
									<text class="">{{ item.groupPeopleNum }}人团</text>
								</view>
							</view>
							<view class="u-m-t-16 u-flex u-col-center">
								<view style="width: 356rpx">
									<view class="font-bold" v-if="item.wareJson">{{ item.wareJson.wareName }}</view>
									<view class="u-flex u-m-t-10 u-col-center">
										<view class="price">
											<text class="u-font-30">¥</text>
											<text class="u-font-48 font-bold">{{ item.wareGroupPrice }}</text>
										</view>
										<view class="old-price u-m-l-32">
											<text>¥</text>
											<text>{{ item.wareOriginalPrice }}</text>
										</view>
									</view>
								</view>
								<view class="u-p-l-16 color-333">数量：{{ item.num }}</view>
							</view>
						</view>
					</view>

					<view class="members">
						<view class="list">
							<view class="item" v-for="(user, index) in item.users" :key="index">
								<view class="box">
									<view class="u-flex relative">
										<up-avatar size="140rpx" :src="user.userAvatar"></up-avatar>
										<view class="u-flex u-row-center absolute">
											<text class="tuanzhang" v-if="index == 0">团长</text>
										</view>
									</view>
									<view class="u-line-1 u-m-t-16 color-000 text-center">{{ user.userName }}</view>
								</view>
							</view>

							<view class="item" v-if="false">
								<view class="box">
									<view class="u-flex relative">
										<view class="add-box u-flex u-row-center">
											<up-icon color="#D9D9D9" name="plus"></up-icon>
											<button open-type="share" class="share" @click="share(item)">分享</button>
										</view>
									</view>
									<view class="u-line-1 u-m-t-16 color-000 text-center">等待参团</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="order">
					<view class="u-flex u-row-between">
						<view class="font-bold u-font-32">订单信息</view>

						<view class="u-flex color-666" @click="showOrder = !showOrder" style="align-items: baseline">
							<text class="u-m-r-18">{{ showOrder ? '收起' : '展开' }}</text>
							<view class="guodu" :class="{ rotate: !showOrder }">
								<up-icon name="arrow-down" bold></up-icon>
							</view>
						</view>
					</view>

					<view class="u-m-t-16" v-if="showOrder">
						<view class="u-flex u-row-between item">
							<view class="color-666">商品总额</view>
							<view class="">¥{{ item.payAmount }}</view>
						</view>
						<view class="u-flex u-row-between item">
							<view class="color-666">实付金额</view>
							<view class="">¥{{ item.payAmount }}</view>
						</view>
						<view class="u-flex u-row-between item">
							<view class="color-666">订单号</view>
							<view class="">{{ item.orderNo }}</view>
						</view>
						<view class="u-flex u-row-between item">
							<view class="color-666">支付时间</view>
							<view class="">{{ item.payTime }}</view>
						</view>
					</view>
				</view>

				<view style="height: 100px"></view>
				<view class="btns">
					<view class="btn" @click="toPinIndex">继续拼团</view>
					<button class="btn main" @click="toOrderDetail(item)">查看订单</button>
				</view>
			</view>
		</template>
		<template v-if="item.status == '待成团'">
			<view class="min-page bg-f7 color-333 u-font-28 relative">
				<view class="top" :style="topStyle">
					<up-navbar
						bg-color="transparent"
						:fixed="false"
						:placeholder="false"
						title="支付成功"
						left-icon-color="#fff"
						@leftClick="uni.navigateBack()"
						title-color="#fff"
					></up-navbar>
					<view class="u-flex info u-col-center"></view>
				</view>
				<view class="bottom bottom1">
					<view class="time" v-if="item.status == '待成团'">
						<text class="color-666">剩余成团时间：</text>
						<view class="u-font-32">
							<text class="number">{{ returnNum(0) }}</text>
							<text class="gap">：</text>
							<text class="number">{{ returnNum(1) }}</text>
							<text class="gap">：</text>
							<text class="number">{{ returnNum(2) }}</text>
						</view>
					</view>
					<view class="goods u-flex u-col-center">
						<up-image width="158rpx" height="158rpx" radius="14rpx" :src="item.goodsImg"></up-image>
						<view class="u-flex-1 u-p-l-16">
							<view class="u-flex u-col-center u-row-between">
								<view class="u-flex tuan-members">
									<image :src="imgs.pin" class="pin" mode=""></image>
									<text class="">{{ item.groupPeopleNum }}人团</text>
								</view>
								<statusVue :status="item.status"></statusVue>
							</view>
							<view class="u-m-t-16 u-flex u-col-center u-row-between">
								<view style="max-width: 356rpx">
									<view class="font-bold u-line-1" v-if="item.wareJson">{{ item.wareJson.wareName }}</view>
									<view class="u-flex u-m-t-10 u-col-center">
										<view class="price">
											<text class="u-font-30">¥</text>
											<text class="u-font-48 font-bold">{{ item.wareGroupPrice }}</text>
										</view>
										<view class="old-price u-m-l-32">
											<text>¥</text>
											<text>{{ item.wareOriginalPrice }}</text>
										</view>
									</view>
								</view>
								<view class="u-p-l-16 color-333 no-wrap">数量：{{ item.num }}</view>
							</view>
						</view>
					</view>

					<view class="shop-box">
						<view class="shop">
							<view class="u-flex">
								<text style="min-width: 180rpx" class="color-666">可核销门店：</text>
								<text>{{ item.shopName }}</text>
							</view>
							<view class="u-m-t-32 u-flex">
								<text style="min-width: 180rpx" class="color-666">门店地址：</text>
								<text>{{ item.shopAddress }}</text>
							</view>
						</view>
					</view>

					<view class="members">
						<view class="list">
							<view class="item" v-for="(user, index) in item.users" :key="index">
								<view class="box">
									<view class="u-flex relative">
										<up-avatar size="140rpx" :src="user.userAvatar"></up-avatar>
										<view class="u-flex u-row-center absolute">
											<text class="tuanzhang" v-if="index == 0">团长</text>
										</view>
									</view>
									<view class="u-line-1 u-m-t-16 color-000 text-center">{{ user.userName }}</view>
								</view>
							</view>

							<view class="item">
								<view class="box">
									<view class="u-flex relative">
										<view class="add-box u-flex u-row-center">
											<up-icon color="#D9D9D9" name="plus"></up-icon>
											<button open-type="share" class="share" @click="share(item)">分享</button>
										</view>
									</view>
									<view class="u-line-1 u-m-t-16 color-000 text-center">等待参团</view>
								</view>
							</view>
						</view>
						<view class="u-flex u-row-center" v-if="item.status == '待成团'">
							<view class="pin-btn">
								邀请好友参团
								<button open-type="share" class="share">邀请好友参团</button>
							</view>
						</view>
					</view>

					<view class="order">
						<view class="u-flex u-row-between">
							<view class="font-bold u-font-32">订单信息</view>

							<view class="u-flex color-666" @click="showOrder = !showOrder" style="align-items: baseline">
								<text class="u-m-r-18">{{ showOrder ? '收起' : '展开' }}</text>
								<view class="guodu" :class="{ rotate: !showOrder }">
									<up-icon name="arrow-down" bold></up-icon>
								</view>
							</view>
						</view>

						<view class="u-m-t-16" v-if="showOrder">
							<view class="u-flex u-row-between item">
								<view class="color-666">商品总额</view>
								<view class="">¥{{ item.payAmount }}</view>
							</view>
							<view class="u-flex u-row-between item">
								<view class="color-666">实付金额</view>
								<view class="">¥{{ item.payAmount }}</view>
							</view>
							<view class="u-flex u-row-between item">
								<view class="color-666">订单号</view>
								<view class="">{{ item.orderNo }}</view>
							</view>
							<view class="u-flex u-row-between item">
								<view class="color-666">支付时间</view>
								<view class="">{{ item.payTime }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="item.status == '已退款'">
			<view class="min-page bg-f7 color-333 u-font-28 relative">
				<view class="top" :style="topStyle">
					<up-navbar
						bg-color="transparent"
						:fixed="false"
						:placeholder="false"
						title="订单详情"
						left-icon-color="#fff"
						@leftClick="uni.navigateBack()"
						title-color="#fff"
					></up-navbar>
					<view class="u-flex info u-col-center"></view>
				</view>
				<view class="bottom bottom1">
					<view class="time" v-if="item.status == '待成团'">
						<text class="color-666">剩余成团时间：</text>
						<view class="u-font-32">
							<text class="number">{{ returnNum(0) }}</text>
							<text class="gap">：</text>
							<text class="number">{{ returnNum(1) }}</text>
							<text class="gap">：</text>
							<text class="number">{{ returnNum(2) }}</text>
						</view>
					</view>
					<view class="goods u-flex u-col-center" style="border-radius: 16rpx">
						<up-image width="158rpx" height="158rpx" radius="14rpx" :src="item.goodsImg"></up-image>
						<view class="u-flex-1 u-p-l-16">
							<view class="u-flex u-col-center u-row-between">
								<view class="u-flex tuan-members">
									<image :src="imgs.pin" class="pin" mode=""></image>
									<text class="">{{ item.groupPeopleNum }}人团</text>
								</view>
								<statusVue :status="item.status"></statusVue>
							</view>
							<view class="u-m-t-16 u-flex u-col-center u-row-between">
								<view style="max-width: 356rpx">
									<view class="font-bold u-line-1" v-if="item.wareJson">{{ item.wareJson.wareName }}</view>
									<view class="u-flex u-m-t-10 u-col-center">
										<view class="price">
											<text class="u-font-30">¥</text>
											<text class="u-font-48 font-bold">{{ item.wareGroupPrice }}</text>
										</view>
										<view class="old-price u-m-l-32">
											<text>¥</text>
											<text>{{ item.wareOriginalPrice }}</text>
										</view>
									</view>
								</view>
								<view class="u-p-l-16 color-333 no-wrap">数量：{{ item.num }}</view>
							</view>
						</view>
					</view>

					<view class="shop-box">
						<view class="shop">
							<view class="u-flex">
								<text style="min-width: 180rpx" class="color-666">可核销门店：</text>
								<text>{{ item.shopName }}</text>
							</view>
							<view class="u-m-t-32 u-flex">
								<text style="min-width: 180rpx" class="color-666">门店地址：</text>
								<text>{{ item.shopAddress }}</text>
							</view>
						</view>
					</view>

					<view class="order">
						<view class="u-flex u-row-between">
							<view class="font-bold u-font-32">订单信息</view>

							<view class="u-flex color-666" @click="showOrder = !showOrder" style="align-items: baseline">
								<text class="u-m-r-18">{{ showOrder ? '收起' : '展开' }}</text>
								<view class="guodu" :class="{ rotate: !showOrder }">
									<up-icon name="arrow-down" bold></up-icon>
								</view>
							</view>
						</view>

						<view class="u-m-t-16" v-if="showOrder">
							<view class="u-flex u-row-between item">
								<view class="color-666">商品总额</view>
								<view class="">¥{{ item.payAmount }}</view>
							</view>
							<view class="u-flex u-row-between item">
								<view class="color-666">实付金额</view>
								<view class="">¥{{ item.payAmount }}</view>
							</view>
							<view class="u-flex u-row-between item">
								<view class="color-666">订单号</view>
								<view class="">{{ item.orderNo }}</view>
							</view>
							<view class="u-flex u-row-between item">
								<view class="color-666">支付时间</view>
								<view class="">{{ item.payTime }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script setup>
import { shareMixin, handleMixinOnLoad, returnQuery } from '@/utils/share.js';
import statusVue from '@/groupBuying/components/status.vue';
import * as Api from '@/common/api/order/gbOrder.js';
import { wxShare } from '@/utils/share.js';
import { computed, reactive } from 'vue';
import { getRemainingHMS } from '@/utils/countdown.js';

function toPinIndex() {
	uni.redirectTo({
		url: '/groupBuying/index/index'
	});
}
const imgs = {
	bg: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/d21f2dfd7bec44618f2d5e4b88372b08.png',
	pin: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/3947892924dd481782331513aff00eb3.png',
	success: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/3/6a75acd0c0db4bfe9937854b2b2df3f0.png'
};

const topStyle = {
	backgroundImage: 'url(' + imgs.bg + ')'
};
const showOrder = ref(true);

function copyText(text) {
	uni.setClipboardData({
		data: text,
		success() {}
	});
}
const query = reactive({
	shopId: '',
	detailId: ''
});

function init(opt) {
	console.log(opt);
	Object.assign(query, opt);
	getDetail();
}
const item = reactive({});

function getDetail() {
	try {
		Api.recordDetail(query).then((res) => {
			if (!res) {
				uni.showModal({
					title: '提示',
					content: '当前商品已下架或者不存在',
					showCancel: false,
					success(res) {
						uni.redirectTo({
							url: '/groupBuying/index/index'
						});
					}
				});
				return;
			}
			console.log(res, 'res');
			const wareJson = JSON.parse(res.wareJson);
			wareJson.wareImgs = wareJson.wareImgs.split(',').filter((v) => v);
			res.wareJson = wareJson;
			res.goodsImg = wareJson.wareImgs[0];
			Object.assign(item, res);
			console.log('item', item);
		});
	} catch (err) {
		console.log('err', err);
	}
}
onLoad(async (opt) => {
	await handleMixinOnLoad(opt);
	init(opt);
});

let timer = null;
let nowTime = ref(Date.now());
timer = setInterval(() => {
	nowTime.value = Date.now();
}, 1000);

const returnTime = computed(() => {
	nowTime.value;
	return getRemainingHMS(item);
});

function returnNum(index) {
	return returnTime.value.split(':')[index];
}

function refund(item) {
	uni.showModal({
		title: '提示',
		content: '是否申请退款？',
		showCancel: true,
		success(res) {
			if (res.confirm) {
				Api.applyRefund({
					recordId: item.id,
					orderNo: item.orderNo
				}).then((res) => {
					if (res) {
						uni.showToast({
							title: '申请成功'
						});
						setTimeout(() => {
							getDetail();
						}, 1000);
					}
				});
			}
		}
	});
}

onShareAppMessage(async (res) => {
	let query = await returnQuery();
	return {
		title: item.wareJson.wareName,
		imageUrl: item.goodsImg,
		path: '/groupBuying/detail/index' + '?' + query,
		query
	};
});

// onShareAppMessage(() => {
// 	console.log('onShareAppMessage');
// 	console.log(item);
// 	const query = `groupOrderNo=${item.groupOrderNo}&shopId=${item.shopId}`;
// 	return wxShare({
// 		title: item.wareJson.wareName,
// 		imageUrl: item.goodsImg,
// 		path: '/groupBuying/detail/index' + '?' + query,
// 		query
// 	});
// });

function toOrderDetail(item) {
	uni.navigateTo({
		url: '/groupBuying/detail/index?detailId=' + item.id + '&shopId=' + item.shopId
	});
}
</script>

<style lang="scss" scoped>
.top {
	height: 422rpx;
	background-size: cover;

	.info {
		padding: 32rpx 30rpx 0 30rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 700;
	}
}

.bottom {
	background-color: #fff;
	padding: 0 28rpx;

	.time {
		padding: 18rpx 24rpx;
		background: #fff4e2;
		display: flex;
		align-items: center;
		border-radius: 16rpx 16rpx 0 0;

		.number {
			padding: 6rpx;
			border-radius: 16rpx;
			background: #ed5a2e;
			color: #fff;
			font-size: 32rpx;
			margin-left: 18rpx;
			margin-right: 18rpx;
		}

		.gap {
			font-size: 32rpx;
		}
	}

	.goods {
		background-color: #fff;
		padding: 22rpx 24rpx 0;
		border-radius: 0 0 16rpx 16rpx;
		margin-top: 32rpx;

		.pin {
			width: 60rpx;
			height: 38rpx;
		}

		.tuan-members {
			padding: 0 16rpx 0 0;
			border-radius: 0 6rpx 6rpx 0;
			background: #4c2828;
			color: #f5d9ad;
			font-weight: 700;
		}

		.price {
			color: #ed5a2e;
		}

		.old-price {
			color: #666666;
			text-decoration-line: line-through;
		}
	}

	.u-font-48 {
		font-size: 48rpx;
	}

	.shop-box {
		background: #fff;
		padding: 32rpx 30rpx 28rpx 30rpx;
		border-radius: 0 0 16rpx 16rpx;
	}

	.copy {
		width: 22rpx;
		height: 22rpx;
		margin-left: 22rpx;
	}

	.shop {
		border-radius: 8rpx;
		background: #f8f8f8;
		padding: 16rpx 34rpx;
	}

	.relative {
		position: relative;
	}

	.members {
		padding: 26rpx 24rpx;
		border-radius: 16rpx;
		margin-top: 32rpx;
		background-color: #fff;

		.list {
			display: flex;
		}

		.item {
			width: calc(100% / 3);
			display: flex;
			margin-bottom: 32rpx;

			.add-box {
				width: 140rpx;
				height: 140rpx;
				border: 2rpx dashed #d9d9d9;
				border-radius: 50%;
				overflow: hidden;
				position: relative;

				.share {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					opacity: 0;
				}
			}

			// &:nth-of-type(2n) {
			// 	justify-content: center;
			// }

			&:nth-of-type(3n) {
				justify-content: flex-end;
			}

			.box {
				display: flex;
				flex-direction: column;
			}

			.absolute {
				bottom: 0;
				display: flex;
				justify-content: center;
				left: 0;
				right: 0;
			}

			.tuanzhang {
				padding: 8rpx 18rpx;
				border-radius: 20rpx;
				background: #ed5a2e;
				color: #fff;
				bottom: 0;
			}
		}
	}
}

.btns {
	position: fixed;
	left: 87rpx;
	right: 87rpx;
	bottom: 0;
	padding-bottom: 60rpx;
	display: flex;
	gap: 40rpx;

	.btn {
		flex: 1;
		padding: 16rpx 28rpx;
		border-radius: 200rpx;
		text-align: center;
		font-size: 32rpx;
		line-height: 1;
		margin: 0;
		justify-content: center;
		border: 2rpx solid #e8ad7b;
		background: #fff;
		color: #e8ad7b;

		&.main {
			background-color: #e8ad7b;
			color: #fff;
		}
	}
}

.guodu {
	transition: all 0.3s;
}

.pin-btn {
	padding: 14rpx 60rpx;
	border-radius: 200rpx;
	text-align: center;
	font-size: 32rpx;
	justify-content: center;
	border: 2rpx solid #e8ad7b;
	background: #e8ad7b;
	color: #fff;
	position: relative;

	.share {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		opacity: 0;
	}
}

.rotate {
	transform: rotate(-90deg);
}

.order {
	padding: 32rpx 28rpx;
	border-radius: 16rpx;
	margin: 14rpx 30rpx 30rpx 30rpx;
	background-color: #fff;

	.item {
		padding: 16rpx 0;
	}
}

.refund {
	padding: 18rpx 164rpx;
	border-radius: 0 0 16rpx 16rpx;
	background: #fff4e2;
	font-weight: 700;
	margin-bottom: 32rpx;
}

.success-icon {
	width: 102rpx;
	height: 102rpx;
}

.bg-fff {
	background-color: #fff;
}

.bottom1 {
	margin: 0 28rpx;
	padding: 0;
	transform: translateY(-160rpx);
	background-color: transparent;

	.time {
		padding: 18rpx 24rpx;
		background: #fff4e2;
		display: flex;
		align-items: center;
		border-radius: 16rpx 16rpx 0 0;

		.number {
			padding: 6rpx;
			border-radius: 16rpx;
			background: #ed5a2e;
			color: #fff;
			font-size: 32rpx;
			margin-left: 18rpx;
			margin-right: 18rpx;
		}

		.gap {
			font-size: 32rpx;
		}
	}

	.goods {
		background-color: #fff;
		padding: 32rpx 24rpx 0;
		border-radius: 0;
		margin-top: 0;

		.pin {
			width: 60rpx;
			height: 38rpx;
		}

		.tuan-members {
			padding: 0 16rpx 0 0;
			border-radius: 0 6rpx 6rpx 0;
			background: #4c2828;
			color: #f5d9ad;
			font-weight: 700;
		}

		.price {
			color: #ed5a2e;
		}

		.old-price {
			color: #666666;
		}
	}

	.u-font-48 {
		font-size: 48rpx;
	}

	.shop-box {
		background: #fff;
		padding: 32rpx 30rpx 28rpx 30rpx;
		border-radius: 0 0 16rpx 16rpx;
	}

	.copy {
		width: 22rpx;
		height: 22rpx;
		margin-left: 22rpx;
	}

	.shop {
		border-radius: 8rpx;
		background: #f8f8f8;
		padding: 16rpx 34rpx;
	}

	.relative {
		position: relative;
	}

	.members {
		padding: 26rpx 24rpx;
		border-radius: 16rpx;
		margin-top: 32rpx;
		background-color: #fff;

		.list {
			display: flex;
			flex-wrap: wrap;
		}

		.item {
			width: calc(100% / 3);
			display: flex;

			.add-box {
				width: 140rpx;
				height: 140rpx;
				border: 2rpx dashed #d9d9d9;
				border-radius: 50%;
				overflow: hidden;
				position: relative;

				.share {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					opacity: 0;
				}
			}

			&:nth-of-type(3n-1) {
				justify-content: center;
			}

			&:nth-of-type(3n) {
				justify-content: flex-end;
			}

			.box {
				display: flex;
				flex-direction: column;
			}

			.absolute {
				bottom: 0;
				display: flex;
				justify-content: center;
				left: 0;
				right: 0;
			}

			.tuanzhang {
				padding: 8rpx 18rpx;
				border-radius: 20rpx;
				background: #ed5a2e;
				color: #fff;
				bottom: 0;
			}
		}
	}

	.order {
		padding: 32rpx 28rpx;
		border-radius: 16rpx;
		margin: 0;
		margin-top: 32rpx;
		background-color: #fff;

		.item {
			padding: 16rpx 0;
		}
	}
}
</style>
