


<template>
	<view class="u-page">

		<view class="empty-select">
			<u-cell
				:titleStyle="{fontWeight: 500}"
				@click="changeLang"
				:title="$t('pages.user.setting.index.setLang')"
				:value="nowLang"
				isLink
			>
				<image
					slot="icon"
					class="u-cell-icon"
					src="@/static/img/common/lang.png"
					mode="widthFix"
				></image>
			</u-cell>
		</view>
		
		<view class="btn_box">
		<u-button type="primary" :plain="true" :hairline="true" :text="$t('locale.logout')" size="normal" @click="logout"></u-button>
		</view>
		
		
		<u-action-sheet
			:show="changeLangShow"
			@close="changeLangShow = false"
			:actions="langList"
			@select="confirmLang"
			cancelText="取消"
		>
		</u-action-sheet>
		
		
	</view>
</template>

<script>
	export default {
		data() {
		
			return {
				systemLocale: '',
				applicationLocale: '',
				nowLang:'',//当前语言
				// list: [{
				// 		imgName: 'lang',
				// 		title: this.$t('pages.user.setting.index.setLang'),
				// 		iconUrl: '/static/img/common/lang.png',
				// 	},
				// ],
				changeLangShow:false,
				langList: [
					{
						name: this.$t('locale.zh-hans'),
						val:'zh-Hans',
					},
					{
						name: this.$t('locale.zh-hant'),
						val:'zh-Hant',
					},
					{
						name: this.$t('locale.en'),
						val:'en'
					}],
			    langListVal:['zh-Hans','zh-Hant','en'],	 
			}
		},
		onLoad() {
			var _this =this;
			_this.loadData();
		},
		methods: {
			loadData(){
				var _this =this;
				let systemInfo = uni.getSystemInfoSync();
				_this.systemLocale = systemInfo.language;
				var lang =  uni.getLocale();
				console.log('lang：'+lang);
				_this.applicationLocale =lang;
				_this.returnLang(lang);
				_this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
				uni.onLocaleChange((e) => {
				  _this.applicationLocale = e.locale;
				  _this.returnLang(e.locale);
				})
			},
			returnLang(code)
			{
				var _this =this;
				var list = _this.langListVal;
				list.forEach((item, $index, arr) => {
				  //console.log(`${item} => ${$index} => ${arr}`);
				  if(item == code)
				  {
					  console.log(_this.langList[$index].name);
					  _this.nowLang = _this.langList[$index].name;
					  return;
				  }
				})
			},
			//改变当前语言
			changeLang() {
					//this[`show${index}`] = true
					this[`changeLangShow`] = true;
			},
			confirmLang(e){
				console.log(e);
				 var _this =this;
				 _this.onLocaleChange(e.val);
			},
			
			onLocaleChange(code) {
				   var _this =this;
					_this[`changeLangShow`] = false;
					uni.showModal({
					  content: _this.$t('locale.language-change-confirm'),
					  success: (res) => {
						if (res.confirm) {
						  uni.setLocale(code);
						  _this.$i18n.locale = code;
						  _this.returnLang(code);
						  uni.switchTab({
						  	url:'pages/index/index'
						  })
						}
					  }
					})
				
				
			},
			
			//退出登录
			logout(){
				var _this =this;
				var post = {};
				_this.$api.post('user/logout',post,function(rs){
					console.log(rs);
					uni.removeStorageSync('userInfo');
					uni.removeStorageSync('token');
					uni.$u.route({
							type:'switchTab',
							url:'pages/index/index',
							params: {}
						});
				},function(err){
					console.log(err);
				});
				uni.$u.toast(_this.$t('locale.logout'));
				
			},
		}
	}
</script>

<style lang="scss">
	.u-block{
		padding: 14px;
		&__section{
			margin-bottom:10px;
		}
		&__title {
			margin-top:10px;
			font-size: 15px;
			color: $u-content-color;
			margin-bottom:10px;
		}
		&__flex{
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
		}
	}
	
	// 使用了cell组件的icon图片样式
	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}
	
	.u-page {
		padding: 15px 15px 40px 15px;
	}
	
	.u-demo-block {
		flex: 1;
		margin-bottom: 23px;
		
		&__content {
			@include flex(column);
		}
		
		&__title {
			font-size: 14px;
			color: rgb(143, 156, 162);
			margin-bottom: 8px;
			@include flex;
		}
	}
	
	
	.u-page {
		padding: 40rpx 0px;

		&__top-box {
			padding-left: 40rpx;
		}
	}

	.empty-select {
		margin-top: 0px;
	}
	
	.btn_box{ width: 80%; margin: 120rpx auto 20rpx auto;}
</style>
