<template>
	<el-header class="pageHeader" style="height:55px;">
		<div class="common-header-left">
			<div class="common-header-logo">
				<img class="logo" @click="getBack" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_logo.png">
			</div>
			<div class="common-header-title">
				<div class="headerView">
					<div class="menuList">
						<div class="menu-item">
							<el-dropdown trigger="click" @command="serverQuery">
								<span class="el-dropdown-link">
								  服务支持
								  <el-icon class="el-icon--right">
									<el-icon-ArrowDown />
								  </el-icon>
								</span>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item command="termQuery">维保期限查询</el-dropdown-item>
										<el-dropdown-item command="componentQuery">主控部件查询</el-dropdown-item>
										<el-dropdown-item command="orderQuery">订单号查询</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</div>
					</div>
					<div class="menuIcon">
						<div class="panel-item" @click="linkSee">
							<el-icon><sc-icon-See /></el-icon>
						</div>
						<div class="panel-item">
							<el-dropdown trigger="click" placement="bottom-start" popper-class="userDropdownClass" ref="userDropdown">
								<div class="user-avatar el-dropdown-link">
									<el-avatar :size="22" shape="circle" :src="this.$store.state.global.login_avatar"><span class="userName">{{ userNameF }}</span></el-avatar>
									<label class="userName">{{ userName?userName:"匿名" }}</label>
									<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
								</div>
								<template #dropdown>
									<div class="userView" style="width: 280px">
										<div class="headerView" v-if="userName">
											<el-icon class="icon" size="18px"><sc-icon-User/></el-icon>
											<span class="name">{{userName}}</span>
											<span class="solid"></span>
											<span class="account">{{userInfo.login_name}}</span>
										</div>
										<div class="itemBox">
											<div class="name">邮箱</div>
											<div class="text">{{userInfo.email}}</div>
										</div>
										<div class="itemBox">
											<div class="name">手机号</div>
											<div class="text">{{userInfo.mobile}}</div>
										</div>
									</div>
									<div class="menuRow">
										<div class="itemCol" @click="linkUser"><el-icon size="16"><sc-icon-AccountNumber/></el-icon><span class="name">帐号信息</span></div>
										<div class="itemCol" @click="clearCache"><el-icon size="16"><sc-icon-ClearCache/></el-icon><span class="name">清除缓存</span></div>
									</div>
									<div class="loginOut">
										<el-button class="btn" style="width: 100%" @click="loginOut">退出登录</el-button>
									</div>
								</template>
							</el-dropdown>
						</div>
					</div>
				</div>
			</div>
		</div>
	</el-header>
</template>

<script>
import {eventBus} from "@/utils/eventBus";

