<template>
	<div class="user-bar">
		<div class="screen panel-item hidden-sm-and-down" @click="screen">
			<el-icon style="width:1.2em;height:1.2em"><el-icon-full-screen style="width:1.2em;height:1.2em" /></el-icon>
		</div>
		<el-dropdown class="user panel-item" trigger="click" @command="handleLanguage">
			<div class="user-avatar">
				<el-icon style="width:1.2em;height:1.2em;"><sc-icon-c-n_-e-n_-transfer style="width:1.2em;height:1.2em" /></el-icon>
			</div>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item command="CN">{{ $t('login.languageCN') }}</el-dropdown-item>
					<el-dropdown-item divided command="EN">{{ $t('login.languageEN') }}</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
		<el-dropdown class="user panel-item" trigger="click" @command="handleUser">
			<div class="user-avatar">
				<el-avatar :size="30" src="img/header.png"></el-avatar>
				<label>{{ userName }}</label>
				<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
			</div>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item command="uc">{{ $t('user.personSetting') }}</el-dropdown-item>
					<el-dropdown-item divided command="outLogin">{{ $t('user.loginOut') }}</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</div>
</template>

<script>
	export default {
		components: {
		},
		data(){
			return {
				userName: "",
			}
		},
		created() {
			var userInfo = this.$TOOL.data.get("USER_INFO");
			this.userName = userInfo.AdminName;
			if (this.$TOOL.data.get("APP_LANG"))
			{
				if (this.$TOOL.data.get("APP_LANG") != "zh-CN" && this.$TOOL.data.get("APP_LANG") != "en-US") 
				{
					this.$TOOL.data.remove("APP_LANG");
				}
			}
		},
		watch:{
			'config.colorPrimary'(val){
				document.documentElement.style.setProperty('--el-color-primary', val);
				this.$TOOL.data.set("APP_COLOR", val);
			}
		},
		methods: {
			//个人信息
			handleUser(command) {
				if(command == "uc"){
					this.$router.push({path: '/usercenter'});
				}
				if(command == "cmd"){
					this.$router.push({path: '/cmd'});
				}
				if(command == "modifyPwd"){
					var adminInfo = this.$TOOL.data.get("USER_INFO");
					var adminCode = ""
					if (adminInfo)
					{
						adminCode = adminInfo.AdminCode
					}
					//修改密码
					this.dialog.save = true
					this.$nextTick(() => {
						this.$refs.saveDialog.open('edit').setData(adminCode)
					})
				}
				if(command == "outLogin"){
					this.$confirm((this.$t('dialogBox.confirmWarningText')+this.$t('login.loginOutConfirmTitle')),this.$t('dialogBox.confirmWarningTitle'), {
						type: 'warning',
						confirmButtonText: this.$t('dialogBox.confirmWarningButtonText'),
						cancelButtonText: this.$t('dialogBox.cancelButtonText'),
						confirmButtonClass: 'el-button--danger'
					}).then(() => {
						this.$API.wing.post("AdminLoginOut", {});
						this.$router.replace({path: '/login'});
					}).catch(() => {
					})
				}
			},
			//语言切换
			handleLanguage(command) {
				if(command == "CN"){
					this.$i18n.locale = "zh-CN"
					this.$TOOL.data.set("APP_LANG", "zh-CN");
					this.$emit('fatherMethod');
				}
				if(command == "EN"){
					this.$i18n.locale = "en-US"
					this.$TOOL.data.set("APP_LANG", "en-US");
					this.$emit('fatherMethod');
				}
			},
			//全屏
			screen(){
				var element = document.documentElement;
				this.$TOOL.screen(element)
			},
			//显示短消息
			showMsg(){
				this.msg = true
			},
			//标记已读
			markRead(){
				this.msgList = []
			}
		}
	}
</script>

<style scoped>
	.user-bar {display: flex;align-items: center;height: 100%;}
	.user-bar .panel-item {padding: 0 10px;cursor: pointer;height: 100%;display: flex;align-items: center;}
	.user-bar .panel-item i {font-size: 18px;}
	.user-bar .panel-item:hover {background: rgba(0, 0, 0, 0.1);}
	.user-bar .user-avatar {height:49px;display: flex;align-items: center;}
	.user-bar .user-avatar label {display: inline-block;margin-left:5px;font-size: 12px;cursor:pointer;}

	.msg-list li {border-top:1px solid #eee;}
	.msg-list li a {display: flex;padding:20px;}
	.msg-list li a:hover {background: #ecf5ff;}
	.msg-list__icon {width: 40px;margin-right: 15px;}
	.msg-list__main {flex: 1;}
	.msg-list__main h2 {font-size: 15px;font-weight: normal;color: #333;}
	.msg-list__main p {font-size: 12px;color: #999;line-height: 1.8;margin-top: 5px;}
	.msg-list__time {width: 100px;text-align: right;color: #999;}

	[data-theme='dark'] .msg-list__main h2 {color: #d0d0d0;}
	[data-theme='dark'] .msg-list li {border-top:1px solid #363636;}
	[data-theme='dark'] .msg-list li a:hover {background: #383838;}
	.box{transition: transform .3s;width: 4em;height: 1.5em;}
	.box:hover {transform: scale(1.1);}
</style>