<template>
	<div class="container">
		<el-row :gutter="20">
			<el-col :span="3">
				<a :href="homePage" class="logo-link">
					<img :src="logo" style="margin-top: 0; max-width: 180px;max-height: 48px;" />
					<span class="version">{{ tenantSetting.version }}</span>
				</a>
			</el-col>
			<el-col :span="12" :offset="3">
				<myMenu v-if="$route.path != '/'" />
			</el-col>
			<el-col :span="6">
				<div class="flex container__right">
					<el-badge
						v-if="msgbadge > 0"
						:value="msgbadge"
						:max="100"
						title="内部消息"
					>
						<i class="msg-link-icon icon-message" @click="linkToMessage()"></i>
					</el-badge>
					<div class="container__right-profile">
						<h3 :title="currentUser.username"
							>你好！{{ currentUser.username }}</h3
						>
						<span v-if="curOrg.name" :title="curOrg.name"
							>所在部门：{{ curOrg.name }}</span
						>
					</div>
					<el-dropdown @command="handleCommand" trigger="click">
						<span class="container__photo-span">
							<img :src="userPhoto" class="container__photo-img" />
							<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="info">{{
								$t('navigator.userInfo')
							}}</el-dropdown-item>
							<el-dropdown-item command="langSelect">
								<lang-select class="right-menu-item hover-effect" />
							</el-dropdown-item>
							<el-dropdown-item command="switchingPost">
								<el-dropdown @command="switchPost" placement="left-start">
									<span class="theme-color">切换当前岗位</span>
									<el-dropdown-menu slot="dropdown" style="margin-right: 30px;">
										<el-dropdown-item
											:command="post"
											:disabled="post.disabled"
											:key="post.postId"
											v-for="post in postMap"
											>{{ post.postName }}({{ post.orgName }})</el-dropdown-item
										>
									</el-dropdown-menu>
								</el-dropdown>
							</el-dropdown-item>
							<el-dropdown-item command="modifyPwd">修改密码</el-dropdown-item>
							<el-dropdown-item command="electronicSealManage"
								>签章管理</el-dropdown-item
							>
							<el-dropdown-item command="logout">退出系统</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</el-col>
			<el-dialog
				title="查看个人信息"
				:visible.sync="infoDialogVisible"
				:close-on-click-modal="false"
				top="12vh"
				width="860px"
			>
				<el-form
					v-if="curUser.user"
					:inline="true"
					ref="form"
					label-width="80px"
					size="mini"
				>
					<el-form-item label="用户名称">
						<span class="content_span">{{ curUser.user.fullname }}</span>
					</el-form-item>
					<el-form-item label="用户账号">
						<span class="content_span">{{ curUser.user.account }}</span>
					</el-form-item>
					<el-form-item label="手机号码">
						<span class="content_span">{{ curUser.user.mobile }}</span>
					</el-form-item>
					<el-form-item label="邮箱地址">
						<span class="content_span">{{ curUser.user.email }}</span>
					</el-form-item>
					<el-form-item label="用户性别">
						<span class="content_span">{{ curUser.user.sex }}</span>
					</el-form-item>
					<el-form-item label="用户状态">
						<span class="content_span">{{
							curUser.user.status == '1'
								? '正常'
								: curUser.user.status == '0'
								? '禁用'
								: curUser.user.status == '-1'
								? '未激活'
								: '离职'
						}}</span>
					</el-form-item>

					<el-form-item label="家庭地址" style="width: 100%;">
						<span class="content_span" style="width: 650px;">{{
							curUser.user.address
						}}</span>
					</el-form-item>
					<el-form-item style="width: 100%;" label="所属角色">
						<template v-for="name in curUser.role">
							<el-tag type="warning" size="small" :key="name" v-if="name">{{
								name
							}}</el-tag>
						</template>
					</el-form-item>
					<el-form-item style="width: 100%;" label="所属岗位">
						<el-tooltip
							:content="post.pathName"
							placement="top"
							:key="post.postId"
							v-for="post in curUser.post"
						>
							<el-tag type="success" size="small">{{ post.postName }}</el-tag>
						</el-tooltip>
					</el-form-item>
					<el-form-item style="width: 100%;" label="所属组织">
						<el-tooltip
							:content="org.pathName"
							placement="top"
							:key="org.orgId"
							v-for="org in curUser.org"
						>
							<el-tag size="small">{{ org.orgName }}</el-tag>
						</el-tooltip>
					</el-form-item>
				</el-form>
			</el-dialog>

			<el-dialog
				title="签章管理"
				:visible.sync="electronicSealVisible"
				width="40%"
				:close-on-click-modal="false"
			>
				<el-form data-vv-scope="electronicSealForm">
					<ht-form-item label="签章">
						<ht-viewer v-model="electronicSeal.fileId" v-if="htViewerDialog" />
					</ht-form-item>
					<ht-form-item label="登录密码">
						<ht-input
							v-model="electronicSeal.oldPassWord"
							validate="required"
							type="password"
							placeholder="请输入登录密码"
						/>
					</ht-form-item>
					<ht-form-item label="请输入密码">
						<ht-input
							v-model="electronicSeal.password"
							type="password"
							placeholder="请输入密码"
						/>
					</ht-form-item>
					<ht-form-item label="确认密码">
						<ht-input
							v-model="electronicSeal.confirmPwd"
							:validate="'confirmed:' + electronicSeal.password"
							type="password"
							placeholder="确认密码"
						/>
					</ht-form-item>
				</el-form>
				<div class="dialog-footer electronic-style">
					<ht-submit-button
						:url="ElectronicSealSubmitUrl"
						:model="electronicSeal"
						:isSubmit="isSubmit"
						requestMethod="POST"
						scopeName="editForm"
						@before-save-data="beforeSaveData"
						@after-save-data="afterSaveData"
						>{{ $t('eip.common.save') }}</ht-submit-button
					>
				</div>
			</el-dialog>
			<el-dialog
				title="修改密码"
				:visible.sync="modifyPwdDialogVisible"
				:close-on-click-modal="false"
				top="20vh"
				width="500px"
				id="modlfy-dialog"
				@open="open"
			>
				<el-form
					:model="pwdForm"
					:rules="pwdRules"
					ref="pwdForm"
					label-width="120px"
					size="mini"
				>
					<el-form-item label="旧密码" prop="old">
						<el-input
							type="password"
							v-model="pwdForm.old"
							placeholder="请输入旧密码"
						></el-input>
					</el-form-item>
					<el-form-item label="新密码" prop="new">
						<el-input
							type="password"
							placeholder="请输入新密码"
							v-model="pwdForm.new"
						></el-input>
					</el-form-item>
					<el-form-item label="重复新密码" prop="newRepeat">
						<el-input
							type="password"
							placeholder="请再次输入新密码"
							v-model="pwdForm.newRepeat"
						></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer" style="text-align: center;">
					<el-button size="small" type="primary" @click="submitForm"
						>确认</el-button
					>
					<el-button size="small" @click="modifyPwdDialogVisible = false"
						>取 消</el-button
					>
				</span>
			</el-dialog>
		</el-row>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import myMenu from '@/components/menu.vue';
