<template>
	<view class="language-page">
		<view class="header">
			<text class="title">语言设置</text>
		</view>
		
		<view class="language-list">
			<view class="language-item" 
				v-for="(item, index) in languages" 
				:key="index"
				@tap="selectLanguage(item.value)"
			>
				<text>{{item.label}}</text>
				<text class="iconfont check" v-if="currentLang === item.value">&#xe685;</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentLang: 'zh-CN',
			languages: [
				{ label: '简体中文', value: 'zh-CN' },
				{ label: '繁體中文', value: 'zh-TW' },
				{ label: 'English', value: 'en-US' }
			]
		}
	},
	onLoad() {
		// 获取当前语言设置
		const lang = uni.getStorageSync('language') || 'zh-CN';
		this.currentLang = lang;
	},
	methods: {
		selectLanguage(lang) {
			if (lang === this.currentLang) return;
			
			uni.showModal({
				title: '提示',
				content: '切换语言需要重启应用，是否继续？',
				success: (res) => {
					if (res.confirm) {
						// 保存语言设置
						uni.setStorageSync('language', lang);
						this.currentLang = lang;
						
						// 重启应用
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/indexNew'
							});
						}, 1500);
					}
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.language-page {
	min-height: 100vh;
	background: #f5f5f5;
}

.header {
	background: #fff;
	padding: 20rpx 30rpx;
	
	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
}

.language-list {
	margin-top: 20rpx;
	background: #fff;
	
	.language-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1px solid #eee;
		
		text {
			font-size: 28rpx;
			color: #333;
		}
		
		.check {
			color: #D93025;
		}
		
		&:last-child {
			border-bottom: none;
		}
	}
}
</style> 