<template>
	<div>
		<div class="header-container">
			<div class="logo">
				<router-link to="/">
					<img src="@/assets/logo.png" alt />
					<span>OPS211供应链管理系统</span>
				</router-link>
				<ul class="system-info text-r">
					<li>
						<span>{{ companyName }}</span>
					</li>
					<li
						v-if="
							orgIdArr &&
							orgIdArr.length &&
							userInfo.identity !== 2
						"
					>
						<el-dropdown
							@command="handleCommand"
							v-if="userInfo.identity !== 2"
						>
							<span class="el-dropdown-link">
								{{ orgName }}
								<i
									class="el-icon-arrow-down el-icon--right"
								></i>
							</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item
										:command="it.id"
										v-for="(it, index) in orgIdArr"
										:value="it.name"
										:key="index"
										:style="{
											height: it.disable ? '0px' : 'auto',
										}"
									>
										{{
											!it.disable ? it.name : ''
										}}</el-dropdown-item
									>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
						<span v-else>{{ orgName }}</span>
					</li>
					<li>
						<el-dropdown>
							<span class="el-dropdown-link">
								{{ userInfo.nickname }}
								<i
									class="el-icon-arrow-down el-icon--right"
								></i>
							</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item
										@click.stop="handleSigninOut"
										>退出</el-dropdown-item
									>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</li>
				</ul>
			</div>
		</div>
		<!-- 页面标签 -->
		<page-labels />
	</div>
</template>
<style lang="scss" scoped>
.header-container {
	width: 100%;
	box-sizing: border-box;
	background: #fff;
}

.header-container .logo {
	background: #fff;
	display: flex;
	width: 100%;
	height: 40px;
	justify-content: space-between;
	align-items: center;
}

.header-container .logo img {
	display: inline-block;
	vertical-align: middle;
	width: 24px;
	height: 24px;
	margin-right: 16px;
	margin-left: 16px;
}

.header-container .logo span {
	display: inline-block;
	vertical-align: middle;
	font-size: 13px;
	font-weight: bold;
	color: #303133;
}

.header-container ul.system-info {
	display: inline-block;
	list-style: none;
	font-size: 12px;
	color: #303133 !important;
	height: 34px;
	line-height: 34px;
	background-color: #fff;
	cursor: pointer;
}

.header-container ul ::v-deep(.el-dropdown) {
	line-height: inherit;
}

.header-container ul ::v-deep(.el-dropdown-link) {
	color: #303133 !important;
}

.header-container ul.system-info li:first-child {
	padding-right: 16px;
}

.header-container ul.system-info li:not(:first-child),
.header-container ul.system-info li:not(:last-child) {
	display: inline-block;
	padding: 0 16px;
}

.header-container ul.system-info li:last-child {
	padding-left: 16px;
}

.header-container ul.system-info li:nth-child(2) {
	position: relative;
}

.header-container ul.system-info li:nth-child(2)::before,
.header-container ul.system-info li:nth-child(2)::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 20px;
	border-left: 1px solid #e4e7ed;
}

.header-container ul.system-info li:nth-child(2)::before {
	left: 0;
}

.header-container ul.system-info li:nth-child(2)::after {
	right: 0;
}

.header-container ul.system-info li span {
	font-size: 12px;
	font-weight: 500;
}
</style>
<script>
import { mapActions, mapState } from 'vuex';
import Labels from './labels';
import { SigninOut } from '../../../../utils/pubulic';
export default {
	components: {
		'page-labels': Labels,
	},
	data() {
		return {
			path: '/index',
			companyName: '',
			orgName: '',
			org: [],
		};
	},
	computed: {
		...mapState({
			// 取出页面标签
			userInfo: (state) =>
				JSON.stringify(state) !== '{}' &&
				state.user &&
				state.user.userInfo
					? state.user.userInfo
					: {},
			orgId: (state) =>
				JSON.stringify(state) !== '{}' && state.user
					? state.user.orgId
					: null,
			orgIdArr: (state) =>
				JSON.stringify(state) !== '{}' ? state.user.orgIdArr : null,
			setOrgDeptId: (state) =>
				JSON.stringify(state) !== '{}' ? state.org.orgId : null,
		}),
	},
	watch: {
		// 监听路由变化
		$route(to, from) {
			this.path = to.path;
		},
	},
	created() {
		this.path = this.$route.path;
		// 避免刷新重置
		if (this.$store.state.org.orgId) {
			this.companyName =
				this.userInfo.identity === 1
					? this.userInfo.companyName
					: this.userInfo.identity === 2
					? this.userInfo.supplierName
					: this.userInfo.identity === 2
					? this.userInfo.customerName
					: null;
			this.handleCommand(this.$store.state.org.orgId);
		} else {
			let theorgtID = null;
			let thename = null;
			if (this.userInfo.identity === 1) {
				// 正常用户
				theorgtID = this.userInfo.orgId;
				thename = this.userInfo.companyName;
				this.initset(theorgtID, thename);
			}
			if (this.userInfo.identity === 2) {
				// 供应商
				theorgtID = this.userInfo.supplierId;
				thename = this.userInfo.supplierName;
				this.initset(theorgtID, thename);
			}
			if (this.userInfo.identity === 3) {
				// 客户
				theorgtID = this.userInfo.customerId;
				thename = this.userInfo.customerName;
				this.initset(theorgtID, thename);
			}
		}
	},
	methods: {
		...mapActions({
			// 关闭标签及页面
			handleCloseTag: 'topNavTag/removeNavTag',
			handleSetorgId: 'user/setorgId',
			handleSetOrgDeptId: 'org/setorgId',
		}),
		initset(id, name) {
			this.handleSetorgId(id);
			this.handleSetOrgDeptId(id);
			if (!this.$store.state.org.orgId) {
				this.handleCommand(id);
			}
			this.companyName = name;
		},
		handleCommand(command) {
			let idx = this.orgIdArr.findIndex((it) => {
				return it.id === command;
			});
			this.orgName = idx !== -1 ? this.orgIdArr[idx].name : '';
			this.userInfo.orgName = this.orgName;
			this.handleSetorgId(command);
			this.handleSetOrgDeptId(command);
		},

		// 个人中心
		handleNavigatorPersonCenter() {
			window.open(import.meta.env.VITE_SSO_BASEURL + 'user/index.html');
		},
		// 退出
		handleSigninOut() {
			SigninOut();
		},
		orgChange(val) {
			console.log(val);
		},
	},
};
</script>