import langSelect from '@/components/langSelect';
import req from '@/request.js';
import HtViewer from '@/components/common/HtViewer';
import messageReceiver from '@/store/messageReceiverList';
export default {
	name: 'navigator',
	data() {
		var validateNew = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入新密码'));
			}
			let config = this.pwdStrategy;
			if (config.enable == 1) {
				let pwdRule = config.pwdRule;
				let pwdLength = config.pwdLength;
				if (pwdRule) {
					if (value.length < pwdLength) {
						callback(new Error('新密码长度至少为' + pwdLength));
					} else if (pwdRule == 2) {
						var re = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])');
						if (!re.test(value)) {
							callback(new Error('新密码必须包含数字、字母'));
						} else {
							callback();
						}
					} else if (pwdRule == 3) {
						var re1 = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])');
						if (!re1.test(value)) {
							callback(new Error('新密码必须包含数字、字母、特殊字符'));
						} else {
							callback();
						}
					} else if (pwdRule == 4) {
						var re2 = new RegExp(
							'(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9])'
						);
						if (!re2.test(value)) {
							callback(new Error('新密码必须包含数字、大小字母、特殊字符'));
						} else {
							callback();
						}
					} else {
						callback();
					}
				}
			} else {
				if (value.length < 6) {
					callback(new Error('新密码长度至少为6'));
				} else {
					callback();
				}
			}
		};
		var validateold = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入旧密码'));
			} else {
				callback();
			}
		};
		var validateNewReapeat = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入新密码'));
			} else if (value !== this.pwdForm.new) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			logo: '',
			showLogo: true,
			infoDialogVisible: false,
			modifyPwdDialogVisible: false,
			electronicSealVisible: false,
			userPhoto: require('@/assets/img/defaultPhoto.jpg'),
			pwdForm: {
				old: '',
				new: '',
				newRepeat: '',
			},
			pwdRules: {
				old: [{ validator: validateold, trigger: 'blur' }],
				new: [{ validator: validateNew, trigger: 'blur' }],
				newRepeat: [{ validator: validateNewReapeat, trigger: 'blur' }],
			},
			count: 0,
			homePage: window.context.front + '/home',
			electronicSeal: {
				fileId: '',
				password: '',
				oldPassWord: '',
				picUrl: '',
			},
			electronicSealFileUrl: '',
			htViewerDialog: false,
			isSubmit: false,
		};
	},
	computed: mapState({
		postMap: state => state.user.postMap || {},
		tenantSetting: state => state.setting.tenantSetting || {},
		currentUser: state => {
			return state.login.currentUser ? state.login.currentUser : {};
		},
		curUser: state => state.user.currentUserDetail || {},
		curOrg: state => state.user.currentOrgDetail || {},
		pwdStrategy: state => state.user.pwdStrategy || {},
		ElectronicSealSubmitUrl: function () {
			return window.context.uc + '/uc/electronicSeal/v1/userSave';
		},
		msgbadge: state => state.messageReceiver.msgbadge || 0,
	}),
	mounted() {
		const _this = this;
		const currentUser = this.$store.state.login.currentUser;
		if (currentUser) {
			let userAttrs = this.$store.state.login.currentUser.userAttrs;
			if (userAttrs) {
				let tenantId = userAttrs.tenantId;
				//租户
				if (tenantId && tenantId != 'null') {
					let url =
						window.context.uc + '/uc/tenantManage/v1/getJson?id=' + tenantId;
					this.$http.get(url).then(
						resp => {
							if (resp.data) {
								let tenantManage = resp.data;
								if (tenantManage.frontLogo) {
									let frontLogo = JSON.parse(tenantManage.frontLogo);
									if (frontLogo && frontLogo.length > 0) {
										_this.showLogo = true;
										req
											.get(
												window.context.portal +
													'/file/onlinePreviewController/v1/getFileById_' +
													frontLogo[0].id,
												'arraybuffer'
											)
											.then(response => {
												let type = response.headers['content-type'];
												if (type) {
													_this.logo = window.URL.createObjectURL(
														new Blob([response.data], { type: type })
													);
												} else {
													_this.logo = window.URL.createObjectURL(
														new Blob([response.data])
													);
												}
											});
										// _this.logo = window.context.portal + "/system/file/v1/downloadFile?fileId=" + frontLogo[0].id;
									}
								} else {
									_this.showLogo = false;
									this.logo = require('@/assets/img/logo.svg');
								}
							}
						},
						error => {
							_this.showLogo = false;
							this.logo = require('@/assets/img/logo.svg');
							reject(error);
						}
					);
				} else {
					//不是租户
					this.logo = require('@/assets/img/logo.svg');
					_this.sysSetting();
				}
			} else {
				//不是租户
				this.logo = require('@/assets/img/logo.svg');
				_this.sysSetting();
			}
		} else {
			//不是租户
			this.logo = require('@/assets/img/logo.svg');
			_this.sysSetting();
		}
		setTimeout(() => {
			this.$route.path !== '/' &&
				this.$store.dispatch('user/loadCurrentUserDetail').then(data => {
					if (data) {
						var promise = this.$store.dispatch('user/getCurrent');
						promise.then(data => {
							if (data.photo && data.photo.indexOf('img/defaultPhoto') < 0) {
								this.$store
									.dispatch('menu/downloadImg', data.photo)
									.then(res => {
										if (res != '') {
											this.userPhoto = res;
										}
									});
							}
						});
					}
				});
		}, 1200);

		this.$store.dispatch('messageReceiver/setMsgbadge');
	},
	watch: {
		//第一次加载著部门，当前切换岗位部门时当前部门发生改变
		'$store.state.user.postCharge': function () {
			const postCharge = this.$store.state.user.postCharge;
			this.count += 1;
			if (postCharge.org && this.count > 1) {
				this.$store.dispatch('user/setcurrentOrg', postCharge.org);
			}
		},
	},
	methods: {
		//获取系统默认配置 系统Logo、名称
		sysSetting() {
			const _this = this;
			let url =
				window.context.portal + '/sys/sysProperties/v1/getDecryptBySysSetting';
			_this.$http.get(url).then(response => {
				if (response && response.data && response.data.value) {
					let sysSettingData = JSON.parse(response.data.value);
					if (sysSettingData.frontLogo.length > 0) {
						let frontLogo = sysSettingData.frontLogo;
						_this.showLogo = true;
						req
							.get(
								window.context.portal +
									'/file/onlinePreviewController/v1/getFileById_' +
									frontLogo[0].id,
								'arraybuffer'
							)
							.then(response => {
								let type = response.headers['content-type'];
								if (type) {
									_this.logo = window.URL.createObjectURL(
										new Blob([response.data], { type: type })
									);
								} else {
									_this.logo = window.URL.createObjectURL(
										new Blob([response.data])
									);
								}
							});
					} else {
						this.logo = require('@/assets/img/logo.svg');
					}
				} else {
					this.logo = require('@/assets/img/logo.svg');
				}
			});
		},
		open() {
			this.$store.dispatch('user/getDefPwdStrategy');
		},
		handleCommand(command) {
			switch (command) {
				case 'logout':
					//退出登陆时把vuex 里面的一些值清空
					this.$store.dispatch('menu/setCopyMenus', []); //菜单
					let loginRouthPath =
						localStorage.getItem(
							this.$store.state.login.currentUser.account + 'loginRoutePath'
						) || '/login';
					this.$store.dispatch('login/logoutAndCleanUp').then(() => {
						switch (window.ssoConfig.mode) {
							case 'cas':
							case 'oauth':
								window.sessionStorage.removeItem('currentUser');
								window.location.href =
									window.ssoConfig.logout +
									'?service=' +
									window.location.href.split('?')[0];
								break;
							default:
								this.$router.push({
									path: loginRouthPath,
								});
								break;
						}
					});
					break;
				case 'info':
					this.infoDialogVisible = true;
					break;
				case 'electronicSealManage':
					// 签章管理
					// 获取当前登录用户的签章图片
					req
						.get(
							window.context.uc + '/uc/electronicSeal/v1/getSealByCurrentUserId'
						)
						.then(response => {
							if (response.data) {
								this.electronicSeal = response.data;
								this.$store
									.dispatch('menu/downloadImg', this.electronicSeal.fileId)
									.then(res => {
										if (res != '') {
											this.electronicSealFileUrl = res;
										}
									});
							}
						})
						.then(() => {
							this.htViewerDialog = false;
							this.$nextTick(() => {
								this.htViewerDialog = true;
								this.electronicSealVisible = true;
							});
						});
					break;
				case 'modifyPwd':
					this.modifyPwdDialogVisible = true;
					if (this.$refs['pwdForm']) {
						this.$refs['pwdForm'].resetFields();
					}
					break;
			}
		},
		submitForm() {
			let this_ = this;
			this.$refs['pwdForm'].validate(valid => {
				if (valid) {
					this.$store
						.dispatch('user/modifyPwd', {
							oldPwd: this.pwdForm.old,
							newPwd: this.pwdForm.new,
						})
						.then(data => {
							if (data.state) {
								this.modifyPwdDialogVisible = false;
								this.$alert('修改密码成功, 请使用新密码重新登录。', '提示', {
									confirmButtonText: '确定',
									callback: action => {
										//退出登录
										this_.handleCommand('logout');
									},
								});
							} else {
								this.$message.error(data.message || '保存失败');
							}
						});
				}
			});
		},
		switchPost(item) {
			for (let obj in this.postMap) {
				this.postMap[obj].disabled = false;
			}
			item.disabled = true;
			//设置表单中当前岗位
			this.$store.dispatch('user/setpostMap', {
				postMap: this.postMap,
				postCharge: item,
			});
			this.$message.success('切换当前岗位成功');
			this.infoDialogVisible = true;
			this.infoDialogVisible = false;
		},
		beforeSaveData() {
			this.isSubmit = true;
			if (!this.electronicSeal.oldPassWord) {
				this.$message.warning('请输入登录密码！');
				this.isSubmit = false;
				return;
			}
			if (!this.electronicSeal.password) {
				this.$message.warning('请输入密码！');
				this.isSubmit = false;
				return;
			}
			if (!this.electronicSeal.confirmPwd) {
				this.$message.warning('请输入确认密码！');
				this.isSubmit = false;
				return;
			}
			if (this.electronicSeal.password != this.electronicSeal.confirmPwd) {
				this.$message.warning('密码与确认密码不一致！');
				this.isSubmit = false;
				return;
			}
		},
		afterSaveData() {
			// 签章添加完成后的操作
			this.electronicSealVisible = false;
		},
		linkToMessage() {
			this.$router.push({ path: '/v-personal/v-messageReceiver' });
		},
	},
	components: {
		HtViewer,
		myMenu,
		langSelect,
	},
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.container {
	margin: 0 auto;
	height: 100%;
	overflow: hidden;

	.el-row {
		height: 100%;
		.el-col {
			height: 100%;
		}
	}

	.container__left-logo {
		height: calc(100% - 5px);
		margin-left: 30px;
	}

	.container__right {
		justify-content: space-around;
		align-items: center;
		float: right;
		height: 100%;
		width: 280px;

		.el-badge {
			margin-right: 30px;
		}

		.el-dropdown {
			height: 100%;
		}

		.container__photo-span {
			padding-right: 20px;
		}

		.container__photo-img {
			width: 35px;
			height: 35px;
			border-radius: 50%;
		}

		.container__photo-img + i {
			position: absolute;
			top: 20px;
			right: 0px;
		}
	}

	.msg-link-icon {
		font-size: 20px;
		cursor: pointer;
		color: white;
	}

	.container__right-profile {
		min-width: 90px;
		max-width: 150px;

		h3 {
			margin: 5px 0;
			color: $--color-white;
			white-space: nowrap;
			display: inline-block;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		span {
			color: $--color-white;
			white-space: nowrap;
			display: inline-block;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}

.theme-color {
	color: $--color-text-regular;
}

.el-row {
	margin: 0 -20px;
}

img {
	margin-top: 5px;
}

div.el-dropdown,
div.el-dropdown + span {
	color: #fff;
	line-height: 48px;
	font-size: 13px;
}

.logo-link {
	color: #fff;
	text-decoration: none;
	font-size: 24px;
	font-weight: 400;
	line-height: 48px;
}

.el-form /deep/ .el-form-item__content > .el-tag {
	margin-right: 10px;
}

.content_span {
	color: #212121;
	border-bottom: 1px solid #ededed;
	width: 260px;
	display: inline-block;
	margin: 0 30px 0 10px;
}

#modlfy-dialog /deep/ .el-input__inner {
	width: 200px;
}
.electronic-style {
	margin-left: 100px;
}
.msg-link-icon {
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	color: white;
}
.msg-link-badge {
	margin: 15px 25px;
}
.msg-link-badge /deep/ .el-badge__content {
	height: 14px;
	line-height: 14px;
}
.version {
	margin-left: 6px;
	padding: 2px;
	line-height: 12px;
	position: fixed;
	height: auto;
	top: 20px;
	color: white;
	border: solid 1px white;
	font-size: 1vw;
	-webkit-transform-origin-x: 0;
	-webkit-transform: scale(0.7);
	transform-origin: 0;
	transform: scale(0.7);
}
</style>
