<template>
	<ciy-header :title="lang('apptitle')"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">{{lang('多语言切换')}}</view>
			<view class="content">
				<view class="langlist">
					<view v-for="(item,index) in $i18n.messages" :key="index" @tap="setlang(index)" :class="{curr:index==$i18n.locale}">
						<text class="kbd">{{index}}</text>
						{{item['lang.showname']}}
					</view>
				</view>
				<view style="text-align: center;">apptitle: {{lang('apptitle')}}</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">多语言用法</view>
			<view class="content">
				<view>引用vue-i18n插件。</view>
				<view>首次进入应用跟随系统语言并记忆。</view>
				<view><text class="kbd">HTML</text>
					<view style="display:inline;" v-html="tobr(`<view>{{lang('apptitle')}}</view>`)"></view>
				</view>
				<view><text class="kbd">APP</text>
					<view style="display:inline;" v-html="tobr(`app.lang('apptitle');`)"></view>
				</view>
				<view><text class="kbd">JS</text>
					<view style="display:inline;" v-html="tobr(`this.lang('apptitle');`)"></view>
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">语言检查</view>
			<view class="content">
				<view v-if="chklang.length == 0">未发现问题</view>
				<view v-for="(item,index) in chklang" :key="index">{{item}}</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">语言翻译列表</view>
			<view class="content">
				<ciy-textmore height="10em" bg="var(--bg2)">
					<view v-for="(item,index) in $i18n.messages['zh-Hans']" :key="index">
						<text class="kbd">{{index}}</text><br />
						<view v-for="(langobj,lang) in $i18n.messages" :key="lang" style="padding-left:2em;">
							<text class='code'>{{lang}}</text>
							{{$i18n.messages[lang][index]}}
						</view>
					</view>
				</ciy-textmore>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">多语言配置</view>
			<view class="content">
				<view>在util/langload.js中，设置语言json文件。</view>
				<view>在util/lang/语言.json中，配置具体翻译文本。</view>
				<view>语言.json中，至少应包含以下两个值:<br />
					　lang.showname: 为目标国语言名称。<br />
					　lang.chname: 中文语言名。<br />
				</view>
				<view>
					<b>建议语言代码表：</b>
					<view v-for="(item,index) in langs" :key="index"><text class="kbd">{{item.code}}</text>{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="hr"></view>
	</view>
</template>

<style>
	@import '@/pages/demo/zdemo.css';

	.langlist>view {
		padding: 1em;
	}

	.langlist>.curr {
		color: var(--man6);
	}
</style>

<script>
	export default {
		data() {
			return {
				chklang: [],
				langs: [{
						code: 'zh-Hans',
						name: '简体中文'
					},
					{
						code: 'zh-Hant',
						name: '繁体中文'
					},
					{
						code: 'en',
						name: '英文'
					},
					{
						code: 'fr',
						name: '法文'
					},
					{
						code: 'ar',
						name: '阿拉伯文'
					},
					{
						code: 'be',
						name: '白俄罗斯文'
					},
					{
						code: 'bg',
						name: '保加利亚文'
					},
					{
						code: 'ca',
						name: '加泰罗尼亚文'
					},
					{
						code: 'cs',
						name: '捷克文'
					},
					{
						code: 'da',
						name: '丹麦文'
					},
					{
						code: 'de',
						name: '德文'
					},
					{
						code: 'el',
						name: '希腊文'
					},
					{
						code: 'es',
						name: '西班牙文'
					},
					{
						code: 'et',
						name: '爱沙尼亚文'
					},
					{
						code: 'fi',
						name: '芬兰文'
					},
					{
						code: 'he',
						name: '希伯来文'
					},
					{
						code: 'hr',
						name: '克罗地亚文'
					},
					{
						code: 'hu',
						name: '匈牙利文'
					},
					{
						code: 'id',
						name: '印度尼西亚文'
					},
					{
						code: 'is',
						name: '冰岛文'
					},
					{
						code: 'it',
						name: '意大利文'
					},
					{
						code: 'ja',
						name: '日文'
					},
					{
						code: 'ko',
						name: '朝鲜文'
					},
					{
						code: 'lt',
						name: '立陶宛文'
					},
					{
						code: 'lv',
						name: '拉托维亚文'
					},
					{
						code: 'mk',
						name: '马其顿文'
					},
					{
						code: 'nb',
						name: '挪威文'
					},
					{
						code: 'nl',
						name: '荷兰文'
					},
					{
						code: 'no',
						name: '挪威文'
					},
					{
						code: 'pl',
						name: '波兰文'
					},
					{
						code: 'pt',
						name: '葡萄牙文'
					},
					{
						code: 'ro',
						name: '罗马尼亚文'
					},
					{
						code: 'ru',
						name: '俄文'
					},
					{
						code: 'sk',
						name: '斯洛伐克文'
					},
					{
						code: 'sl',
						name: '斯洛文尼亚文'
					},
					{
						code: 'sq',
						name: '阿尔巴尼亚文'
					},
					{
						code: 'sr',
						name: '塞尔维亚文'
					},
					{
						code: 'sv',
						name: '瑞典文'
					},
					{
						code: 'th',
						name: '泰文'
					},
					{
						code: 'tr',
						name: '土耳其文'
					},
					{
						code: 'uk',
						name: '乌克兰文'
					},
					{
						code: 'vi',
						name: '越南文'
					},
				]
			}
		},
		onLoad() {
			this.checklang();
		},
		methods: {
			checklang() {
				this.chklang = [];
				var langs = [];
				for (var lang in this.$i18n.messages) {
					if (lang == 'zh-Hans')
						continue;
					langs.push(lang);
				}
				for (var key in this.$i18n.messages['zh-Hans']) {
					for (var lang in langs) {
						if (!this.$i18n.messages[langs[lang]].hasOwnProperty(key))
							this.chklang.push(langs[lang] + '中，' + key + ' 不存在。');
					}
				}
				for (var lang in langs) {
					for (var othkey in this.$i18n.messages[langs[lang]]) {
						if (!this.$i18n.messages['zh-Hans'].hasOwnProperty(othkey))
							this.chklang.push(langs[lang] + '中，' + othkey + ' 未被使用。');
					}
				}
			},
			setlang(lang) {
				this.$i18n.locale = lang;
				this.setstorage("_lang", lang);
			}
		}
	}
</script>