<template>
	<div class="user-bar">
		<div>
			<search></search>
		</div>
		<div @click="backlogClick()" class="panel-item">
			<span :style="{ fontSize: '15px' }">待办</span>
			<el-badge class="mark" v-if="backlogCount !== 0" :value="backlogCount" :max="99" style="top:-10px;left: -8px;"/>
		</div>

		<el-dropdown
			class="user panel-item"
			trigger="hover"
			@command="handleUser"
			style="margin-right: 30px"
		>
			<div class="user-avatar">
				<el-avatar :size="30" :src="photo === ''?'/static/img/avatar.png':photo"></el-avatar>
				<label>{{ userName }}</label>
			</div>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item command="pw">修改密码</el-dropdown-item>
					<el-dropdown-item command="uc">帐号信息</el-dropdown-item>
					<el-dropdown-item command="clearCache"
						>清除缓存</el-dropdown-item
					>
					<el-dropdown-item divided command="outLogin"
						>退出登录</el-dropdown-item
					>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
		<div class="panel-item hidden-sm-and-down" @click="openSetting">
			<el-icon><MoreFilled style="transform: rotate(90deg)" /></el-icon>
		</div>
		<el-drawer
			title="新消息"
			v-model="msg"
			:size="400"
			append-to-body
			destroy-on-close
		>
			<el-container>
				<el-main class="nopadding">
					<el-scrollbar>
						<ul class="msg-list">
							<li v-for="item in msgList" v-bind:key="item.id">
								<router-link to="/notify/MyNotifyList">
									<div class="msg-list__icon">
										<el-badge is-dot type="danger">
											<el-avatar
												:size="40"
												:src="item.createBy.photo"
											></el-avatar>
										</el-badge>
									</div>
									<div class="msg-list__main">
										<h2>{{ item.title }}</h2>
										<p>{{ item.content }}</p>
									</div>
									<div class="msg-list__time">
										<p>{{ item.createTime }}</p>
									</div>
								</router-link>
							</li>
							<el-empty
								v-if="msgList.length == 0"
								description="暂无新消息"
								:image-size="150"
							>
								<template #image>
									<img src="@/assets/img/empty.svg" />
								</template>
							</el-empty>
						</ul>
					</el-scrollbar>
				</el-main>
				<el-footer style="text-align: center">
					<el-button type="primary" @click="toCenter"
						>消息中心</el-button
					>
					<!-- <el-button  @click="markRead">全部设为已读</el-button> -->
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
	<setting ref="setting"></setting>

	<UpdatePassword ref="updatePassword" :innerVisible="innerVisible" v-on:innerDialog="getInnerStatus($event)"></UpdatePassword>

</template>

<script>
import taskService from "@/api/flowable/taskService.js";
import search from "./search.vue";
import loginService from "@/api/auth/loginService";
import setting from "./../components/setting.vue";
import notifyService from "@/api/notify/notifyService";
import config from "@/config";
import UpdatePassword from "@/views/layout/UpdatePassword2.vue";
export default {
	data() {
		return {
			userName: "",
			userNameF: "",
			photo: "",
			msg: false,
			searchVisible: false,
			msgList: [],
			// backlogCount: 0,
			receivedValue: ''
		};
	},
	async created() {
		var userInfo = this.$TOOL.data.get("USER_INFO");
		this.userName = userInfo.name;
		this.photo = userInfo.photo;
		this.userNameF = this.userName.substring(0, 1);
		let data = await notifyService.list({
			current: 1,
			size: -1,
			isSelf: true,
			readFlag: "0",
		});
		this.msgList = data.records;
		this.fetchBacklogCount();
		const fetchInterval = 30000;
		this.fetchIntervalId = setInterval(this.fetchBacklogCount, fetchInterval);
		// 在页面创建时获取共享值
	},
	beforeDestroy() {
		clearInterval(this.fetchIntervalId);
	},
	components: {
		setting,
		search,
		UpdatePassword
	},
	computed: {
		backlogCount(){
			return this.$store.state.global.backlogCount
		},
		language() {
			var t = this.$store.state.global.language;
			switch (t) {
				case "zh":
					return "中";
				case "en":
					return "E";
				case "ja":
					return "日";
			}
			return "";
		},
	},
	methods: {
		async fetchBacklogCount() {
			const data = await taskService.todoList({ current: 1, size: 10 });
			// this.backlogCount = data.total;
			this.$store.state.global.backlogCount = data.total
		},
		//个人信息
		handleUser(command) {
			if (command == "pw") {
				console.log(111)
				this.$refs.updatePassword.init()
			}
			if (command == "uc") {
				this.$router.push({ path: "/sys/user/UserInfo" });
			}
			if (command == "cmd") {
				this.$router.push({ path: "/cmd" });
			}
			if (command == "clearCache") {
				this.$confirm(
					"清除缓存会将系统初始化，包括登录状态、主题、语言设置等，是否继续？",
					"提示",
					{
						type: "warning",
					}
				)
					.then(() => {
						const loading = this.$loading();
						loginService.logout().then(() => {
							this.$TOOL.data.clear();
							this.$router.push({ path: "/login" });
						});
						setTimeout(() => {
							loading.close();
							location.reload();
						}, 1000);
					})
					.catch(() => {
						//取消
					});
			}
			if (command == "outLogin") {
				this.$confirm("确认是否退出当前用户？", "提示", {
					type: "warning",
					confirmButtonText: "退出",
					confirmButtonClass: "el-button--danger",
				})
					.then(() => {
						loginService.logout().then(() => {
							this.$cookies.remove(config.TOKEN);
							this.$TOOL.data.remove(config.TOKEN);
							this.$router.push({ path: "/login" });
						});
					})
					.catch(() => {
						//取消退出
					});
			}
		},
		// 切换语言
		changeLanguage(language) {
			this.$TOOL.data.set("APP_LANG", language);
			this.$store.commit("updateLanguage", language);
		},
		//全屏
		screen() {
			var element = document.documentElement;
			this.$TOOL.screen(element);
		},
		//显示短消息
		showMsg() {
			this.msg = true;
		},
		//跳转到消息中心
		toCenter() {
			this.$router.push("/notify/MyNotifyList");
		},
		openSetting() {
			this.$refs.setting.showRight();
		},
		//搜索
		search() {
			this.searchVisible = true;
		},
		backlogClick () {
			this.$router.push({
				path: '/sys/dashboard/workBench/PendingList',
				query: {
					num: 3
				}
			})
		},
	},
};
</script>

<style scoped>
.user-bar {
	display: flex;
	align-items: center;
	height: 100%;
}
.user-bar .panel-item {
	padding: 0 10px;
	margin-left: 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 .user-avatar {
	height: 49px;
	display: flex;
	align-items: center;
}
.user-bar .user-avatar label {
	display: inline-block;
	margin-left: 5px;
	font-size: 14px;
	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;
}
</style>
