<template>
	<div>
		<nav v-if="showHeader" class="aui-navbar">
			<div class="aui-navbar__header">
				<div class="aui-navbar__logo"><img v-if="$store.state.user.headUrl" :src="$store.state.user.headUrl" /></div>
				<h1 class="aui-navbar__brand">
					<a class="aui-navbar__brand-lg" href="javascript:;">{{ this.$store.state.user.agencyName }}</a>
					<a class="aui-navbar__brand-mini" href="javascript:;">{{ this.$store.state.user.agencyName.slice(0, 2) }}</a>
				</h1>
			</div>

			<div class="aui-navbar__body">
				<el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
					<el-menu-item v-if="false" index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
						<svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true"><use xlink:href="#icon-outdent"></use></svg>
					</el-menu-item>

					<el-menu-item v-if="true" index="2" @click="refresh()">
						<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-sync"></use></svg>
					</el-menu-item>
				</el-menu>

				<el-menu class="aui-navbar__menu" mode="horizontal" style="min-width: 80px">
					<el-menu-item index="3" @click="handleCLickNav">
						<div class="nav-item">
							<img src="~@/assets/images/main/nav-sjdb.png" />
							<span>数据看板</span>
						</div>
					</el-menu-item>
					<!-- <el-menu-item index="3" @click="$router.push({ name: 'dataBoard' })">
						<div class="nav-item">
							<img src="~@/assets/images/main/nav-zntb.png" />
							<span>智能填报</span>
						</div>
					</el-menu-item> -->
					<!-- <el-menu-item index="3" @click="$router.push({ name: 'dataBoard' })">
						<div class="nav-item">
							<img src="~@/assets/images/main/nav-sjjy.png" />
							<span>数据校验</span>
						</div>
					</el-menu-item> -->
				</el-menu>

				<el-menu class="aui-navbar__menu" mode="horizontal" style="min-width: 180px">
					<el-menu-item index="3" @click="toImportRecord">
						<div class="img-nav">
							<div class="img-wrap"><img src="~@/assets/images/main/time.png" /></div>
						</div>
					</el-menu-item>

					<el-menu-item index="2" @click="toNoticePage">
						<div class="img-nav" :class="{ 'z-on': false }">
							<span class="corner-dot" v-if="unreadMsgNum > 0">{{ unreadMsgNum }}</span>
							<div class="img-wrap"><img src="~@/assets/images/main/hint.png" /></div>
						</div>
					</el-menu-item>

					<el-menu-item index="1" class="aui-navbar__avatar">
						<el-dropdown placement="bottom" :show-timeout="0">
							<span class="el-dropdown-link">
								<img v-if="$store.state.user.gender === '2'" src="~@/assets/images/main/default-avatar.png" />
								<img v-else src="~@/assets/images/main/default-avatar.png" />
								<span>{{ $store.state.user.realName }}</span>
								<i class="el-icon-arrow-down"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native="updatePasswordHandle()">{{ $t('updatePassword.title') }}</el-dropdown-item>
								<el-dropdown-item @click.native="logoutHandle()">{{ $t('logout') }}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</el-menu-item>
				</el-menu>
			</div>
			<!-- 弹窗, 修改密码 -->
			<update-password-work v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password-work>
		</nav>
		<nav v-else class="aui-navbar main-line"></nav>

		<div class="m-newMsg" v-if="noticeList.length > 0 && displayedNoticeList">
			<div class="title">新提醒</div>
			<div class="btn-close" @click="displayedNoticeList = false"><img src="~@/assets/images/main/close.png" /></div>
			<div class="row">
				<span class="date">{{ noticeList[0].createdTime }}</span>
				<i class="i-new">NEW</i>
			</div>
			<div class="cnt" @click="toNoticePage()">{{ noticeList[0].content }}</div>
		</div>
	</div>
</template>

<script>
import { messages } from '@/i18n';
import screenfull from 'screenfull';
import UpdatePasswordWork from './main-navbar-update-password-work';
import { clearLoginInfo } from '@/utils';
import { requestPost, requestGet } from '@/js/dai/request';
import nextTick from 'dai-js/tools/nextTick';

