<template>
	<div class="user-bar">
		<div class="panel-item hidden-sm-and-down" @click="searchVisible = true">
			<el-badge :hidden="true">
				<el-icon>
					<el-icon-search/>
				</el-icon>
			</el-badge>
		</div>
		<div class="screen panel-item hidden-sm-and-down" @click="screen">
			<el-badge :hidden="true">
				<el-icon>
					<el-icon-full-screen/>
				</el-icon>
			</el-badge>
		</div>
		<div class="tasks panel-item" @click="tasksVisible=true">
			<el-badge :hidden="taskNum==0" :value="taskNum" class="badge" type="danger">
				<el-icon>
					<pi-icon-task/>
				</el-icon>
			</el-badge>
		</div>
		<div class="msg panel-item" @click="showMsg">
			<el-badge :hidden="msgNum==0" :value="msgNum" class="badge" type="danger">
				<el-icon>
					<el-icon-chat-dot-round/>
				</el-icon>
			</el-badge>
			<el-drawer title="站内信息" v-model="msg" :size="400" append-to-body destroy-on-close>
				<message @closed="closeMsg"></message>
			</el-drawer>
		</div>
		<el-dropdown class="user panel-item" trigger="click" @command="handleUser">
			<div class="user-avatar">
				<el-avatar :size="30" :src="avatar">{{ realnameF }}</el-avatar>
				<label>{{ realname }}</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="clearCache">清除缓存</el-dropdown-item>
					<el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
		<div class="setting panel-item hidden-sm-and-down" @click="settingDialog=true">
			<el-icon>
				<pi-icon-brush/>
			</el-icon>
			<el-drawer :title="t('system.pageLayout')" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
				<setting></setting>
			</el-drawer>
		</div>
	</div>
	<el-dialog v-model="searchVisible" :width="700" title="菜单搜索" class="drawerBG" center destroy-on-close>
		<search @success="searchVisible=false"></search>
	</el-dialog>
	<el-drawer v-model="tasksVisible" :size="450" title="任务中心" destroy-on-close>
		<tasks></tasks>
	</el-drawer>
</template>

<script setup name="userbar">
import {ref, onMounted, getCurrentInstance} from "vue";
import search from './search.vue'
import message from './message.vue'
import setting from './setting.vue'
import tasks from './tasks.vue'
import websocket from "@/utils/websocket";
import {ElNotification} from 'element-plus';
import tools from "@/utils/tools.js";
import api from "@/api/index.js";
import {useRouter} from "vue-router";
import {useI18n} from "vue-i18n";

const {proxy} = getCurrentInstance()
const router = useRouter()
const {t} = useI18n()

let searchVisible = ref(false)
let msg = ref(false)
let msgNum = ref(0)
const tasksVisible = ref(false)
let taskNum = ref(0)
const settingDialog = ref(false)
const userInfo = tools.data.get("USER_INFO");

let realname = userInfo.realname;
let realnameF = realname.substring(0, 1);
let avatar = userInfo.avatar

// mounted
onMounted(() => {
	initWebSocket()
	loadData()
})

function initWebSocket() {
	const ws = websocket.init();
	ws.websocket.onmessage = messageHandle
	ws.websocket.onclose = closeHandle
}

function messageHandle(message) {
	if (message.data == "connection successful" || message.data == "pong") {
		return;
	}
	const data = JSON.parse(message.data)
	if (!data) {
		return;
	}
	if (data.code == 200) {
		ElNotification.success({
			title: 'Success',
			message: data['msg']
		})
	} else {
		ElNotification.warning({
			title: 'Warning',
			message: data['msg']
		})
	}
	if (data.type == "message") {
		msgNum.value++
	} else if (data.type == "task") {
		taskNum.value++
	}
	return;
}

function closeHandle() {
	setTimeout(function () {
		initWebSocket()
	}, 5000);
}

//个人信息
function handleUser(command) {
	if (command === "uc") {
		router.push({path: '/usercenter'});
	}
	if (command === "cmd") {
		router.push({path: '/cmd'});
	}
	if (command === "clearCache") {
		proxy.$confirm('清除缓存会将系统初始化，包括登录状态、主题、语言设置等，是否继续？', '提示', {
			type: 'info',
		}).then(async () => {
			const loading = proxy.$loading()
			tools.data.clear()
			const [res, err] = await tools.go(api.auth.logout())
			if (!err) {
				loading.close()
				location.reload()
				proxy.$message.success(res.msg)
				router.replace({path: '/login'});
			}
		}).catch(() => {
		});
	}
	if (command === "outLogin") {
		proxy.$confirm('确认是否退出当前用户？', '提示', {
			type: 'warning',
			confirmButtonText: t("system.logout"),
			confirmButtonClass: 'el-button--danger'
		}).then(async () => {
			const [res, err] = await tools.go(api.auth.logout())
			if (!err) {
				proxy.$message.success(res.msg)
				router.replace({path: '/login'});
			}
		}).catch(() => {
		});
	}
}

//全屏
function screen() {
	tools.screen(document.documentElement)
}

//显示短消息
function showMsg() {
	msg.value = true
}

function closeMsg(num) {
	if (num > -1) {
		msgNum.value = num
	}
	msg.value = false
}

async function loadData() {
	// let res = await this.$API.home.message.newCount()
	// this.msgNum = res.data.count
}
</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 .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;
}

.user-bar .store-name {
	height: 49px;
	display: flex;
	align-items: center;
}

.user-bar .store-name 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>
