<template>
	<view v-if="visible" class="popup-overlay" :class="{ 'popup-overlay-enter': showAnimation }">
		<view class="popup-overlay__content" :class="{ 'popup-scale-enter': showAnimation }" @click="handleContentClick">
			<view class="lang-container">
				<!-- 顶部留白占位，视觉更贴近设计稿 -->
				<view class="lang-body">
					<!-- #ifdef APP -->
					<scroll-view class="list-scroll">
						<view v-for="item in langList" :key="item.value" class="lang-item" @click="handleSelect(item)">
							<text class="lang-text">{{ item.label }}</text>
							<text v-if="selectedValue == item.value" class="check-text">✔</text>
						</view>
						<!-- 调试信息：显示数据长度 -->
						<view v-if="langList.length == 0" class="debug-info">
							<text class="debug-text">暂无语言数据</text>
						</view>
					</scroll-view>
					<!-- #endif -->
				</view>
				<view class="action-bar">
					<button class="btn-cancel" hover-class="hover_btn" @click="handleCancel">
						取消
					</button>
					<button class="btn-confirm" hover-class="hover_btn" @click="handleConfirm">
						确定
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="uts">
	import { LanguageOption } from '../../types/index.uts'
	// 语言选项类型统一在 types/language.uts 中定义

	// 组件属性（避免与其它文件的 Props 命名冲突）
	interface LangProps {
		visible : boolean
		closeOnOverlay : boolean
		languages : Array<LanguageOption> | null
		modelValue : string | null
	}

	// 组件事件
	interface Emits {
		(e : 'close') : void
		(e : 'cancel') : void
		(e : 'confirm', value : string) : void
		(e : 'update:modelValue', value : string) : void
		(e : 'change', value : string) : void
	}

	const props = withDefaults(defineProps<LangProps>(), {
		visible: false,
		closeOnOverlay: false
	})

	const emit = defineEmits<Emits>()

	// 最终用于渲染的语言列表，只使用从父组件传入的数据
	const langList = computed<Array<LanguageOption>>(() => {
		if (props.languages != null && props.languages.length > 0) {
			return props.languages as Array<LanguageOption>
		}
		// 如果没有传入数据，返回空数组
		return [] as Array<LanguageOption>
	})

	const selectedValue = ref<string>((props.modelValue != null) ? (props.modelValue as string) : 'zh-Hans')

	const showAnimation = ref(false)

	// 监听外部传入的 modelValue 变化
	const modelValueRef = computed<string | null>(() => props.modelValue as string | null)
	watch(modelValueRef, (nv : string | null, _ov : string | null) : void => {
		if (nv != null) {
			selectedValue.value = nv as string
		}
	})

	// 监听外部传入的 languages 变化，用于调试
	const languagesRef = computed<Array<LanguageOption> | null>(() => props.languages)
	watch(languagesRef, (nv : Array<LanguageOption> | null, _ov : Array<LanguageOption> | null) : void => {
	}, { immediate: true })

	// 监听弹窗显示状态，控制动画
	watch((): boolean => props.visible, (newVal: boolean): void => {
		if (newVal) {
			// 弹窗打开时，延迟一帧触发动画
			nextTick(() => {
				showAnimation.value = true
			})
		} else {
			// 弹窗关闭时，重置动画状态
			showAnimation.value = false
		}
	})

	const handleOverlayClick = () => {
		if (props.closeOnOverlay == true) {
			emit('close')
		}
	}

	const handleContentClick = () => {
		// 阻止事件冒泡
	}

	const handleClose = () => {
		emit('close')
	}

	const handleCancel = () => {
		emit('cancel')
		handleClose()
	}

	const handleConfirm = () => {
		emit('confirm', selectedValue.value)
		emit('update:modelValue', selectedValue.value)
		handleClose()
	}

	const handleSelect = (item : LanguageOption) => {
		selectedValue.value = item.value
		emit('update:modelValue', item.value)
		emit('change', item.value)
	}
</script>

<style>
	/* 遮罩层，与其它弹窗保持一致 */
	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: background-color 0.3s ease;
	}

	.popup-overlay-enter {
		background-color: rgba(0, 0, 0, 0.5);
	}

	.popup-overlay__content {
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		transform: scale(0.7);
		transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	.popup-scale-enter {
		transform: scale(1);
	}

	/* 容器 */
	.lang-container {
		width: 640rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx 24rpx 24rpx 24rpx;
		box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.2);
	}

	.lang-body {
		max-height: 800rpx;
	}

	.list-scroll {
		width: 100%;
		height: 800rpx;
	}

	.list-view {
		width: 100%;
	}

	.lang-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 96rpx;
		border-bottom: 1rpx solid #EEEEEE;
		padding: 0 8rpx 0 8rpx;
	}

	.lang-text {
		font-size: 28rpx;
		color: #333333;
	}

	.check-text {
		font-size: 28rpx;
		color: #111111;
	}

	.action-bar {
		margin-top: 24rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.btn-cancel {
		width: 181rpx;
		height: 83rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		border: 2rpx solid #FF86C3;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 24rpx;
		color: #000000;
		margin-right: 20rpx;
		line-height: 83rpx;
	}


	.btn-confirm {
		width: 181rpx;
		height: 83rpx;
		background: #FD3DA0;
		border-radius: 14rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 24rpx;
		color: #FFFFFF;
		border: none;
		line-height: 83rpx;
	}

	.debug-info {
		padding: 20rpx;
		text-align: center;
	}

	.debug-text {
		font-size: 24rpx;
		color: #999999;
	}
</style>