<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="msgVisible=!msgVisible">
			<el-popover v-model:visible="msgVisible" :width="280" trigger="click">
				<template #reference>
					<div class="msg-panel">
						<el-badge :hidden="msgNum==0" :value="msgNum" class="badge" type="danger">
							<el-icon>
								<el-icon-bell/>
							</el-icon>
						</el-badge>
					</div>
				</template>
				<template #default>
					<el-tabs v-model="msgTab" class="msg-tabs" stretch>
						<el-tab-pane label="通知" name="notice"></el-tab-pane>
						<el-tab-pane label="消息" name="message"></el-tab-pane>
						<el-tab-pane label="待办" name="todo"></el-tab-pane>
					</el-tabs>
					<div class="msg-content">
						<div v-if="msgList.length===0" class="msg-empty">
							<el-icon class="icon">
								<pi-icon-no-message/>
							</el-icon>
						</div>
						<div v-else>
							<el-scrollbar height="220px" :view-style="{ 'overflow-x': 'hidden' }">
								<el-link v-for="item in msgList" :key="item" href="/#/message" underline="never" :title="item.time + ' ' + item.title">
									<template #default>
										<el-text type="primary" v-time.tip="item.time"></el-text>
										<div>{{ item.title }}</div>
									</template>
								</el-link>
							</el-scrollbar>
						</div>
					</div>
					<el-divider/>
					<div class="msg-more">
						<el-button link type="primary" icon="el-icon-arrow-down">查看更多</el-button>
					</div>
				</template>
			</el-popover>
		</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>
				<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="tasksVisible" :size="450" title="附件中心" destroy-on-close>
		<tasks></tasks>
	</el-drawer>
</template>

<script setup>
defineOptions({
	name: "userBar"
})
import {ref, onMounted, getCurrentInstance} from "vue";
import search from './search.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()

const msgVisible = ref(false);
let searchVisible = ref(false)
let msg = ref(false)
let msgNum = ref(2)
let msgList = ref([])
const tasksVisible = ref(false)
let taskNum = ref(0)
const settingDialog = ref(false)
const userInfo = tools.data.get("USER_INFO");
let msgTab = ref("notice")

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)
}

async function loadData() {
	// let res = await this.$API.home.message.newCount()
	// this.msgNum = res.data.count
	msgNum.value = 5
	msgList.value.push({
		title: '您有一笔新的订单请及时处理。您有一笔新的订单请及时处理',
		time: '2025-06-17 17:59:21'
	})
	msgList.value.push({
		title: '您有一笔新的订单请及时处理。您有一笔新的订单请及时处理',
		time: '2025-06-16 10:29:30'
	})
	msgList.value.push({
		title: '您有一笔新的订单请及时处理。',
		time: '2025-06-15 12:29:30'
	})
	msgList.value.push({
		title: '您有一笔新的订单请及时处理。',
		time: '2025-05-15 12:29:30'
	})
	msgList.value.push({
		title: '您有一笔新的订单请及时处理。',
		time: '2025-01-16 12:29:30'
	})
	msgList.value.push({
		title: '您有一笔新的订单请及时处理。',
		time: '2024-06-15 12:29:30'
	})
	msgList.value.push({
		title: '您有一笔新的订单请及时处理。',
		time: '2024-06-15 12:29:30'
	})
	msgList.value.push({
		title: '您有一笔新的订单请及时处理。',
		time: '2015-06-15 12:29:30'
	})
	msgList.value.push({
		title: '您有一笔新的订单请及时处理。',
		time: '2025-06-15 12:29:30'
	})
}
</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-list li {
	border-top: 1px solid #eee;
}

.msg-list li a {
	display: flex;
	padding: 20px;
}

.msg-list li a:hover {
	background: #ecf5ff;
}

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

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

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

.dark .msg-list li a:hover {
	background: #383838;
}

.msg-panel {
	display: grid;
}

.msg-content {
	height: 220px;
	overflow: hidden;
}

.msg-content .msg-empty {
	display: flex;
	height: 220px;
	justify-content: center;
	align-items: center;
}

.msg-content .msg-empty .icon {
	font-size: 128px;
}

.msg-content .el-link {
	line-height: 30px;
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
}

.msg-content .el-link .el-text{
	margin-right: 5px;
	width: 48px;
}

.msg-more {
	text-align: center;
}

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