<template>
	<div class="screen-container">
		<div class="screen-header">
			<div class="header-left" @click="synthesis()" :style="{'font-size':$i18n.locale === 'zh-CN'?'36px':'23px'}"
				:class="activeIndex=='comprehensiveTheme'?'header-left-active':''">
				{{$i18n.locale === 'zh-CN'?'重庆轻纺集团数字管控平台':'CQLT Digital Management and Control Platform'}}

			</div>
			<el-menu :default-active="activeIndex" :class="[ $i18n.locale === 'zh-CN'?'':'demoClass','el-menu-demo']"
				mode="horizontal" @select="handleSelect">
				<template v-for="(item,index) in menuData">
					<template v-if="item.children === null || item.children.length === 0">
						<!--一级菜单-->
						<template>
							<el-menu-item :index="item.alias">
								<span class="menuTitle">{{item.name}}</span>
							</el-menu-item>
						</template>
					</template>
					<template v-else>
						<template>
							<el-submenu :index="item.alias">
								<template slot="title">
									<span class="menuTwoTitle">{{item.name}}</span>
								</template>
								<template v-for="children of item.children">
									<template>
										<el-menu-item :index="children.alias">
											<span class="menuTitle">{{children.name}}</span>
										</el-menu-item>
									</template>
								</template>
							</el-submenu>
						</template>
					</template>
				</template>
			</el-menu>
			<div class="header-right">
				<div class="right-time">
					{{ nowTime }}
					<langSelect  style="color: #fff !important;"/>
				</div>
				<div class="worktable" @click="toWorkbench">
					<img src="~@/assets/img/work-icon.png" alt="">
					{{ $i18n.locale === 'zh-CN'?'工作台':'&nbsp;Workbench'}}

				</div>
			</div>

			<!-- <div class="worktable"           @click="toWorkbench">
				工作台
			</div> -->
		</div>
		<div class="screen-content">
			<slot></slot>
		</div>
	</div>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	import moment from "moment"
	// import bigScreenMixin from '@/mixins/bigScreenMixin.js'
	import langSelect from '@/components/langSelect'
	export default {
		name: 'screenLayout',
		// mixins: [bigScreenMixin],
		components: {
			langSelect
		},
		props: {
			currentKey: {
				type: String,
				required: true,
			},
		},
		data() {
			return {
				activeIndex: '',
				nowTime: '',
				activeName: '',
				menuData: [],
				showWorkPlat: false,
				tabItem: {},
			}
		},
		computed: {
			...mapState({
				frontMenus: (state) => {
					return state.menu.frontMenus
				},
			}),
			optionSingleHeightTime() {
				return {
					step: 0.25,
				}
			},
		},
		created() {
			this.activeIndex = window.localStorage.getItem('activeIndex')
		},
		mounted() {
			this.getTime()
			this.activeName = this.currentKey
			this.$store.dispatch('menu/actionFrontMenus').then(data => {
				// 过滤出大屏菜单
				this.menuData = this.frontMenus.filter(
					item => item.alias === 'bigScreen'
				)[0].children

			})
			window.onbeforeunload = function(e) {
				var storage = window.localStorage.removeItem(activeIndex);
				storage.clear()
			}
		},
		methods: {

			// 显示当前时间
			timeFormate(timeStamp) {

				let year = new Date(timeStamp).getFullYear()
				let month =
					new Date(timeStamp).getMonth() + 1 < 10 ?
					'0' + (new Date(timeStamp).getMonth() + 1) :
					new Date(timeStamp).getMonth() + 1
				let date =
					new Date(timeStamp).getDate() < 10 ?
					'0' + new Date(timeStamp).getDate() :
					new Date(timeStamp).getDate()
				let week = new Date(timeStamp).getDay()
				let weeks = ['日', '一', '二', '三', '四', '五', '六']
				let getWeek = '星期' + weeks[week]
				this.nowTime = year + '年' + month + '月' + date + '日' + ' ' + getWeek
			},
			getTime() {

				const date = new Date();
				const day = date.getDay(); // 周一返回的是1，周六是6，国外第一天是周日，所以0 是周日
				const arr = this.$i18n.locale === 'zh-CN' ? ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] : ['Sun',
					'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'
				]
				this.nowTime = moment(date).format(this.$i18n.locale === 'zh-CN' ? 'YYYY年MM月DD日' : 'YYYY-MM-DD') + ' ' +
					arr[day];

				// this.timeFormate(new Date())
			},
			// initTime() {
			// 	if (this.timer) {
			// 		clearInterval(this.timer)
			// 		this.timer = null
			// 	}
			// 	this.timer = setInterval(() => {
			// 		this.getTime()
			// 	}, 1000)
			// },
			// 菜单切换
			handleSelect(key, keyPath) {
				window.localStorage.setItem("activeIndex", key);
				this.activeIndex = key
				if (key) {
					if (this.isFromJump) {
						this.$router.push({
							path: `/${key}`,
							query: {
								jumpKey: 1,
							},
						})
					} else {
						this.$router.push({
							path: `/${key}`,
						})
					}
				} else {
					window.location.href = item.link
				}
			},
			changeTab(item) {
				this.tabItem = item
				if (item.alias) {
					if (this.isFromJump) {
						this.$router.push({
							path: `/${item.alias}`,
							query: {
								jumpKey: 1,
							},
						})
					} else {
						this.$router.push({
							path: `/${item.alias}`,
						})
					}
				} else {
					window.location.href = item.link
				}
			},
			synthesis() {
				window.localStorage.setItem("activeIndex", 'comprehensiveTheme');
				this.$router.push({
					path: `/comprehensiveTheme`,
				})
			},
			toWorkbench() {
				this.$store.dispatch('menu/actionFrontMenus').then(res => {
					let dataArr = res && res.filter(item => item.alias === 'normal')
					if (dataArr && dataArr.length !== 0) {
						if (dataArr[0].children.length !== 0) {
							this.$router.push({
								path: `/platLayout/${dataArr[0].children[0].children[0].alias}`
							})
						} else {
							this.$router.push({
								path: `/platLayout/${dataArr[0].children[0].alias}`
							})
						}
					}
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	@font-face {
		font-family: 'YouSheBiaoTiHei';
		src: url(~@/assets/fonts/YouSheBiaoTiHei-2.ttf);
	}

	@keyframes breath {
		from {
			opacity: 0.1;
		}

		50% {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}

	@-webkit-keyframes breath {
		from {
			opacity: 0.1;
		}

		50% {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}

	.screen-container {
		width: 100%;
		height: 100%;
		// background-color: #000;
		background: url('~@/assets/img/bigsreen-bg.png') center /100% 100% no-repeat;

		.screen-header {
			width: 100%;
			height: 84px;
			padding-bottom: 23px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding: 0 0 0 20px;
			justify-content: space-between;
			background: url('~@/assets/img/header-bg.png') center / 100% 100% no-repeat;

			.imgAct {
				animation-name: breath;
				/*关键帧名称*/
				animation-timing-function: ease-in-out;
				/*动画的速度曲线*/
				animation-iteration-count: infinite;
				/*动画播放的次数*/
				animation-duration: 2s;
				/*动画所花费的时间*/

			}

			.header-left {
				cursor: pointer;
				width: 400px;
				// font-size: 36px;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				color: #cfdfec;
				opacity: 0.89;
				text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66);
			}

			.header-left-active {
				color: #ffffff;
			}

			.header-left:hover {
				color: #ffffff;
			}

			.header-right {
				width: 440px;
				display: flex;
				justify-content: space-between;

				.right-time {
					width: 371px;
					height: 40px;
					// text-align: center;
					padding:0 60px;
					box-sizing: border-box;
					line-height: 40px;
					font-size: 14px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #CDD6E3;
					background: url('~@/assets/img/time-bg.png') center / 100% 100% no-repeat;
					display: flex;
					justify-content: space-between;
				}
			}

			.header-tab {
				display: flex;
				align-items: center;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				color: #E4EBF4;

				.tabTitle {
					width: 385px;
					text-align: center;
					font-size: 42px !important;
					color: #E1E3EF;
					background: linear-gradient(0deg, #DCDCDC 0%, #FFFFFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.header-router-btn {
					cursor: pointer;
					box-sizing: border-box;
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					font-size: 24px;
					color: #E1E3EF;
					white-space: nowrap;
					text-shadow: 2px 2px 2px #000;
					width: 160px;
					height: 40px;
					display: flex;
					justify-content: center;
					line-height: 40px;
					background: url('~@/assets/img/tab.png') center / 100% 100% no-repeat;
					background-size: cover;
				}

				.header-router-btn:hover {
					cursor: pointer;
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					font-size: 24px;
					white-space: nowrap;
					width: 160px;
					height: 40px;
					line-height: 40px;
					text-shadow: 2px 2px 2px #000;
					display: flex;
					justify-content: center;
					background: url('~@/assets/img/tab-active.png') center / 100% 100% no-repeat;
					box-sizing: border-box;
				}

				.header-router-btn-active {
					cursor: pointer;
					padding: 0 36px;
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					font-size: 24px;
					white-space: nowrap;
					width: 160px;
					height: 40px;
					line-height: 40px;
					text-shadow: 2px 2px 2px #000;
					display: flex;
					justify-content: center;
					background: url('~@/assets/img/tab-active.png') center / 100% 100% no-repeat;
					box-sizing: border-box;
				}
			}
		}

	}

	.screen-content {
		height: calc(100% - 84px);
	}

	.worktable {
		width: 100px;
		height: 40px;
		padding: 0 10px;
		box-sizing: border-box;
		cursor: pointer;
		background: url('~@/assets/img/work-bg.png') center / 100% 100% no-repeat;
		text-align: center;
		line-height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;

		img {
			width: 17px;
			height: 15px;
		}
	}

	.worktable:hover {
		background: url('~@/assets/img/work-bg-active.png') center / 100% 100% no-repeat;
	}

	.demoClass {
		li {
			width: 210px !important;

			.menuTitle {
				font-size: 14px !important;
			}
		}
	}

	.el-menu-demo {
		background: transparent !important;
		display: flex;
		align-items: center;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #E4EBF4;
		border: none;

	}

	.menuTwoTitle {
		display: inline-block;
		line-height: 40px;
		height: 40px;
		font-size: 24px;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #FFFFFF;
	}

	.menuTitle {
		font-size: 24px;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #FFFFFF;
	}

	/deep/ .el-menu-item {
		cursor: pointer;
		box-sizing: border-box;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 24px;
		color: #E1E3EF;
		white-space: nowrap;
		text-shadow: 2px 2px 2px #000;
		width: 160px;
		height: 40px;
		display: flex;
		justify-content: center;
		outline: 0 !important;
		line-height: 40px;
		background: url('~@/assets/img/tab.png') center / 100% 100% no-repeat;
		background-size: cover;
		border: none;
	}

	/deep/ .el-submenu {
		cursor: pointer;
		box-sizing: border-box;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 24px;
		color: #E1E3EF;
		white-space: nowrap;
		text-shadow: 2px 2px 2px #000;
		width: 160px;
		height: 40px;
		display: flex;
		justify-content: center;
		outline: 0 !important;
		line-height: 40px;
		background: url('~@/assets/img/tab.png') center / 100% 100% no-repeat;
		background-size: cover;
		border: none;
	}

	/deep/ .el-submenu:hover .el-submenu__title {
		cursor: pointer;
		padding: 0 36px;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 24px;
		white-space: nowrap;
		width: 160px;
		// height: 40px;
		text-shadow: 2px 2px 2px #000;
		display: flex;
		color: #FFFFFF !important;
		justify-content: center;
		background: url('~@/assets/img/tab-active.png') center / 100% 100% no-repeat !important;
		box-sizing: border-box;
		border: none;
	}


	/deep/ .el-menu--horizontal>.el-submenu.is-active {
		cursor: pointer;
		padding: 0 36px;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 24px;
		white-space: nowrap;
		width: 160px;
		height: 40px;
		line-height: 40px;
		text-shadow: 2px 2px 2px #000;
		display: flex;
		color: #FFFFFF;
		justify-content: center;
		background: url('~@/assets/img/tab-active.png') center / 100% 100% no-repeat;
		box-sizing: border-box;
		border: none !important;
	}

	/deep/ .el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
		border: none !important;
	}

	/deep/ .el-menu--horizontal>.el-submenu .el-submenu__icon-arrow {
		display: none !important;
	}

	/deep/ .el-submenu .el-submenu__title {
		text-align: center;
		line-height: 32px !important;
		width: 160px;
		height: 40px !important;
		color: #FFFFFF !important;
		font-family: YouSheBiaoTiHei !important;
		font-weight: 400 !important;
		font-size: 24px !important;
	}

	/deep/ .el-menu-item:hover {
		cursor: pointer;
		padding: 0 36px;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 24px;
		white-space: nowrap;
		width: 160px;
		height: 40px;
		line-height: 40px;
		text-shadow: 2px 2px 2px #000;
		display: flex;
		color: #FFFFFF !important;
		justify-content: center;
		background: url('~@/assets/img/tab-active.png') center / 100% 100% no-repeat !important;
		box-sizing: border-box;
		border: none;
	}



	/deep/ .el-menu--horizontal>.el-menu-item.is-active {
		cursor: pointer;
		padding: 0 36px;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 24px;
		white-space: nowrap;
		width: 160px;
		height: 40px;
		line-height: 40px;
		text-shadow: 2px 2px 2px #000;
		display: flex;
		color: #FFFFFF;
		justify-content: center;
		background: url('~@/assets/img/tab-active.png') center / 100% 100% no-repeat;
		box-sizing: border-box;
		border: none;
	}

	.el-menu--horizontal>.el-menu .el-menu--popup .el-menu--popup-bottom-start {
		backgroundr: transparent !important;
	}

	.el-menu--horizontal .el-menu .el-menu-item,
	.el-menu--horizontal .el-menu .el-sub-menu__title {
		cursor: pointer;
		padding: 0 36px;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 24px;
		white-space: nowrap;
		width: 160px;
		height: 40px;
		line-height: 40px;
		text-shadow: 2px 2px 2px #000;
		display: flex;
		color: #FFFFFF;
		justify-content: center;
		background: url('~@/assets/img/tab.png') center / 100% 100% no-repeat;
		background-color: transparent;
		box-sizing: border-box;
		border: none !important;
	}
</style>
<style lang="scss">
	.el-menu--popup {
		display: flex;
		background: none !important;
		margin-top: 20px;
		padding: 0 0;
		position: relative;
		left: -80px;
	}

	.el-menu--horizontal .el-menu {
		background: none;
	}

	.el-menu--horizontal .el-menu .el-menu-item,
	.el-menu--horizontal .el-menu .el-submenu__title {
		margin-bottom: 10px !important;
		float: none;
		cursor: pointer;
		padding: 0 36px;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 24px;
		white-space: nowrap;
		width: 160px;
		height: 40px;
		// line-height: 34px !important;
		text-shadow: 2px 2px 2px #000;
		display: flex;
		color: #FFFFFF;
		justify-content: center;
		background: url('~@/assets/img/tab.png') center / 100% 100% no-repeat !important;
		box-sizing: border-box;
		z-index: 100;
		border: none !important;
	}

	//二次菜单悬浮及背景样式
	.el-menu--popup-bottom-start .el-menu-item:hover {
		cursor: pointer;
		padding: 0 36px;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 24px;
		white-space: nowrap;
		width: 160px;
		height: 40px;
		line-height: 40px;
		text-shadow: 2px 2px 2px #000;
		display: flex;
		color: #FFFFFF;
		justify-content: center;
		background: url('~@/assets/img/tab-active.png') center / 100% 100% no-repeat !important;
		box-sizing: border-box;
		border: none;
	}

	.el-menu--popup-bottom-start .el-menu-item {
		background: transparent !important;
	}
</style>