export default {
	props: {
		title: { type: String, default: "" }
	},
	data(){
		return{
			userName: "",
			userNameF: "",
			userInfo:{},
		}
	},
	created() {
		const userInfo = this.$TOOL.data.get("USER_INFO");
		if(userInfo){
			this.$store.commit("SET_LOGIN_AVATAR", userInfo.avatar);
			this.$store.commit("SET_LOGIN_NAME", userInfo.name);

			this.userInfo = userInfo;
			this.userName = this.$store.state.global.login_name;
			if(userInfo.company_info){
				this.companyName = userInfo.company_info.name;
			}
			if(this.userName!=''){
				this.userNameF = this.userName.substring(0, 1);
			}
			this.avatar = this.$store.state.global.login_avatar;
			this.userId = userInfo.id;
		}
	},
	mounted() {

	},
	methods:{
		serverQuery(command){
			eventBus.$emit('headerRouterBack',{name:'serveView'});
			if (command == "termQuery") {
				eventBus.$emit('queryBack',{name:'term'});
			}
			if (command == "componentQuery") {
				eventBus.$emit('queryBack',{name:'widget'});
			}
			if (command == "orderQuery") {
				eventBus.$emit('queryBack',{name:'order'});
			}
		},
		linkSee(){
			eventBus.$emit('headerRouterBack',{name:'personalCenter'});
			this.$nextTick(()=>{
				eventBus.$emit('userBack',{name:'queryHistory'});
			})
		},
		linkUser(){
			this.$refs.userDropdown.handleClose();
			eventBus.$emit('headerRouterBack',{name:'personalCenter'});
			this.$nextTick(()=>{
				eventBus.$emit('userBack',{name:'editAccount'});
			})
		},
		clearCache(){
			this.$confirm('清除缓存会将系统初始化，包括登录状态、主题、语言设置等，是否继续？', '警告', {
				type: 'warning',
			}).then(async () => {
				const loading = this.$loading()
				const res = await this.$API.system.user.logout.post();
				if (res.code == 200) {
					this.$TOOL.data.clear()
					this.$router.replace({path: '/login'});
					setTimeout(() => {
						loading.close()
						location.reload()
					}, 1000)
				}
			}).catch(() => {
				//取消
			})
		},
		loginOut(){
			this.$confirm('确认是否退出当前用户？', '警告', {
				type: 'warning',
				confirmButtonText: '退出',
				confirmButtonClass: 'el-button--danger'
			}).then(async () => {
				const res = await this.$API.system.user.logout.post();
				if(res.code == 200){
					this.$TOOL.data.clear();
					this.$socketApi.closeSock(true);
					this.$router.replace({path: '/login'});
				}
			}).catch(() => {
				//取消退出
			})
		},
		getBack(){
			eventBus.$emit('headerRouterBack',{name:'mainView'});
		}
	}
}
</script>

<style lang="scss">
	.common-header-left{
		display: flex;
		flex: 1;
		min-width: 0;
		.common-header-title{
			flex: 1;
			border-left: 0;
		}
	}
	.userName{
		display: inline-block;
		margin-left: 5px;
		font-size: 12px;
		cursor: pointer;
	}
	.headerView{
		display: flex;
		justify-content: space-between;

		.menuList{
			display: flex;
			flex-direction: row;
			.menu-item{
				margin-right: 20px;
				display: flex;
				align-items: center;
				.el-dropdown-link{
					height: 55px;
					display: flex;
					align-items: center;
					cursor: pointer;
				}
			}
		}
		.menuIcon{
			display: flex;
			flex-direction: row;
			.panel-item{
				margin-left: 10px;
				padding: 0 6px;
				display: flex;
				align-items: center;
				cursor: pointer;
				.el-dropdown{
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					.el-dropdown-link{
						height: 100%;
						display: flex;
						align-items: center;
						cursor: pointer;
					}
				}
			}
		}
	}

	.userView{
		background: #F5F7FA;
		padding:10px;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		border-bottom: 1px solid #EBEEF5;
		.headerView{
			padding: 0 6px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-bottom: 10px;
			.icon{
				color: var(--el-color-primary);
				display: flex;
				align-items: center;
			}
			.name{
				font-size: 16px;font-weight: 500;
				margin-left: 8px;
			}
			.solid{
				width: 2px;
				height: 18px;
				background: var(--el-color-danger);
				margin: 0 12px;
			}
			.account{
				font-size: 14px;
			}
		}
		.itemBox{
			display: flex;align-items: center;
			padding: 6px 6px;
			font-size: 13px;
			.name{
				width: 65px;
				color: #888;
			}
			.text{
				flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
			}
		}
	}
	.menuRow{
		padding: 10px;
		.itemCol{
			padding: 6px;
			border-radius: 3px;
			display: flex;
			align-items: center;
			color: #888;
			border: 1px solid #fff;
			.name{
				margin-left: 10px;
			}
		}
		.itemCol:hover{
			background: #e7eff8;
			border-color:#b8d1ec;
			color: #1367C1;
			cursor: pointer;
		}
	}
	.loginOut{
		border-top: 1px solid #EBEEF5;
		padding: 16px 10px;
		.btn{
			font-weight: inherit;
		}
	}

	.userDropdownClass .el-popper__arrow::before{
		background: #F5F7FA !important;
	}
</style>
