<template>
	<div class="award-container">
		<div class="header-wrapper">
			<div class="header flex align-center space-between">
				<div class="header-left">
					<img
						src="@/assets/images/award/code_create_logo.png"
						class="logo"
					/>
				</div>
				<div
					class="header-right flex align-center"
					@click="handleBtnClick"
				>
					<div class="text">{{ btnText }}</div>
					<img
						src="@/assets/images/award/arrow.png"
						alt=""
						class="arrow"
					/>
				</div>
			</div>
			<div class="header-placeholder"></div>
		</div>
		<router-view />
		<div class="footer flex space-between align-center">
			<div class="social-list flex">
				<a
					href="https://xhslink.com/m/5Ony2FapizV"
					target="_blank"
				>
					<img
						src="@/assets/images/award/xiaohongshu.svg"
						alt=""
					/>
				</a>
				<a
					href="https://www.linkedin.com/company/code-create-limited"
					target="_blank"
				>
					<img
						src="@/assets/images/award/linkdin.svg"
						alt=""
					/>
				</a>
				<a
					href="https://www.facebook.com/CodeCreateAI"
					target="_blank"
				>
					<img
						src="@/assets/images/award/facebook.svg"
						alt=""
					/>
				</a>
				<a
					href="https://www.tiktok.com/@aida_codecreate"
					target="_blank"
				>
					<img
						src="@/assets/images/award/tiktok.svg"
						alt=""
					/>
				</a>
				<a
					href="javascript:void(0)"
					@click="showQRcode = true"
				>
					<img
						src="@/assets/images/award/weichat.svg"
						alt=""
					/>
				</a>
			</div>
			<div class="copyright">© Code-Create 2026</div>
		</div>
		<div
			class="qrcode-mask flex flex-center"
			v-if="showQRcode"
		>
			<div class="code-wrapper flex flex-col align-center">
				<img
					src="@/assets/images/award/close.svg"
					class="close-icon"
					@click="handleCloseQRcode"
				/>
				<div class="code-title">{{ $t('AwardsPage.wechatTitle') }}</div>
				<img
					src="@/assets/images/award/qrcode.jpg"
					class="qrcode"
				/>
				<div class="tips">{{ $t('AwardsPage.wechatDesc') }}</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, computed, watch, onMounted } from 'vue'
	import { useRoute, useRouter } from 'vue-router'
	import { useI18n } from 'vue-i18n'
	import { getCookie } from '@/utils/cookie'

	const route = useRoute()
	const router = useRouter()
	const { locale } = useI18n()

	onMounted(() => {
		// 初始化语言设置
		const loginLanguage = localStorage.getItem('loginLanguage')
		if (loginLanguage) {
			locale.value = loginLanguage
		} else {
			const userLanguage = getCookie('language')
			if (userLanguage) {
				locale.value = userLanguage
			}
		}
	})

	const showQRcode = ref(false)
	const handleCloseQRcode = () => {
		showQRcode.value = false
	}

	type BtnType = 'index' | 'form'
	const btnType = ref<BtnType>('index')
	const btnText = computed(() => {
		if (btnType.value === 'index') {
			return locale.value === 'CHINESE_SIMPLIFIED' ? '提交申请' : 'Submit your Application'
		}
		if (btnType.value === 'form') {
			return locale.value === 'CHINESE_SIMPLIFIED' ? '赛事介绍' : 'Back to Introduction'
		}
	})

	watch(
		() => route.path,
		val => {
			if (val.includes('contestants')) {
				btnType.value = 'form'
			} else {
				btnType.value = 'index'
			}
		},
		{
			immediate: true
		}
	)
	const handleBtnClick = () => {
		
		const lang = route.params.lang ? `/${route.params.lang}` : ''
		if (btnType.value === 'index') {
			router.push(`${lang}/contestants`)
		} else {
			router.push(`${lang}/`)
		}
	}
</script>

<style lang="less" scoped>
	.award-container {
		overflow: auto;
		height: 100vh;
		// 隐藏滚动条箭头，只显示滚动条本体
		box-sizing: border-box;

		&::-webkit-scrollbar {
			display: none;
			width: 0;
			height: 0;
		}
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.header-wrapper {
		.header-placeholder {
			height: 8rem;
		}
		.header {
			height: 8rem;
			background-color: #232323;
			padding-left: 21.5rem;
			padding-right: 8.6rem;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 9;
			.header-left {
				.logo {
					width: 13rem;
					height: 5rem;
				}
			}
			.header-right {
				column-gap: 1rem;
				cursor: pointer;
				.text {
					font-size: 1.6rem;
					color: #fff;
				}
				.arrow {
					width: 2.4rem;
					height: 2.4rem;
				}
			}
		}
	}
	.footer {
		height: 10rem;
		padding-left: 21.5rem;
		box-sizing: border-box;
		padding-right: 22rem;
		background-color: #232323;
		.social-list {
			column-gap: 2rem;
			img {
				width: 2rem;
				height: 2rem;
			}
		}
		.copyright {
			color: #fff;
			font-family: 'Arial';
			font-weight: 400;
			font-size: 1.2rem;
		}
	}
	.qrcode-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.45);
		.code-wrapper {
			width: 60rem;
			height: 49.4rem;
			background-color: #fff;
			position: relative;
			border-radius: 0.8rem;
			padding-top: 6rem;
			.close-icon {
				width: 2.4rem;
				height: 2.4rem;
				position: absolute;
				top: 2rem;
				right: 2rem;
				cursor: pointer;
			}
			.code-title {
				font-family: 'PoppinsBold';
				font-weight: 600;
				font-size: 3rem;
				color: #232323;
			}
			.qrcode {
				width: 25.8rem;
				height: 25.8rem;
				margin: 3rem 0 1rem;
			}
			.tips {
				font-family: Arial;
				font-weight: 400;
				font-size: 1.4rem;
				color: #585858;
			}
		}
	}
</style>
