<template>
	<view class="content">
		<view class="list">
			<view class="list-item flex" v-for="(item, index) in list" @click="change(item.type)">
				<view class="item-left">{{ item.name }}</view>
				<view class="item-right" v-if="language == item.type"><image src="../../static/img/gou.png" mode=""></image></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			language: '',
			list: [{ name: '繁體中文', type: 'zh-CN' }, { name: 'English', type: 'en' }]
		};
	},
	onLoad() {
		let lang = uni.getStorageSync('lang');
		console.log(lang);
		if (lang) {
			this.language = lang;
		}
	},
	onShow() {},
	methods: {
		change(type) {
			if (type == 'zh-CN') {
				this._i18n.locale = 'zh_cn';
			} else {
				this._i18n.locale = type;
			}
			this.language = type;
			uni.setStorageSync('lang', type);
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	min-height: 100%;
	height: auto;
	background: #fff;
}
.list-item {
	padding: 40rpx 20rpx;
	.item-left {
		font-size: 36rpx;
		color: #707a8a;
	}
	.item-right {
		width: 36rpx;
		height: 36rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
