<!-- 头部 -->
<template>
	<div class='headerDetail'>
		<ul>
			<li class="logo">
				<img src="../assets/images/nav-logo.png" alt="浙江泰源科技-工作簿"/>
				<span style="padding-left: 14px;">工作簿</span>
			</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">
				<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>
			<li class="tip">
				<img style="margin-top: 5px;" src="../assets/images/tishi.png">
				<span style="vertical-align: sub;color: #ec3321">涉密信息请勿上传或进行脱密处理!</span>
			</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: ''
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			openSearch() {
				this.showSearch = false;
				this.searchHeader = '';
				// if (this.searchHeader !== '') {
				//
				// }
			},
			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: 15px; /*no*/
		font-size: 34px; /*no*/
		color: #FFF;
	}

	.tip{
		float: right;
		font-size: 22px; /*no*/
		margin-top: 25px; /*no*/
		color: #ec3321;
	}

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

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

	.div-search{
		position: relative;
	}
	.search-icon{
		position: absolute;
		background-image: url("../assets/images/search.png");
		background-repeat: no-repeat;
		width: 26px; /*no*/
		height: 26px; /*no*/
		cursor: pointer; /*no*/
		right: 3px; /*no*/
		top: 5px; /*no*/
	}

	.line{
		float: right;
		padding-top: 15px; /*no*/
		margin-left: 20px; /*no*/
	}

	.menuRight{
		float: right;
		padding-top: 5px; /*no*/
	}
</style>
