<template>
	<m-nav-bar title="开通会员" :transparent="true" />
	<div class="buyvip-box">
		<img class="top-img" :src="topImg" alt="头部背景" />
		<div class="info-warn">您还未开通完整版系统，付费购买后享受更多功能</div>
		<div class="item-box">
			<van-cell class="cell-title" title="选择充值方式" />
			<div class="radio-box">
				<div v-for="(item, index) in goodsList" :class="{ select: index === goodsIndex }" @click="goodsIndex = index">
					<span>{{ item.dictLabel }}</span>
					<span>¥{{ item.dictValue.split(',')[0] }}</span>
					<span>原价{{ item.dictValue.split(',')[1] }}元</span>
				</div>
			</div>
		</div>
		<div class="item-box">
			<van-cell class="cell-title" title="使用说明" />
			<div class="readme">
				<span>1. 有效期内拥有VIP权限.</span>
				<span>2. 过期后可以使用免费用户的权限.</span>
				<span>3. 可以续费.</span>
			</div>
		</div>
		<div class="button-box">
			<div class="button" @click="buy">立即开通</div>
		</div>
		<div style="height: 60px"></div>
	</div>
</template>

<script lang="ts" setup>
	import topImg from './top-background.png';
	import { ref } from 'vue';
	import { getVipPrice, prepareOrder } from '@/api';
	const goodsIndex = ref(0);
	const goodsList = ref<any[]>([]);
	getVipPrice().then((res) => {
		goodsList.value = res.data;
	});
	const buy = () => {
		prepareOrder(goodsList.value[goodsIndex.value].dictCode);
	};
</script>

<style scoped lang="scss">
	.buyvip-box {
		width: 100%;
		margin-top: -50px;
		min-height: 100vh;
		display: flex;
		align-items: center;
		flex-direction: column;
		background: #ffdda6;
		.top-img {
			width: 100%;
		}
		.info-warn {
			width: 345px;
			height: 49px;
			background: #ffffff;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #91540f;
			margin-top: -70px;
			margin-bottom: 10px;
		}
		.item-box {
			width: 345px;
			background: #ffffff;
			border-radius: 10px;
			padding: 15px;
			margin-bottom: 10px;
			.cell-title {
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #0a1a33;
				margin-left: -10px;
				margin-bottom: 15px;
			}
		}
		.readme {
			display: flex;
			flex-direction: column;
			font-size: 13px;
			line-height: 20px;
			span {
				margin-bottom: 5px;
			}
		}
		.radio-box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			.select {
				background: #fcf1de;
			}
			div {
				width: 98px;
				font-size: 20px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				background: #ffffff;
				border: 1px solid #faca93;
				height: 124px;
				border-radius: 5px;
				span {
					font-family: PingFang SC;
					&:nth-of-type(1) {
						font-size: 13px;
						font-weight: bold;
						color: #91540f;
					}
					&:nth-of-type(2) {
						font-size: 30px;
						font-weight: bold;
						color: #ff4d53;
					}
					&:nth-of-type(3) {
						font-size: 11px;
						font-weight: 400;
						color: #8a9099;
						text-decoration: line-through;
					}
				}
			}
		}
		.button-box {
			position: fixed;
			background-color: #ffffff;
			bottom: 0;
			width: 375px;
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
			.button {
				width: 152px;
				height: 40px;
				background: #faca93;
				border-radius: 30px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 15px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #91540f;
				letter-spacing: 0px;
				&:active {
					background-color: red;
				}
			}
		}
	}
</style>
