<template>
	<div class="header">
		<div class="header-left">
			<div class="collapse-btn">
				<div v-if="!collapse">
					<el-icon :size="20" @click="collapseChange">
						<Fold />
					</el-icon>
				</div>
				<div v-else>
					<el-icon :size="20" @click="collapseChange">
						<Expand />
					</el-icon>
				</div>
			</div>

			<el-image v-if="logoShow&&logoPosition=='right'" class="header-logo" :src="url" fit="scale-down"></el-image>
			<span v-if="logoShow&&logoPosition=='right'" class="header-appname">{{app.appName}}{{app.subName}}</span>

			<!-- 				<el-image v-if="settings.logoShow&&settings.logoPosition=='right'" class="header-logo" :src="url"
				fit="scale-down"></el-image> -->
			<!-- <span v-if="settings.logoShow&&settings.logoPosition=='right'" class="header-appname">{{app.appName}}{{app.subName}}</span> -->
		</div>

		<div class="header-right">
			<div class="header-app">
				<el-dropdown @command="handleCommandApp">
					<span class="el-dropdown-link">
						{{application.applicationName}}
						<el-icon class="el-icon--right">
							<arrow-down />
						</el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item v-for="item of applications" :key="item.id"
								:command="item.id">{{item.applicationName}}</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>

			<div class="header-time">
				{{nowTime}}年{{nowTime1}}月{{nowTime2}}日&nbsp;{{nowTime3}}
			</div>
			<div class="btn-customer" @click="handleCustomer">
				<el-tooltip effect="dark" :content="'个性化'" placement="bottom">
					<el-icon :size="20">
						<Memo />
					</el-icon>
				</el-tooltip>
			</div>
			<div class="btn-setting" @click="handleSetting">
				<el-tooltip effect="dark" :content="'设置'" placement="bottom">
					<el-icon :size="20">
						<Setting />
					</el-icon>
				</el-tooltip>
			</div>
			<div class="btn-fullscreen" @click="handleFullScreen">
				<el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
					<el-icon :size="20">
						<Rank />
					</el-icon>
				</el-tooltip>
			</div>
			<!-- 消息中心 -->
			<div class="btn-bell" @click="toNext">
				<el-tooltip effect="dark" :content="`有${scheduleCount}条未读消息`" placement="bottom">
					<el-badge v-if="scheduleCount > 0" :value="scheduleCount" class="badge-schedule">
						<el-icon :size="20">
							<Bell />
						</el-icon>
					</el-badge>
					<el-badge v-else class="badge-schedule">
						<el-icon :size="20">
							<Bell />
						</el-icon>
					</el-badge>
				</el-tooltip>
			</div>
			<!-- 用户头像 -->
			<!-- <div class="user-avator">
          <img src="../../../assets/img/img.jpg" />
        </div> -->
			<!-- 用户名下拉菜单 -->
			<el-dropdown trigger="click" @command="handleCommand">
				<span class="el-dropdown-link">
					{{username}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
				</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item command="problem">问题反馈</el-dropdown-item>
						<el-dropdown-item command="operation">操作手册</el-dropdown-item>
						<el-dropdown-item divided> </el-dropdown-item>
						<el-dropdown-item command="modifyPassword">个人信息</el-dropdown-item>
						<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>

			<!--  
		 			<el-dropdown class="username-drop" trigger="click" @command="handleCommand">
				<span class="el-dropdown-link">
					{{username}}
					<i class="el-icon-caret-bottom"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="problem">问题反馈</el-dropdown-item>
					<el-dropdown-item command="operation">操作手册</el-dropdown-item> 
					<el-dropdown-item divided> </el-dropdown-item>
					<el-dropdown-item command="modifyPassword">修改密码</el-dropdown-item>
					<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>  -->

		</div>
	</div>
</template>


<script setup>
	// import axios from '@/axios'
	import {
		ref,
		onBeforeMount,
		getCurrentInstance,
		computed,
		onMounted
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()



	import {
		useSettingsStore
	} from "@/stores/settings"
	const settings = useSettingsStore()
	import {
		useAppStore
	} from "@/stores/app"
	const app = useAppStore()
	import {
		useTabsBarStore
	} from "@/stores/tabsbar"
	const tabsbar = useTabsBarStore()
	import {
		useMenuStore
	} from "@/stores/menu"
	const menu = useMenuStore()



	const username = ref('')
	const loginname = ref('')

	onBeforeMount(() => {
		getTime()
		// if (document.body.clientWidth < 1500) {
		// 	this.collapseChage();
		// }
		// this.getWaitDo()

		var userName = localStorage.getItem("userName")
		if (userName) {
			username.value = userName
		}
		console.log(username.value)
		var loginName = localStorage.getItem("loginName")
		if (loginName) {
			loginname.value = loginName
		}
	})

	const nowTime = ref('')
	const nowTime1 = ref('')
	const nowTime2 = ref('')
	const nowTime3 = ref('')

	const getTime = () => {
		var date = new Date()
		nowTime.value = date.getFullYear()
		nowTime1.value = (date.getMonth() + 1).toString()
		nowTime2.value = date.getDate().toString()
		nowTime3.value = "星期" + "日一二三四五六".charAt(date.getDay())
	}




	const logoShow = computed(() => settings.logoShow)
	const logoPosition = computed(() => settings.logoPosition)
	const collapse = computed(() => settings.collapse)


	const collapseChange = () => {
		settings.setCollapse()
	}

	const handleSetting = () => {
		settings.setSetting()
	}

	const handleCustomer = () => {
		settings.setCustomer()
	}




	const fullscreen = ref(false)
	const handleFullScreen = () => {
		let element = document.documentElement;
		if (fullscreen.value) {
			if (document.exitFullscreen) {
				document.exitFullscreen();
			} else if (document.webkitCancelFullScreen) {
				document.webkitCancelFullScreen();
			} else if (document.mozCancelFullScreen) {
				document.mozCancelFullScreen();
			} else if (document.msExitFullscreen) {
				document.msExitFullscreen();
			}
		} else {
			if (element.requestFullscreen) {
				element.requestFullscreen();
			} else if (element.webkitRequestFullScreen) {
				element.webkitRequestFullScreen();
			} else if (element.mozRequestFullScreen) {
				element.mozRequestFullScreen();
			} else if (element.msRequestFullscreen) {
				// IE11
				element.msRequestFullscreen();
			}
		}
		fullscreen.value = !fullscreen.value
	}

	const scheduleCount = ref(0)

	const getWaitDo = () => {
		var url = 'framework/Schedule/queryByUserId'
		proxy.$axios.get(url, {}).then(response => {
			if (response.data.code == '0') {
				scheduleCount.value = response.data.data
				// settings.setScheduleCount(response.data.data)
				// this.$store.commit('setScheduleCount', response.data.data)
			}
		});

	}

	onMounted(() => {
		getWaitDo()
	})

	const toNext = () => {
		console.log('toNext')
		scheduleCount.value = 0
		proxy.$router.push({
			path: '/schedule'
		})

	}

	const handleCommand = (command) => {
		console.log(command)
		if (command == 'modifyPassword') {
			proxy.$router.push({
				path: '/userInfo'
			})
		}
	}

	const logout = () => {
		ElMessageBox.confirm(
				'确认退出吗?',
				'提示', {
					confirmButtonText: 'OK',
					cancelButtonText: 'Cancel',
					type: 'warning',
				}
			)
			.then(() => {
				console.log('1')
				localStorage.setItem('userId', '')
				localStorage.setItem('loginName', '')
				localStorage.setItem('userName', '')
				localStorage.setItem('userCode', '')
				localStorage.setItem('userDesc', '')
				localStorage.setItem('token', '')
				tabsbar.setOpenedPageList([])
				tabsbar.setActive({})
				sessionStorage.clear()

				proxy.$router.push({
					path: '/login'
				})

			})
			.catch(() => {

			})
	}

	const application = ref(JSON.parse(localStorage.getItem('application')))
	const applications = ref(JSON.parse(localStorage.getItem('applications')))
	const handleCommandApp = (command) => {
		for (var item of applications.value) {
			if (item.id == command) {
				application.value = item
				localStorage.setItem('application', JSON.stringify(item))
				menu.setMenuLoaded(false)
				menu.setRouteLoaded(false)

				tabsbar.setOpenedPageList([{
					name: "主页",
					path: "/main"
				}])
				proxy.$router.push({
					path: '/main',
					query: {
						t: Date.now()
					}
				})
				break
			}
		}

	}
	// 		logout: function() {
	// 			var _this = this;
	// 			this.$confirm("确认退出吗?", "提示", {
	// 				type: "warning"
	// 			}).then(() => {
	// 				//localStorage.clear()

	// 				localStorage.setItem('userId', '')
	// 				localStorage.setItem('loginName', '')
	// 				localStorage.setItem('userName', '')
	// 				localStorage.setItem('token', '')
	// 				localStorage.setItem('wares', '')
	// 				//sessionStorage.clear()

	// 				app.setOpenedPageList([])
	// 				app.setMenuLoaded(false)
	// 				app.setRouteLoaded(false)

	// 				// this.$store.commit('setOpenedPageList', [])
	// 				// this.$store.commit('setMenuLoaded', false)
	// 				// this.$store.commit('setRouteLoaded', false)
	// 				this.$router.push("/login")
	// 			}).catch(() => {});
	// 		}
	// 	},



	import url from '@/public/images/logo.png'
	import {
		ElMessage
	} from "element-plus";
	// const url =  require('') 


	// export default {

	// 	data() {
	// 		return {
	// 			settings: settings,
	// 			app: app,

	// 			color1: '#DAD8D9',
	// 			changeColor: '#409eff',
	// 			color2: '#C7C8E6',
	// 			color3: '#FCE2D3',
	// 			color4: '#50B28A',
	// 			userName: "Louis",
	// 			loginName: '',
	// 			dialogVisible: false,
	// 			oldPassword: "",
	// 			newPassword: "",
	// 			confirmNewPassword: "",
	// 			totalRows: "",
	// 			currentPage: 1,
	// 			pageSize: 10,
	// 			userDesc: localStorage.getItem('userDesc'),

	// 			collapse: false,
	// 			fullscreen: false,
	// 			name: 'linxin',
	// 			message: 2,
	// 			nowTime: '',
	// 			nowTime1: '',
	// 			nowTime2: '',
	// 			nowTime3: '',

	// 			url: '' //require('../../../../static/logo.png'),
	// 		}
	// 	},
	// 	components: {

	// 	},

	// 	methods: {
	// 		getTime() {
	// 			var date = new Date()
	// 			this.nowTime = date.getFullYear()
	// 			this.nowTime1 = (date.getMonth() + 1).toString()
	// 			this.nowTime2 = date.getDate().toString()
	// 			this.nowTime3 = "星期" + "日一二三四五六".charAt(date.getDay())
	// 		},

	// 		// 侧边栏折叠
	// 		collapseChage() {
	// 			this.collapse = !this.collapse;
	// 			settings.setCollapse()
	// 			// this.$store.commit('setCollapse', this.collapse)
	// 		},
	// 		handleSetting() {
	// 			settings.setSetting()
	// 			// this.$store.commit('setSetting')
	// 		},
	// 		// 全屏事件
	// 		handleFullScreen() {
	// 			let element = document.documentElement;
	// 			if (this.fullscreen) {
	// 				if (document.exitFullscreen) {
	// 					document.exitFullscreen();
	// 				} else if (document.webkitCancelFullScreen) {
	// 					document.webkitCancelFullScreen();
	// 				} else if (document.mozCancelFullScreen) {
	// 					document.mozCancelFullScreen();
	// 				} else if (document.msExitFullscreen) {
	// 					document.msExitFullscreen();
	// 				}
	// 			} else {
	// 				if (element.requestFullscreen) {
	// 					element.requestFullscreen();
	// 				} else if (element.webkitRequestFullScreen) {
	// 					element.webkitRequestFullScreen();
	// 				} else if (element.mozRequestFullScreen) {
	// 					element.mozRequestFullScreen();
	// 				} else if (element.msRequestFullscreen) {
	// 					// IE11
	// 					element.msRequestFullscreen();
	// 				}
	// 			}
	// 			this.fullscreen = !this.fullscreen;
	// 		},
	// 		handleCommand(command) {
	// 			switch (command) {
	// 				case 'logout':
	// 					//this.logout()
	// 					this.$message('click on item ' + command);
	// 					break
	// 				case 'modifyPassword':
	// 					//this.dialogVisible = true
	// 					this.$router.push('/home/modifyPassword')
	// 					console.log('编辑密码')
	// 					break
	// 				case 'problem':
	// 					this.$router.push('/home/problemList')
	// 					break
	// 				case 'operation':
	// 					window.open(this.serverName + '/Common/downloadByStream?id=' +
	// 						'70C5646250AA47CB8B79277C60BA2B52')
	// 					break
	// 				case 'coderule':
	// 					window.open(this.serverName + '/Common/downloadByStream?id=' +
	// 						'B27513C0CF8242E387B292329DBEA461')
	// 					break
	// 				case 'userlist':
	// 					window.open(this.serverName + '/Common/downloadByStream?id=' +
	// 						'7ED5289FE1084454A69111DEFAB77D6D')
	// 					break
	// 			}
	// 		},
	// 		editPawSubmit() {
	// 			this.$message('click on item ' + this.newPassword);
	// 		},
	// 		getWaitDo() {
	// 			var url = 'framework/CommonSchedule/queryByUserId'
	// 			var param = {
	// 				page: 1,
	// 				rows: 10000,
	// 			}
	// 			axios.get(url, param).then(response => {
	// 				// settings.setScheduleCount(response.data.data.total)
	// 				// this.$store.commit('setScheduleCount', response.data.data.total)
	// 			});
	// 		},

	// 		toNext() {
	// 			this.$router.push({
	// 				path: '/process/schedule',
	// 				// meta: {
	// 				// 	keepAlive: false
	// 				// }
	// 			})
	// 		},
	// 		toHome() {
	// 			this.$router.push({
	// 				path: '/main',
	// 				// meta: {
	// 				// 	keepAlive: false
	// 				// }
	// 			})
	// 		},

	// 		logout: function() {
	// 			var _this = this;
	// 			this.$confirm("确认退出吗?", "提示", {
	// 				type: "warning"
	// 			}).then(() => {
	// 				//localStorage.clear()

	// 				localStorage.setItem('userId', '')
	// 				localStorage.setItem('loginName', '')
	// 				localStorage.setItem('userName', '')
	// 				localStorage.setItem('token', '')
	// 				localStorage.setItem('wares', '')
	// 				//sessionStorage.clear()

	// 				app.setOpenedPageList([])
	// 				app.setMenuLoaded(false)
	// 				app.setRouteLoaded(false)

	// 				// this.$store.commit('setOpenedPageList', [])
	// 				// this.$store.commit('setMenuLoaded', false)
	// 				// this.$store.commit('setRouteLoaded', false)
	// 				this.$router.push("/login")
	// 			}).catch(() => {});
	// 		}
	// 	},
	// 	mounted() {
	// 		this.getTime()
	// 		if (document.body.clientWidth < 1500) {
	// 			this.collapseChage();
	// 		}
	// 		this.getWaitDo()

	// 		var userName = localStorage.getItem("userName")
	// 		if (userName) {
	// 			this.userName = userName
	// 		}
	// 		var loginName = localStorage.getItem("loginName")
	// 		if (loginName) {
	// 			this.loginName = loginName
	// 		}
	// 	},


	// }
</script>
<style scoped>
	.header {

		/*    background-color: #304156;
 color: #FFFFFF; */
		background-color: #FFFFFF;
		color: #304156;
		width: 100%;
		height: 60px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

	}

	.header-left {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

	}

	.collapse-btn {
		/*    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 60px; */

		padding-left: 21px;
		font-size: 24px;
	}

	.collapse-btn:hover {
		cursor: pointer;
	}


	.header-logo {
		margin-left: 20px;
		width: 50px;
		height: 50px;
	}

	.header-appname {
		margin-left: 5px;
		font-size: 24px;
	}



	.header-right {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-right: 20px;
	}

	.header-app {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-right: 20px;
	}


	.header-time {
		margin-right: 20px;
	}

	.btn-setting {
		transform: rotate(30deg);
		margin-right: 10px;
		font-size: 24px;
	}

	.btn-customer {
		/* transform: rotate(30deg); */
		margin-right: 10px;
		font-size: 24px;
	}

	.btn-fullscreen {
		transform: rotate(45deg);
		margin-right: 10px;
		font-size: 24px;
	}

	.btn-bell {
		margin-right: 10px;
		font-size: 24px;
	}

	.username-drop {
		margin-right: 20px;
		color: #000000;
	}

	.badge-schedule {
		margin-top: -7px;
		margin-right: 20px;
	}
</style>