export default {
	inject: ['refresh'],
	data() {
		return {
			showHeader: true,
			i18nMessages: messages,
			updatePassowrdVisible: false,
			customerName: '',

			unreadMsgNum: 0,

			noticeList: [],

			displayedNoticeList: true
		};
	},
	components: {
		UpdatePasswordWork
	},
	created() {
		let platformToken = localStorage.getItem('showHeader') || '';
		if (typeof platformToken !== 'undefined' && platformToken !== 'undefined' && platformToken !== '') {
			this.showHeader = false;
		}
		this.changeCustomerName();
		console.log('=============================', this.userType);

		this.pollGetNoticeData();
	},
	computed: {
		userType() {
			return localStorage.getItem('userType');
		}
	},
	methods: {
		async readClearOne(item) {
			console.log('item', item);
			const url = `/message/intelligentMessage/msg/clearOne/?msgId=${item.id}`;
			const { data, code, msg } = await requestPost(url);
			if (code == 0) {
				
			} else if (code >= 8000) {
				this.$message.error(msg);
			}
		},
		toNoticePage() {
			this.displayedNoticeList = false;
			this.readClearOne(this.noticeList[0]);

			this.$router.replace('/main/home-notice');
		},
		toImportRecord() {
			this.$router.replace('/main/importRecord-index');
		},
		toIndexPage() {
			this.$router.replace('/index');
		},
		// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
		gotoRouteHandle(menuId, idx) {
			var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0];
			if (route) {
				if (route.meta.iframeURL.endsWith('【跳转新页面】')) {
					return window.open(route.meta.iframeURL.slice(0, -7));
				} else {
					this.$router.push({ name: route.name });
				}
			}
			this.$store.state.LevelOneMenuActiveName = menuId;
			this.$store.state.sidebarActiveSubMenuList = this.$store.state.sidebarMenuList[idx].children || [];
			console.log('this.$store.state', this.$store.state);
			console.log('this.$route', this.$route);
		},
		changeCustomerName(customerName) {
			this.customerName = localStorage.getItem('customerName') || '党建引领基层治理互联管理平台';
		},
		// 全屏
		fullscreenHandle() {
			if (!screenfull.enabled) {
				return this.$message({
					message: this.$t('fullscreen.prompt'),
					type: 'warning',
					duration: 500
				});
			}
			screenfull.toggle();
		},
		// 修改密码
		updatePasswordHandle() {
			this.updatePassowrdVisible = true;
			this.$nextTick(() => {
				this.$refs.updatePassowrd.init();
			});
		},
		// 退出
		logoutHandle() {
			this.$confirm(this.$t('prompt.info', { handle: this.$t('logout') }), this.$t('prompt.title'), {
				confirmButtonText: this.$t('confirm'),
				cancelButtonText: this.$t('cancel'),
				type: 'warning'
			})
				.then(() => {
					//关闭所有标签页
					// tabs, 关闭全部
					this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name === 'home');

					this.$http
						.post('/auth/login/logout')
						.then(({ data: res }) => {
							if (res.code !== 0) {
								//别处登陆时 退出不提示 直接跳登陆页即可
								if (res.code !== 10007) {
									this.$message.error(res.msg);
								}
							}

							clearLoginInfo();
							this.$router.push({ name: 'login' });
							// if (localStorage.getItem('userType') === 'work') {
							//   this.$router.push({ name: 'loginWork' })
							// } else {
							//   this.$router.push({ name: 'login' })
							// }
						})
						.catch(() => {});
				})
				.catch(() => {});
		},

		async pollGetNoticeData() {
			this.getNoticeData();
			await nextTick(60000);
			this.pollGetNoticeData();
		},

		// 智能提醒数据
		async getNoticeData() {
			const url = '/message/intelligentMessage/msg/notice';
			const { data, code, msg } = await requestGet(url, {});
			if (code === 0) {
				console.log('列表请求成功！！！！！！！！！！！！！！');
				if (data.unreadNum > 0 && this.unreadMsgNum < data.unreadNum) {
					this.getNoticeList();
					this.displayedNoticeList = true;
					setTimeout(() => {
						this.displayedNoticeList = false;
					}, 5000);
				}
				this.unreadMsgNum = data.unreadNum;
			} else {
			}
		},

		//加载组织数据
		async getNoticeList() {
			const url = '/message/intelligentMessage/page';
			let params = {
				page: this.pageNo,
				limit: this.pageSize,
				readFlag: 0
			};

			const { data, code, msg } = await requestGet(url, params);

			if (code === 0) {
				this.noticeList = data.list;
			} else {
				this.$message.error(msg);
			}
		},
		handleCLickNav() {
			let routeData = this.$router.resolve({
				name: 'dataBoard'
			});
			// window.open(this.$router.push({ name: 'dataBoard' }))
			window.open(routeData.href, '_blank');
		}
	}
};
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/c/function.scss';

.main-line {
	height: 50px;
	background: #eeeeee;
}
.img-nav {
	position: relative;

	.corner-dot {
		position: absolute;
		z-index: 100;
		display: block;
		top: -5px;
		right: 2px;
		padding: 0 3px;
		min-width: 16px;
		height: 16px;
		line-height: 16px;
		transform: translateX(50%);
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		background: #ff4d4f;
		border-radius: 8px;
		border: 1px solid #ffffff;
		text-align: center;
	}
}

.m-newMsg {
	position: fixed;
	z-index: 2000;
	right: 30px;
	box-sizing: border-box;
	padding: 16px;
	width: 320px;
	background: #ffffff;
	box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
	border-radius: 4px;

	.title {
		margin-bottom: 16px;
		height: 22px;
		font-size: 16px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
		line-height: 22px;
	}
	.btn-close {
		position: absolute;
		top: 15px;
		right: 10px;
		padding: 6px;
		img {
			width: 16px;
		}
	}
	.row {
		display: flex;
		align-items: center;
	}
	.date {
		height: 17px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.45);
		line-height: 17px;
	}
	.i-new {
		margin-left: 8px;
		width: 40px;
		height: 16px;
		background: #eb512f;
		border-radius: 2px;
		font-size: 12px;
		font-family: Arial-BoldItalicMT, Arial;
		font-weight: normal;
		color: #ffffff;
		line-height: 16px;
		text-align: center;
	}
	.cnt {
		@include toeM(2);
		margin-top: 3px;
		padding-bottom: 0;
		width: 288px;
		height: 44px;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 22px;
		cursor: pointer;
		&:hover {
			color: #0056d6 !important;
		}
	}
}
</style>
