<template>
	<view class="growth-package-page">
		<image class="content-image" src="@/static/images/home/growth-package/intro.png" mode="widthFix"></image>
		<view class="deal-carousel">
			<swiper class="deal-swiper" autoplay circular :interval="3000" previous-margin="40rpx"
				next-margin="40rpx" :current="dealCurrentIndex" @change="handleDealChange">
				<swiper-item v-for="(item, index) in dealSlides" :key="item">
					<view class="deal-slide" :class="getDealSlideClass(index)">
						<image class="deal-slide-image" :src="item" mode="aspectFit"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="deal-indicator">
				<view class="indicator-track" v-for="(item, index) in dealSlides" :key="item"
					:class="{ active: index === dealCurrentIndex }"></view>
			</view>
		</view>
		<image class="content-image" src="@/static/images/home/growth-package/plan.png" mode="widthFix"></image>

		<view class="fixed-action" @tap="handlePayTap">
			<image class="action-image" :src="actionImage" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
import request from "@/utils/request";

export default {
	name: "GrowthPackage",
	data() {
		return {
			dealCurrentIndex: 0,
			isPaying: false,
			isJoined: false,
			dealSlides: [
				"/static/images/home/growth-package/deal-1.png",
				"/static/images/home/growth-package/deal-2.png",
				"/static/images/home/growth-package/deal-3.png",
			],
		};
	},
	computed: {
		actionImage() {
			return this.isJoined
				? "/static/images/home/growth-package/action-success.png"
				: "/static/images/home/growth-package/action.png";
		},
	},
	onShow() {
		this.getGrowthPackageStatus();
	},
	methods: {
		async getGrowthPackageStatus() {
			if (!uni.getStorageSync("accessToken")) {
				this.isJoined = false;
				return;
			}
			if (this.isPaying) return;
			uni.showLoading({
				title: "查询报名状态...",
				mask: true,
			});
			try {
				const res = await request.post(
					"/sj/growthPackage/status",
					{},
					{
						hideLoading: true,
					}
				);
				this.isJoined = !!(res && res.code === 200 && res.data && Number(res.data.is_joined) === 1);
			} catch (error) {
				console.log("growthPackageStatus error", error);
			} finally {
				uni.hideLoading();
			}
		},
		handleDealChange(event) {
			this.dealCurrentIndex = event.detail.current;
		},
		getDealSlideClass(index) {
			const length = this.dealSlides.length;
			const prevIndex = (this.dealCurrentIndex + length - 1) % length;
			const nextIndex = (this.dealCurrentIndex + 1) % length;
			if (index === this.dealCurrentIndex) {
				return "is-active";
			}
			if (index === prevIndex) {
				return "is-prev";
			}
			if (index === nextIndex) {
				return "is-next";
			}
			return "";
		},
		handlePayTap() {
			if (this.isPaying) return;
			if (this.isJoined) return;
			if (!uni.getStorageSync("accessToken")) {
				uni.navigateTo({
					url: "/pages/blogPopup/blogPopup",
				});
				return;
			}
			uni.showActionSheet({
				itemList: ["微信支付", "支付宝支付"],
				success: (res) => {
					const payKind = res.tapIndex === 0 ? 2 : 3;
					this.createGrowthPackagePay(payKind);
				},
			});
		},
		async createGrowthPackagePay(payKind) {
			this.isPaying = true;
			uni.showLoading({
				title: "支付中...",
				mask: true,
			});
			try {
				const payRes = await request.post(
					"/sj/growthPackage/pay",
					{
						pay_kind: payKind,
					},
					{
						hideLoading: true,
					}
				);
				if (!payRes || payRes.code !== 200) {
					uni.hideLoading();
					this.isPaying = false;
					if (payRes && payRes.data && (payRes.data.id || payRes.data.number)) {
						this.goToPayResult("fail", payRes.data);
						return;
					}
					uni.showToast({
						title: (payRes && payRes.msg) || "支付请求失败",
						icon: "none",
					});
					return;
				}
				const orderInfo = payRes.data || {};
				if (Number(orderInfo.is_joined) === 1) {
					uni.hideLoading();
					this.isPaying = false;
					this.isJoined = true;
					this.goToPayResult("success", orderInfo.order || {});
					return;
				}
				const paymentParams = orderInfo.pay_params || orderInfo.orderInfo;
				if (!paymentParams) {
					uni.hideLoading();
					this.isPaying = false;
					if (orderInfo.id || orderInfo.number) {
						this.goToPayResult("fail", orderInfo);
						return;
					}
					uni.showToast({
						title: "支付参数缺失",
						icon: "none",
					});
					return;
				}
				uni.hideLoading();
				this.requestGrowthPackagePayment(payKind, paymentParams, orderInfo);
			} catch (error) {
				uni.hideLoading();
				uni.showToast({
					title: "支付请求失败",
					icon: "none",
				});
				this.isPaying = false;
				console.log("growthPackagePay error", error);
			}
		},
		requestGrowthPackagePayment(payKind, paymentParams, orderInfo) {
			const provider = payKind === 2 ? "wxpay" : "alipay";
			let payOrderInfo = paymentParams;
			if (payKind === 2 && paymentParams && typeof paymentParams === "object") {
				payOrderInfo = {
					...paymentParams,
				};
				const systemInfo = uni.getSystemInfoSync();
				if (systemInfo.platform === "ios" && payOrderInfo.appid) {
					payOrderInfo.appId = payOrderInfo.appid;
					delete payOrderInfo.appid;
				}
			}
			uni.requestPayment({
				provider,
				orderInfo: payOrderInfo,
				success: () => {
					this.queryGrowthPackagePay(orderInfo);
				},
				fail: (err) => {
					this.isPaying = false;
					console.log("growthPackage requestPayment fail", err);
					this.goToPayResult("fail", orderInfo);
				},
			});
		},
		async queryGrowthPackagePay(orderInfo) {
			try {
				const queryRes = await request.post(
					"/sj/growthPackage/queryPay",
					{
						id: orderInfo.id,
						number: orderInfo.number,
					},
					{
						hideLoading: true,
					}
				);
				const order = queryRes && queryRes.data && queryRes.data.order;
				if (queryRes && queryRes.code === 200 && order && Number(order.state) === 2) {
					this.isJoined = true;
					this.goToPayResult("success", order);
					return;
				}
				this.goToPayResult("fail", orderInfo);
			} catch (error) {
				console.log("growthPackageQueryPay error", error);
				this.goToPayResult("fail", orderInfo);
			} finally {
				this.isPaying = false;
			}
		},
		goToPayResult(status, orderInfo = {}) {
			const params = [`status=${status}`];
			if (orderInfo.number) {
				params.push(`number=${encodeURIComponent(orderInfo.number)}`);
			}
			if (orderInfo.pay_money || orderInfo.order_money) {
				params.push(`money=${encodeURIComponent(orderInfo.pay_money || orderInfo.order_money)}`);
			}
			uni.redirectTo({
				url: `/pages/home/growth-package-result?${params.join("&")}`,
			});
		},
	},
}
</script>

