<template>
	<div class="header-container">
		<hamburger :onClick="onCollapse" :isActive="!collapse" class="hamburger-container"></hamburger>
		<b style="font-size: 27px;">{{appName}}{{secName}}</b>
		<!-- <breadcrumb class="breadcrumb-container"/> -->
		<div class="userInfo">
			<el-dropdown @command="handleCommand">
				<span class="el-dropdown-link">
					{{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="modifyPassword">修改密码</el-dropdown-item>
					<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>



		<el-dialog title="修改密码" :visible.sync="dialogVisible" width="500px">

			<el-input placeholder="请输入旧密码" v-model="oldPassword" auto-complete="off"></el-input>

			<el-input placeholder="请输入新密码" v-model="newPassword" auto-complete="off"></el-input>

			<el-input placeholder="请验证新密码" v-model="confirmNewPassword" auto-complete="off"></el-input>

			<div class="btn">
				<el-button style="width: 100%" type="primary" @click="editPawSubmit">保存</el-button>
			</div>
		</el-dialog>


	</div>
</template>
<script>
	import {
		mapState,
			mapGetters
	} from 'vuex'
	import Hamburger from "@/components/Hamburger"
	import Breadcrumb from "@/components/Breadcrumb"
	export default {
		data() {
			return {
				userName: "Louis",
				dialogVisible: false,
				oldPassword: "",
				newPassword: "",
				confirmNewPassword: ""
			}
		},
		components: {
			Hamburger,
			Breadcrumb,
		},
		methods: {
			// 折叠导航栏
			onCollapse: function() {
				this.$store.commit('onCollapse')
			},
			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
				}
			},
			editPawSubmit() {

				this.$message('click on item ' + this.newPassword);
			},
			logout: function() {
				var _this = this;
				this.$confirm("确认退出吗?", "提示", {
					type: "warning"
				}).then(() => {
					 localStorage.setItem('userId', '') // 保存用户到本地会话
					localStorage.setItem('loginName', '')
					localStorage.setItem('userName', '')
					localStorage.setItem('token', '')
					localStorage.setItem('belongId', '')
					//sessionStorage.clear()
					this.$store.commit('setOpenedPageList', [])
					this.$store.commit('setMenuLoaded', false)
					this.$store.commit('setRouteLoaded', false)
					this.$router.push("/login")
				}).catch(() => {});
			}
		},

		mounted() {

			var userName = localStorage.getItem("userName")
			if (userName) {
				this.userName = userName

			}



		},
		computed: {
			...mapState({
				collapse: state => state.app.collapse,
				appName: state => state.app.appName,
				secName: state => state.app.secName,
			})
		}
	}
</script>
<style scoped>
	.header-container {
		height: 60px;
		line-height: 50px;
		border-radius: 0px !important;
		background-color: #E3A150;
		color: #FFFFFF;
		/* .breadcrumb-container{
			float: left;
		} */
	}

	.hamburger-container {
		line-height: 58px;
		height: 50px;
		padding-left: 10px;
	}

	.userInfo {
		float: right;
	}

	.el-dropdown-link {
		color: #FFFFFF;
	}
</style>
