<!-- 人员信息 -->
<template>
	<div class='personInfo'>
		<div style="">
			<el-row :gutter="20">
				<el-col :span="5">
					<div class="leftImg">
						<!--<img src="../assets/images/xq-tx-1.png"/>-->
						<!--<img src="../assets/images/xq-tx-2.png"/>-->
					</div>
				</el-col>
				<el-col :span="19">
					<div>
						<el-form :hide-required-asterisk="true" :model="userForm" :rules="rules" ref="userForm" label-width="100px" class="demo-ruleForm">
							<el-row :gutter="10">
								<el-col :span="8">
									<el-form-item class="first" label="姓名">
										<div>{{userForm.username}}</div>
									</el-form-item>
									<el-form-item class="first" label="身份证">
										<div>{{userForm.idCard}}</div>
									</el-form-item>
									<el-form-item class="first" prop="email" label="邮箱">
										<div>{{userForm.email}}</div>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item class="first" label="电话1" prop="phone1">
										<div>{{userForm.phone1}}</div>
									</el-form-item>
									<el-form-item class="first" label="地址" prop="address">
										<div>{{userForm.address}}</div>
									</el-form-item>
									<!--<el-form-item class="first" label="部门2" prop="department2">-->
									<!--<div>{{userForm.department2}}</div>-->
									<!--</el-form-item>-->
								</el-col>
								<el-col :span="8">
									<el-form-item class="first" label="电话2" prop="phone2">
										<div>{{userForm.phone2}}</div>
									</el-form-item>
									<el-form-item class="first" label="入职时间" >
										<div>{{userForm.entryTime}}</div>
									</el-form-item>
								</el-col>
							</el-row>
							<div class="roleDiv first" style="width: 100%;">
								<el-form-item class="first" label="部门">
									<span class="deSpan">{{nameDepartment(userForm.departmentIds)}}</span>
								</el-form-item>
								<el-form-item class="first" label="岗位">
									<div>{{userForm.jobs}}</div>
								</el-form-item>
								<el-form-item label="角色" >
									<span class="roleSpan" v-for="(items, index) in userForm.roles" :key="index">{{items.name}}</span>
								</el-form-item>
							</div>
						</el-form>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

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

	export default {
		name: "personInfo",
//import引入的组件需要注入到对象中才能使用
		components: {},
		data () {
//这里存放数据
			return {
				paramsData: '',
				userForm:{ // 表单
					username: '',
					phone1: '',
					phone2: '',
					idCard: '',
					address: '',
					jobs: '',
					departmentIds: '',
					// department2: '',
					// department3: '',
					email: '',
					entryTime: '',
				},
				rules:{
				},
				deOptions: []
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			postDepartmentList() { // 部门数据
				this.$axios.getAllDepartment().then((res) => {
					console.log(res)
					if (res.request.status === 200) {
						this.deOptions = res.data;
					}
				})
			},
			nameDepartment(val) { // 名称
				console.log(val)
				let name = '';
				console.log(this.deOptions)
				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 () {
			this.postDepartmentList();
			let that = this;
			setTimeout(function () {
				let data = JSON.parse(that.$Base64.decode(localStorage.getItem('infoPerson')));
				console.log(data)
				that.userForm = data;
			}, 300)
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.leftImg{
		text-align: center;
	}

	.leftImg img{
		width: 300px;
		height: 420px;
		margin-top: 40px;
	}

	.first {
		margin-top: 50px;
	}

	.roleSpan{
		display: inline-block;
		/*width: 100px;*/
		height: 40px;
		padding: 0 10px;
		font-size: 18px;
		line-height: 40px;
		background: #53b0e6;
		text-align: center;
		border-radius: 4px;
		color: #FFF;
	}

	.deSpan{
		/*display: inline-block;*/
		/*height: 40px;*/
		/*padding: 0 5px;*/
		font-size: 18px;
		/*line-height: 40px;*/
		/*background: #53b0e6;*/
		/*text-align: center;*/
		/*border-radius: 4px;*/
		/*color: #FFF;*/
	}


</style>
