<template>
	<div :class="prefixCls">
		<div :class="`${prefixCls}-left`">
			<a-menu
				:mode="mode"
				v-if="dataList?.length"
				theme="dark"
				:selected-keys="selectedKeys"
				:collapsed="collapsed"
				:default-open-keys="defaultOpenedKeys"
				@menu-item-click="menuItemClick"
				@sub-menu-click="subMenuClick">
				<template v-for="item in dataList">
					<template v-if="item.children && item.children.length > 0">
						<a-sub-menu
							:key="item.id"
							:title="item.title">
							<template #icon>
								<mf-icon
									v-if="item.icon"
									:value="item.icon" />
							</template>
							<a-menu-item
								v-for="child in item.children"
								:key="child.key">
								{{ child.title }}
							</a-menu-item>
						</a-sub-menu>
					</template>
					<template v-else>
						<a-menu-item :key="item.id">
							<template #icon>
								<mf-icon
									v-if="item.icon"
									:value="item.icon" />
							</template>
							<div class="menu-item">
								{{ item.title }}
							</div>
						</a-menu-item>
					</template>
				</template>
			</a-menu>
		</div>
		<div :class="`${prefixCls}-right`">
			<div :class="`${prefixCls}-right-banner`">
				<a-carousel>
					<a-carousel-item
						v-for="item in images"
						@click="jumpUrl(item)">
						<a-image
							:src="item.imageUrl"
							:preview="false"
							fit="cover"
							width="100%"
							height="100%" />
					</a-carousel-item>
				</a-carousel>
			</div>
			<div :class="`${prefixCls}-right-content`">
				<mf-recharge-pc
					:recharge-id="selectedKeys[0]"
					:apiUrl="apiUrl" />
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, inject, onMounted, watch } from 'vue'
import { useStore } from 'vuex'

import { useRouter } from 'vue-router'
const router = useRouter()

const prefixCls = 'recharge'

const $datas = inject('$datas')
const $axios = inject('$axios')
const $base = inject('$base')
const $message = inject('$message')
const defaultOpenedKeys = ref(['1'])
const selectedKeys = ref([])
const collapsed = ref(false)

const dataList = ref([])
const giftList = ref([])

const store = useStore()

const rechargeLoading = ref(false)
const images = ref([])
const rechargeVisible = ref(false)
const apiUrl = ref('')
const rechargeUrl = ref('')

const mode = $base.isMobile() ? 'horizontal' : 'vertical'

onMounted(() => {
	getBanner()
	getData()
})

watch(
	() => store.getters.lang,
	() => {
		getData()
	}
)

const getData = () => {
	$axios({
		url: 'api/gift/getGiftList',
		method: 'GET'
	}).then((res) => {
		dataList.value = res.data
			?.filter((d) => d.payType)
			.map((item) => {
				return {
					...item,
					title: item.payType
				}
			})
		let rechargeId = dataList.value[0].id
		selectedKeys.value = [rechargeId]
		apiUrl.value = dataList.value[0].apiUrl
		getGiftInfo(rechargeId)
	})
}

const getGiftInfo = (rechargeId) => {
	$axios({
		url: 'api/gift/getGiftInfo',
		method: 'GET',
		data: {
			rechargeId
		}
	}).then((res) => {
		giftList.value = res.data
	})
}

const menuItemClick = (key) => {
	selectedKeys.value = [key]
	let item = dataList.value.find((d) => d.id == key)
	apiUrl.value = item?.apiUrl
}

const subMenuClick = (key, _openKeys) => {}

const jumpUrl = (item) => {
	if (item.type == 0) {
		router.push(item.jumpUrl)
	} else if (item.type == 1) {
		window.open(item.jumpUrl)
	}
}

const getBanner = () => {
	$axios({
		url: 'api/banner/getBannerList',
		method: 'GET',
		data: {
			position: 1
		}
	}).then((res) => {
		images.value = res.rows
	})
}

const showRecharge = () => {
	rechargeVisible.value = true
}
</script>

<style lang="less" scoped>
.recharge {
	display: flex;
	height: 100%;

	&-left {
		height: 100%;
		width: clamp(160px, 12vw, 200px);
		overflow-y: auto;
		flex-shrink: 0;

		.arco-menu-dark {
			background-color: transparent;
			.arco-menu-item {
				margin-bottom: 12px;
				background-color: transparent;
				&:hover,
				&.arco-menu-selected {
					background-color: rgb(var(--primary-6));
					border-radius: 10px;
				}
			}
		}
	}

	&-right {
		flex-grow: 1;
		padding: 0 clamp(12px, 4vw, 60px) clamp(20px, 4vw, 60px) clamp(12px, 2vw, 20px);
		overflow-y: auto;
		min-width: 0; // 防止 flex 子元素溢出

		&-banner {
			width: 100%;
			aspect-ratio: 6 / 1; 
			margin-bottom: clamp(20px, 3vw, 40px);
			border-radius: 10px;
			overflow: hidden;
			cursor: pointer;

			:deep(.arco-carousel) {
				width: 100%;
				height: 100%;
				&-arrow {
					> div {
						width: 36px;
						height: 36px;
						background-color: rgba(0, 0, 0, 0.3);

						.arco-icon {
							width: 20px;
							height: 20px;
						}
					}
				}
			}
		}

		&-qrcode {
			width: 300px;
			height: 300px;
			background: #1a1b20;
			border-radius: 10px;
			padding: 10px;

			.arco-image {
				border-radius: 5px;
			}
		}

		&-wallet {
			font-size: 14px;
			color: #ffffff;
			line-height: 24px;
			margin-top: 30px;
		}

		&-recharge {
			margin-top: 20px;
			width: 120px;
			border-radius: 10px;
		}

		&-content {
			position: relative;
			background-size: cover;
			background-position: center;
			border-radius: 10px;

			&-wrapper {
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				backdrop-filter: blur(12px);
				background: linear-gradient(
					90deg,
					rgba(39, 20, 51, 0.5) 0%,
					rgba(230, 33, 122, 0.5) 49%,
					rgba(39, 20, 51, 0.5) 100%
				);
			}
		}

		&-tips {
			margin-bottom: 40px;
			p {
				font-size: 14px;
				color: #ffffff;
				line-height: 24px;
				margin-bottom: 4px;
			}
		}
	}

	&-content {
		color: #fff;
		padding: 0 40px;
		background-color: #000;

		* {
			color: #999999 !important;
			background-color: transparent !important;
		}
	}
}

// 平板和中等屏幕 (768px - 1024px)
@media (min-width: 768px) and (max-width: 1024px) {
	.recharge {
		&-left {
			width: clamp(140px, 15vw, 180px);
		}
		
		&-right {
			padding: 0 clamp(16px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(12px, 2vw, 20px);
		}
	}
}

// 移动端 (≤576px)
@media (max-width: 576px) {
	.recharge {
		flex-direction: column;

		&-left {
			width: 100%;
			height: auto;
			margin-bottom: 0px;

			:deep(.arco-menu-dark) {
				background-color: transparent;
				.arco-menu-inner {
					padding: 0;
				}
				.arco-menu-item {
					width: 150px;
					height: 40px;
					text-align: center;
					line-height: 40px;
					.arco-menu-icon {
						display: none;
					}
				}

				.arco-menu-selected-label {
					display: none;
				}
			}
		}

		&-right {
			padding: 12px;

			:deep(.arco-carousel) {
				height: 160px;
				.arco-image {
					height: 100%;
					img {
						height: 100%;
					}
				}
			}

			&-banner {
				height: 160px;
				margin-bottom: 20px;
			}
		}
	}
}
</style>