<style lang="scss">
page {
	background: #150903;
}

.growth-package-page {
	min-height: 100vh;
	padding-bottom: 259rpx;
	background: #150903;

	.content-image {
		display: block;
		width: 750rpx;
	}

	.deal-carousel {
		position: relative;
		width: 750rpx;
		height: 1342rpx;
		background: #000000;
		overflow: hidden;
	}

	.deal-swiper {
		width: 750rpx;
		height: 1280rpx;
		background: #000000;
	}

	.deal-slide {
		position: relative;
		width: 670rpx;
		height: 1280rpx;
		background: #000000;
		overflow: hidden;
	}

	.deal-slide-image {
		display: block;
		width: 670rpx;
		height: 1280rpx;
	}

	.deal-slide.is-prev,
	.deal-slide.is-next {
		height: 1169rpx;
		margin-top: 56rpx;
	}

	.deal-slide.is-prev .deal-slide-image,
	.deal-slide.is-next .deal-slide-image {
		position: absolute;
		top: -56rpx;
	}

	.deal-slide.is-prev .deal-slide-image {
		right: 10rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}

	.deal-slide.is-next .deal-slide-image {
		left: 10rpx;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.deal-indicator {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 62rpx;
		column-gap: 8rpx;
		background: #000000;
	}

	.indicator-track {
		width: 146rpx;
		height: 8rpx;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, 0.42);
	}

	.indicator-track.active {
		background: #ffffff;
	}

	.fixed-action {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		width: 750rpx;
		height: 259rpx;
		background: #150903;
	}

	.action-image {
		display: block;
		width: 750rpx;
	}
}
</style>
