<template>
	<view class="containers">
		<topWindow></topWindow>
		<view class="content">
			<image src="@/static/logo.png" style="width: 100px; height: 50px;" mode="aspectFit"></image>
		</view>

		<!-- <view class="title">{{$t('index.demo')}}</view>
    <view class="description">{{$t('index.demo-description')}}</view>
    <view class="detail-link">{{$t('index.detail')}}: <text
        class="link">https://uniapp.dcloud.net.cn/collocation/i18n</text></view>
    <view class="locale-setting">{{$t('index.language-info')}}</view>
    <view class="list-item">
      <text class="k">{{$t('index.system-language')}}:</text>
      <text class="v">{{systemLocale}}</text>
    </view>
    <view class="list-item">
      <text class="k">{{$t('index.application-language')}}:</text>
      <text class="v">{{applicationLocale}}</text>
    </view>
    <view class="locale-setting">{{$t('index.language')}}</view>
    <view class="locale-list">
      <view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
        <text class="text">{{item.text}}</text>
        <text class="icon-check" v-if="item.code == applicationLocale"></text>
      </view>
    </view> -->
	</view>
</template>

<script>
	import topWindow from "@/mobile/pages/component/topWindow.vue"
	export default {
		data() {
			return {
				systemLocale: '',
				applicationLocale: ''
			}
		},
		components: {
			topWindow
		},
		computed: {
			locales() {
				return [{
						text: this.$t('locale.auto'),
						code: 'auto'
					}, {
						text: this.$t('locale.en'),
						code: 'en'
					},
					{
						text: this.$t('locale.zh-hans'),
						code: 'zh-Hans'
					},
					{
						text: this.$t('locale.zh-hant'),
						code: 'zh-Hant'
					},
					{
						text: this.$t('locale.ja'),
						code: 'ja'
					}
				]
			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			this.systemLocale = systemInfo.language;
			this.applicationLocale = uni.getLocale();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
			})
		},
		methods: {
			onLocaleChange(e) {
				if (this.isAndroid) {
					uni.showModal({
						content: this.$t('index.language-change-confirm'),
						success: (res) => {
							if (res.confirm) {
								uni.setLocale(e.code);
							}
						}
					})
				} else {
					uni.setLocale(e.code);
					this.$i18n.locale = e.code;
				}
			}
		}
	}
</script>

<style>
	.containers {
		width: 100vw;
		height: 100vh;
		background: #1E5866;
	}
	.content{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.description {
		font-size: 14px;
		opacity: 0.6;
		margin-bottom: 15px;
	}

	.detail-link {
		font-size: 14px;
		word-break: break-all;
	}

	.link {
		color: #007AFF;
		margin-left: 10px;
	}

	.locale-setting {
		font-size: 16px;
		font-weight: bold;
		margin-top: 25px;
		margin-bottom: 5px;
		padding-bottom: 5px;
		border-bottom: 1px solid #f0f0f0;
	}

	.list-item {
		font-size: 14px;
		padding: 10px 0;
	}

	.list-item .v {
		margin-left: 5px;
	}

	.locale-item {
		display: flex;
		flex-direction: row;
		padding: 10px 0;
	}

	.locale-item .text {
		flex: 1;
	}

	.icon-check {
		margin-right: 5px;
		border: 2px solid #007aff;
		border-left: 0;
		border-top: 0;
		height: 12px;
		width: 6px;
		transform-origin: center;
		/* #ifndef APP-NVUE */
		transition: all 0.3s;
		/* #endif */
		transform: rotate(45deg);
	}
</style>