<template>
	<page-meta>
		<navigation-bar :title="$tt('navBar.language')" title-align="center" background-color="#007AFF" />
	</page-meta>
	<view class="container">
		<u-radio-group v-model="applicationLocale">
			<view class="group-wrap">
				<u-cell-group :border="false">
					<view class="cell-wrap" v-for="(item, index) in locales" :key="index">
						<u-cell :border="false">
							<view slot="title" class="slot-title">
								<text class="cell-text">{{item.text}}</text>
							</view>
							<view slot="value">
								<u-radio shape="circle" :name="item.code" iconSize="16"
									@change="changeLanuage(item)"></u-radio>
							</view>
						</u-cell>
					</view>
				</u-cell-group>
			</view>
		</u-radio-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemLocale: '',
				applicationLocale: 'en-US',
			};
		},
		computed: {
			locales() {
				return [{
						text: this.$tt('locale.en-US'),
						code: 'en-US'
					},
					{
						text: this.$tt('locale.zh-CN'),
						code: 'zh-CN'
					},
				]

			},
		},
		onLoad() {
			this.loadSelectedLanguage();
		},
		methods: {
			//切换语言
			changeLanuage(e) {
				uni.showToast({
					icon: 'success',
					title: this.$tt('common.operation')
				});
				this.$i18n.locale = e.code;
				uni.setLocale(e.code);
				wx.setStorageSync('language', e.code)
			},
			loadSelectedLanguage() {
				// 获取之前保存的语言设置
				const selectedLanguage = wx.getStorageSync('language');
				// 如果获取到了，使用该语言设置
				if (selectedLanguage) {
					this.applicationLocale = selectedLanguage;
				} else {
					// 如果没有获取到，使用默认设置
					this.applicationLocale = 'zh-CN'; // 默认设置为中文
				}
			}
		}
	};
</script>
<style>
	page {
		height: 100%;
		background: #eef3f7;
	}
</style>
<style lang="scss" scoped>
	/* .container {
  padding: 20px;
} */

	.container {
		.group-wrap {
			width: 100%;
			margin: 20rpx 20rpx;

			.cell-wrap {
				background-color: #fff;
				border-radius: 10rpx;

				&:not(:first-child) {
					margin-top: 24rpx;
				}

				.slot-title {
					display: flex;
					flex-direction: row;
					align-items: center;

					.cell-text {
						font-size: 28rpx;
						margin-left: 20rpx
					}
				}
			}
		}
	}
</style>