<!-- 人员列表查看弹框 -->
<template>
	<div class='personInfoDialog'>
		<el-dialog title="" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" :visible.sync="dialogListDetailVisible">
			<div slot="title" class="header-title">
				<span class="dialogHeader">查看人员信息</span>
				<img @click="closeDialog()" class="dialogHeaderClose" src="../assets/images/dialogClose.png" />
			</div>
			<div class="">
				<div class="detailTop">
					<div class="imgAndName">
						<div class="imgDiv">
							<img class="pic" src="../assets/images/photoDefault.png"/>
							<img v-show="listDetails.status === '2'" class="statusImg" src="../assets/images/statusBusy.png"/>
							<img v-show="listDetails.status === '0'" class="statusImg" src="../assets/images/statusIdle.png"/>
							<img v-show="listDetails.status === '1'" class="statusImg" src="../assets/images/statusNormal.png"/>
						</div>
						<div class="nameDiv">
							<div class="nameStyle">{{listDetails.username}}</div>
							<div class="jobStyle">{{listDetails.jobs}}</div>
						</div>
					</div>
					<div class="elDiv">
						<ul>
							<el-row :gutter="100">
								<el-col :span="12">
									<li>
										<div class="titleDiv">身份证</div>
										<div class="contentDiv">{{listDetails.idCard}}</div>
									</li>
									<li>
										<div class="titleDiv">电话1</div>
										<div class="contentDiv">{{listDetails.phone1}}</div>
									</li>
									<li>
										<div class="titleDiv">部门</div>
										<div class="contentDiv">{{nameDepartment(listDetails.departmentIds)}}</div>
									</li>
									<li>
										<div class="titleDiv">地址</div>
										<div class="contentDiv">{{listDetails.address}}</div>
									</li>
								</el-col>
								<el-col :span="12">
									<li>
										<div class="titleDiv">邮箱</div>
										<div class="contentDiv">{{listDetails.email}}</div>
									</li>
									<li>
										<div class="titleDiv">电话2</div>
										<div class="contentDiv">{{listDetails.phone2}}</div>
									</li>
									<li>
										<div class="titleDiv">角色</div>
										<div class="contentDiv">
											<span class="formDisabled" v-for="(items, index) in listDetails.roles" :key="index">{{items.name}}</span>
										</div>
									</li>
									<li>
										<div class="titleDiv">入职时间</div>
										<div class="contentDiv">{{listDetails.entryTime}}</div>
									</li>
								</el-col>
							</el-row>
						</ul>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';

	export default {
		name: "personInfoDialog",
//import引入的组件需要注入到对象中才能使用
		components: {},
		props: ['showListDetailDialog','listDetails', 'deOptions'],
		data () {
//这里存放数据
			return {
				dialogListDetailVisible: false
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {
			showListDetailDialog:{
				immediate: true,
				handler(showListDetailDialog) {
					this.dialogListDetailVisible = showListDetailDialog;
				}
			},
		},
//方法集合
		methods: {
			closeDialog() {
				this.$emit('close', false);
			},
			nameDepartment(val) {
				console.log(val)
				let name = '';
				console.log(this.deOptions)
				if (this.deOptions.length > 0 && val !== undefined) {
					for ( let i = 0; i < this.deOptions.length; i++ ) {
						for (let j = 0; j < val.length; j++) {
							if (this.deOptions[i].id === val[j]) {
								name = name + this.deOptions[i].name + '、';
							}
						}
					}
					name = name.substring(0, name.length - 1);
					console.log(name);
				}
				return name;
			},
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {

		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.detailTop{
		height: 320px;
		margin-top: 50px;
		/*line-height: 320px;*/
	}

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

	.imgAndName .imgDiv{
		width: 215px;
		height: 160px;
		background-image: url("../assets/images/personPhoto.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-right: 160px;
		margin-left: -180px;
		position: relative;
	}

	.imgDiv .pic{
		width: 155px;
		margin: 30px 0 0 30px;
	}

	.imgDiv .statusImg{
		width: 45px;
		position: absolute;
		top: 0px;
		right: 0px;
	}

	.nameDiv{
		text-align: center;
	}

	.nameStyle{
		color: #5059D5;
		font-size: 30px;
	}

	.jobStyle{
		color: #19152C;
		font-size: 20px;
		margin-top: 30px;
	}

	.elDiv{
		margin: 70px 350px;
	}

	.elDiv li{
		height: 40px;
		margin-top: 50px;
		font-size: 18px;
	}

	.titleDiv{
		color: #787682;
	}

	.contentDiv{
		color: #19152c;
		margin-top: 5px;
		font-weight: bold;
	}
</style>
