<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="msg panel-item" @click="msgVisible=!msgVisible;newMsg=false;">
			<el-popover v-model:visible="msgVisible" :width="300" trigger="click">
				<template #reference>
					<div class="msg-panel">
						<el-badge :is-dot="newMsg" class="badge" type="danger">
							<el-icon>
								<el-icon-bell/>
							</el-icon>
						</el-badge>
					</div>
				</template>
				<template #default>
					<msg v-if="msgVisible" @closed="msgVisible=false"/>
				</template>
			</el-popover>
		</div>
		<div class="attach panel-item" @click="attachVisible=true;newTask=false;">
			<el-badge :is-dot="newTask" class="badge" type="danger">
				<el-icon>
					<pi-icon-task/>
				</el-icon>
			</el-badge>
		</div>
		<el-dropdown class="user panel-item" trigger="click" @command="handleUser">
			<div class="user-avatar">
				<el-avatar :size="30" :src="avatar">{{ nicknameF }}</el-avatar>
				<label>{{ nickname }}</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>
				<el-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="attachVisible" :size="450" title="附件中心" destroy-on-close>
		<attach/>
	</el-drawer>
</template>

<script setup>
defineOptions({
	name: "userBar"
})
import {ref, onMounted, getCurrentInstance} from "vue"
import search from './search'
import setting from './setting'
import attach from './attach'
import msg from './msg'
import websocket from "@/utils/websocket"
import {ElNotification} from 'element-plus'
import tools from "@/utils/tools"
import api from "@/api/index"
import {useRouter} from "vue-router"
import {useI18n} from "vue-i18n"

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

const msgVisible = ref(false);
let searchVisible = ref(false)
let newMsg = ref(false)
const attachVisible = ref(false)
let newTask = ref(false)
const settingDialog = ref(false)
const userInfo = tools.data.get("USER_INFO");

let nickname = userInfo.nickname || userInfo.username;
let nicknameF = nickname.substring(0, 1);
let avatar = userInfo.avatar

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

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: '新信息通知',
			message: data['msg']
		})
	} else {
		ElNotification.warning({
			title: 'Warning',
			message: data['msg']
		})
	}
	if (data.type === "system" || data.type === "business" || data.type === "approval") {
		newMsg.value = true
	} else if (data.type === "attach") {
		newTask.value = true
	}
}

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

//个人信息
function handleUser(command) {
	if (command === "uc") {
		router.push({path: '/system/user'});
	}
	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)
}
</script>

<style lang="scss" 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-panel {
	display: grid;
}

.el-divider--horizontal {
	margin: 10px 0 !important;
}
</style>
