<template>
	<div class="user-bar">
		<el-tooltip class="box-item" effect="dark" :content="userInfo.vip_at==0?'到期时间：永久':'到期时间：'+$TOOL.getTime(userInfo.vip_at,'YYYY年MM月DD日')" placement="bottom" v-if="userInfo.agent_id>0">
			<div class="screen panel-item hidden-sm-and-down">
					<el-icon><el-icon-timer /></el-icon> <span>{{userInfo.vip_at==0?'永久':''+$TOOL.getTime(userInfo.vip_at,'YYYY年MM月DD日')}}</span>
			</div>
		</el-tooltip>
		<div class="screen panel-item" v-if="userInfo.store_id">
			<el-icon><el-icon-shop /></el-icon> <span>{{userInfo.shop}}</span>
		</div>
		<div class="screen panel-item hidden-sm-and-down" @click="screen">
			<el-icon><el-icon-full-screen /></el-icon> <span>全屏</span>
		</div>
		<div class="tasks panel-item" @click="tasks">
			<el-icon><el-icon-sort /></el-icon>
		</div>
		<el-dropdown class="user panel-item" trigger="click" @command="handleUser">
			<div class="user-avatar">
				<el-avatar :size="30">{{ userNameF }}</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">帐号信息</el-dropdown-item> -->
					<el-dropdown-item command="clearmenu">更新菜单</el-dropdown-item>
					<el-dropdown-item divided command="passwd">修改密码</el-dropdown-item>
					<el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</div>
	
	<el-drawer v-model="tasksVisible" :size="450" title="任务中心" destroy-on-close>
		<tasks></tasks>
	</el-drawer>

	<passwd ref="passwd"></passwd>
</template>

<script>
import search from './search.vue'
import tasks from './tasks.vue'
import passwd from "@/views/manage/components/password"

export default {
	components: {
		search,
		tasks,
		passwd
	},
	data() {
		return {
			userName: "",
			userNameF: "",
			searchVisible: false,
			setVisible: false,
			tasksVisible: false,
			msg: false,
			msgList: [],
			baseData: {},
			userInfo:{}
		}
	},
	created() {
		var userInfo = this.$TOOL.data.get("USER_INFO");
		this.userName = userInfo.truename;
		this.userNameF = this.userName.substring(0, 1);
		var baseData = this.$TOOL.data.get("SERVICE");
		this.baseData = baseData;
		this.userInfo = userInfo;
	},
	methods: {
		//个人信息
		handleUser(command) {
			if (command == "uc") {
				this.$router.push({ path: '/usercenter' });
			}
			if (command == "passwd") {
				var userInfo = this.$TOOL.data.get("USER_INFO");
				this.$nextTick(() => {
					this.$refs.passwd.open("edit").setData(userInfo);
				})
			}
			if (command == "cmd") {
				this.$router.push({ path: '/cmd' });
			}
			if (command == "clearmenu") {
				this.$confirm('确定要更新栏目数据吗', '提示', {
					type: 'info',
				}).then(async () => {
					const loading = this.$loading()
					//获取菜单
					var menu = await this.$API.menu.list.get()
					loading.close()
					if (menu.code == 1) {
						if (menu.data.menu.length == 0) {
							this.islogin = false
							this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
								type: 'error',
								center: true
							})
							return false
						}
						this.$TOOL.data.set("MENU", menu.data.menu)
						this.$TOOL.data.set("PERMISSIONS", menu.data.permissions)
						this.$TOOL.data.set("DASHBOARDGRID", menu.data.dashboardGrid)
						location.reload()
					} else {
						this.islogin = false
						this.$message.warning(menu.msg)
						return false
					}
				}).catch(() => {
					//取消
				})
			}
			if (command == "outLogin") {
				this.$confirm('确认是否退出当前用户？', '提示', {
					type: 'warning',
					confirmButtonText: '退出',
					confirmButtonClass: 'el-button--danger'
				}).then(() => {
					this.$router.replace({ path: '/login' });
				}).catch(() => {
					//取消退出
				})
			}
		},
		//全屏
		screen() {
			var element = document.documentElement;
			this.$TOOL.screen(element)
		},
		//显示短消息
		showMsg() {
			this.msg = true
		},
		//标记已读
		markRead() {
			this.msgList = []
		},
		//搜索
		search() {
			this.searchVisible = true
		},
		//任务
		tasks() {
			this.tasksVisible = true
		}
	}
}
</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: 16px;
}

.user-bar .panel-item:hover {
	background: rgba(0, 0, 0, 0.1);
}

.user-bar .panel-item span {
	margin-left: 10px;
	font-size: 14px;
}

.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;
}

.dark .msg-list__main h2 {
	color: #d0d0d0;
}

.dark .msg-list li {
	border-top: 1px solid #363636;
}

.dark .msg-list li a:hover {
	background: #383838;
}
</style>
