<!-- 头部 -->
<template>
	<div class='headerDetail' style="height: 100%;">
		<div style="display: flex;align-items: center;justify-content: space-between;height: 100%;">
			<div class="logoDivss">
				<span>
					<img class="logoimg" src="../assets/images/nav-logo.png" alt="浙江泰源科技-工作簿"/>
				</span>
				<!--:class="showExpand === true ? 'tipWidthExpand' : 'tipWidth'"-->
				<span class="tip tipWidthExpand" >
					<img class="tipLing" style="" src="../assets/images/tishi.png">
				<span style="vertical-align: middle;color: #ec3321">涉密信息请勿上传!</span>
				<!--<img @click="showExpand = !showExpand" class="tipExpand" src="../assets/images/tipExpand.png"/>-->
				</span>
			</div>
			<div class="rightMenuDiv" style="">
				<!--<span>-->
					<!--<img class="menuImgs" v-show="!showSearch" src="../assets/images/nav-top-ss.png" title="搜索" style="cursor: pointer;" @click="showSearch = true"/>-->
				<!--<div v-show="showSearch" class="div-search">-->
					<!--<i class="search-icon" @click="openSearch()"></i>-->
					<!--<input type="text" v-model="searchHeader" id="searchVal" placeholder="请输入" class="in-search" @keyup.enter="openSearch()"/>-->
				<!--</div>-->
				<!--</span>-->
				<span>
					<img class="menuImgs" title="帮助" src="../assets/images/nav-top-wh.png" style="cursor: pointer">
				</span>
				<span @click="goFeedback">
					<img class="menuImgs" title="反馈" src="../assets/images/feedBack.png" style="cursor: pointer">
				</span>
				<span>
					<img  width="2" src="../assets/images/nav-top-st.png">
				</span>
				<span>
					<el-menu :default-active="activeIndex" class="el-menu-demo" menu-trigger="hover" mode="horizontal" @select="handleSelect">
					<el-submenu index="1">
						<template slot="title">
							<img src="../assets/images/nav-top-gly.png"/>
							<span style="margin-left: 10px;">{{name}}</span>
						</template>
						<el-menu-item index="2" @click="openPassword">修改密码</el-menu-item>
						<el-menu-item index="3">退出</el-menu-item>
					</el-submenu>
				</el-menu>
				</span>
			</div>
		</div>
		<!--<ul>-->
			<!--<li class="logo">-->
				<!--<img src="../assets/images/nav-logo.png" alt="浙江泰源科技-工作簿"/>-->
				<!--&lt;!&ndash;<span style="padding-left: 14px;">工作簿</span>&ndash;&gt;-->
			<!--</li>-->
			<!--<li class="tip" :class="showExpand === true ? 'tipWidthExpand' : 'tipWidth'">-->
				<!--<img class="tipLing" style="" src="../assets/images/tishi.png">-->
				<!--<span style="vertical-align: sub;color: #ec3321">涉密信息请勿上传!</span>-->
				<!--<img @click="showExpand = !showExpand" class="tipExpand" src="../assets/images/tipExpand.png"/>-->
			<!--</li>-->
			<!--<li class="menuRight">-->
				<!--<el-menu :default-active="activeIndex" class="el-menu-demo" menu-trigger="hover" mode="horizontal" @select="handleSelect">-->
					<!--<el-submenu index="1">-->
						<!--<template slot="title">-->
							<!--<img src="../assets/images/nav-top-gly.png"/>-->
							<!--<span style="margin-left: 10px;">{{name}}</span>-->
						<!--</template>-->
						<!--<el-menu-item index="2" @click="openPassword">修改密码</el-menu-item>-->
						<!--<el-menu-item index="3">退出</el-menu-item>-->
					<!--</el-submenu>-->
				<!--</el-menu>-->
			<!--</li>-->
			<!--<li class="line">-->
				<!--<img src="../assets/images/nav-top-st.png">-->
			<!--</li>-->
			<!--<li class="headerSearch" @click="goFeedback">-->
				<!--<img title="反馈" src="../assets/images/feedBack.png" style="cursor: pointer">-->
			<!--</li>-->
			<!--<li class="headerSearch">-->
				<!--<img title="帮助" src="../assets/images/nav-top-wh.png" style="cursor: pointer">-->
			<!--</li>-->
			<!--<li class="headerSearch">-->
				<!--<img v-show="!showSearch" src="../assets/images/nav-top-ss.png" title="搜索" style="cursor: pointer;" @click="showSearch = true"/>-->
				<!--<div v-show="showSearch" class="div-search">-->
					<!--<i class="search-icon" @click="openSearch()"></i>-->
					<!--<input type="text" v-model="searchHeader" id="searchVal" placeholder="请输入" class="in-search" @keyup.enter="openSearch()"/>-->
				<!--</div>-->
			<!--</li>-->
		<!--</ul>-->

		<password :showPasswordDialog="showPasswordDialog" @close="closePassword"></password>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import password from '../components/passwordChange'
	export default {
		name: "headerDetail",
//import引入的组件需要注入到对象中才能使用
		components: { password },
		data () {
//这里存放数据
			return {
				showSearch: false,
				searchHeader:'',
				activeIndex: '1',
				showPasswordDialog: false,
				name: '',
				showExpand: false,
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			openSearch() {
				this.showSearch = false;
				this.searchHeader = '';
				// if (this.searchHeader !== '') {
				//
				// }
			},
			goFeedback() {
				this.$router.push({name: 'feedback'})
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
				if (key === '3') {
					// this.$router.push({name: 'login'})
					this.$axios.getLogout().then(res => { // 登出
						if (res.data.code === 200) {
							this.$router.push({name: 'login'});
							localStorage.clear();
							// setTimeout(function () {
							// 	window.location.reload();
							// }, 500)
						}
					})
				}
			},
			openPassword() {
				this.showPasswordDialog = true;
			},
			closePassword() {
				this.showPasswordDialog = false;
			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			let loginData = JSON.parse(this.$Base64.decode(localStorage.getItem('login')))
			// console.log(loginData)
			this.name= loginData.username;
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.logo{
		float: left;
		padding-top: 17px;
		font-size: 30px;
		color: #FFF;
		margin-left: 100px;
	}

	.logo img{
		width: 190px;
	}

	.tip{
		/*float: left;*/
		margin-left: 121px;
		font-size: 20px;
		/*margin-top: 20px;*/
		color: #ec3321;
		height: 35px;
		line-height: 35px;
		padding: 0 10px;
		background: #FFF;
		border-radius: 20px;
		position: relative;
	}

	.tipWidthExpand{
		width: 220px; /*250px*/
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		transition:width 1.5s;
		-moz-transition:width 1.5s; /* Firefox 4 */
		-webkit-transition:width 1.5s; /* Safari and Chrome */
		-o-transition:width 1.5s; /* Opera */
	}

	.tipWidthExpand .tipExpand{
		transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		transition: transform 1s;
	}

	.tipWidth .tipExpand{
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transition: transform 1s;
	}

	.tipWidth{
		width: 60px;
		/*white-space: nowrap;*/
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		transition:width 1.5s;
		-moz-transition:width 1.5s; /* Firefox 4 */
		-webkit-transition:width 1.5s; /* Safari and Chrome */
		-o-transition:width 1.5s; /* Opera */
	}

	.tipLing{
		width: 17px;
		margin-right: 5px;
		/*margin-top: 6px;*/
		vertical-align: middle;
	}

	.tipExpand{
		position: absolute;
		right: 5px;
		top: 3px;
		width: 30px;
		cursor: pointer;
	}

	.tipExpand:hover{
		content: url("../assets/images/showExpandHover.png");
	}

	.headerSearch{
		float: right;
		padding-top: 20px;
		margin-left: 20px;
	}

	.headerSearch img{
		width: 36px;
	}

	.in-search{
		width: 250px;
		height: 36px;
		background: #ffffff;
		border-radius: 20px;
		font-size: 16px;
		padding-left: 14px;
		border: none;
	}

	.div-search{
		display: inline-block;
		position: relative;
		margin-right: 20px;
	}
	.search-icon{
		position: absolute;
		background-image: url("../assets/images/search.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 26px;
		height: 26px;
		cursor: pointer;
		right: 5px;
		top: 5px;
	}

	.line{
		float: right;
		padding-top: 18px;
		margin-left: 20px;
	}

	.line img{
		height: 46px;
	}

	.menuRight{
		float: right;
		padding-top: 6px;
	}

	/deep/ .el-menu--horizontal>.el-submenu .el-submenu__title {
		height: 60px;
		line-height: 60px;
		border-bottom: 0.010417rem solid transparent;
		color: #FFF;
		font-size: 20px;
	}

	/deep/ .el-submenu__title img{
		width: 36px;
	}

	.rightMenuDiv{
		display: flex;justify-content: center;align-items: center;
	}

	.rightMenuDiv .menuImgs{
		width: 36px;
		margin-right: 20px;
	}

	.logoDivss{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/deep/ .el-upload-list__item {
		-webkit-transition: all .5s cubic-bezier(.55,0,.1,1);
		transition: all .5s cubic-bezier(.55,0,.1,1);
		font-size: 18px;
		color: #606266;
		line-height: 1.8;
		margin-top: 0.026042rem;
		position: relative;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border-radius: 0.020833rem;
		width: 100%;
	}

	.logoimg{
		width: 190px;
		height: 40px;
	}
</style>
