<!-- 个人信息 -->
<template>
	<div class='personDetails'>
		<div style="">
			<el-button class="detailSave" type="primary" @click="submitForm('userForm')" style="margin-right: 30px;">保存</el-button>
			<!--<div class="detailTop">-->
				<!--<div class="imgAndName">-->
					<!--<div class="imgDiv">-->
						<!--<img src="../../assets/images/photoDefault.png"/>-->
						<!--<img v-show="userForm.status === '2'" class="statusImg" src="../../assets/images/statusBusy.png"/>-->
						<!--<img v-show="userForm.status === '0'" class="statusImg" src="../../assets/images/statusIdle.png"/>-->
						<!--<img v-show="userForm.status === '1'" class="statusImg" src="../../assets/images/statusNormal.png"/>-->
					<!--</div>-->
					<!--<div class="nameDiv">-->
						<!--<div class="nameStyle">{{userForm.username}}</div>-->
						<!--<div class="jobStyle">{{userForm.jobs}}</div>-->
					<!--</div>-->
				<!--</div>-->
			<!--</div>-->
			<div style="margin-top: 30px;">
				<el-form :hide-required-asterisk="true" :model="userForm" :rules="rules" ref="userForm" label-width="100px" class="demo-ruleForm">
					<div class="formDiv">
						<el-row :gutter="100">
							<el-col :span="12">
								<div class="imgDiv">
									<img src="../../assets/images/photoDefault.png"/>
									<img v-show="userForm.status === '2'" class="statusImg" src="../../assets/images/statusBusy.png"/>
									<img v-show="userForm.status === '0'" class="statusImg" src="../../assets/images/statusIdle.png"/>
									<img v-show="userForm.status === '1'" class="statusImg" src="../../assets/images/statusNormal.png"/>
								</div>
								<el-form-item class="first" label="身份证">
									<div class="formDisabled">{{userForm.idCard}}</div>
								</el-form-item>
								<el-form-item class="first" label="电话1" prop="phone1">
									<!--<div v-if="showPhoneInput">{{userForm.phone1}}</div>-->
									<el-input v-model.number="userForm.phone1" autocomplete="off"></el-input>
									<!--<i @click="showPhoneInput = !showPhoneInput" class="el-icon-edit"></i>-->
								</el-form-item>
								<el-form-item class="first" label="部门">
									<span class="formDisabled">{{nameDepartment(userForm.departmentIds)}}</span>
								</el-form-item>
								<el-form-item class="first" label="地址" prop="address">
									<el-input v-model="userForm.address"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<div class="nameDiv">
									<div class="nameStyle">{{userForm.username}}</div>
									<div class="jobStyle">{{userForm.jobs}}</div>
								</div>
								<el-form-item class="first" prop="email" label="邮箱">
									<el-input v-model="userForm.email"></el-input>
								</el-form-item>
								<el-form-item class="first" label="电话2" prop="phone2">
									<el-input v-model="userForm.phone2"></el-input>
								</el-form-item>
								<el-form-item class="first" label="角色" >
									<!-- class="roleSpan"-->
									<span class="formDisabled" v-show="userForm.roles !== undefined && userForm.roles.length === 0">无</span>
									<span v-show="userForm.roles !== undefined && userForm.roles.length > 0" class="formDisabled" v-for="(items, index) in userForm.roles" :key="index">{{items.name}}</span>
								</el-form-item>
								<el-form-item class="first" label="入职时间" >
									<div class="formDisabled">{{userForm.entryTime}}</div>
								</el-form-item>
							</el-col>
						</el-row>
					</div>
				</el-form>
			</div>
		</div>

	</div>
</template>

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

	export default {
		name: "personDetails",
//import引入的组件需要注入到对象中才能使用
		components: {},
		data () {
			var checkPhone = (rule, value, callback) => {
				const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/;
				console.log(value)
				if (value !== '') {
					console.log(value)
					if (phoneReg.test(value)) {
						callback()
					} else {
						callback(new Error('电话号码格式不正确'))
					}
				} else {
					callback()
				}
			};
			var checkPhone2 = (rule, value, callback) => {
				const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/;
				console.log(value)
				if (value !== '') {
					console.log(value)
					if (phoneReg.test(value)) {
						callback()
					} else {
						callback(new Error('电话2号码格式不正确'))
					}
				} else {
					callback()
				}
			};
//这里存放数据
			return {
				paramsData: '',
				userForm:{
					username: '',
					phone1: '',
					phone2: '',
					idCard: '',
					address: '',
					jobs: '',
					departmentIds: '',
					// department2: '',
					// department3: '',
					email: '',
					entryTime: '',
				},
				rules:{
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' },
					],
					phone1: [
						{required: true, validator: checkPhone, trigger: 'blur' }
					],
					phone2: [
						{ validator: checkPhone2, trigger: 'blur' }
					],
					idCard: [
						{ required: true, message: '请填写证件号码', trigger: 'blur' },
						{
							pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
							message: '证件号码格式有误！',
							trigger: 'blur'
						}
					],
					address: [
						{ required: true, message: '请输入地址', trigger: 'blur' },
					],
					jobs: [
						{ required: true, message: '请输入岗位', trigger: 'blur' },
					],
					departmentIds: [
						{ required: true, message: '请输入部门1', trigger: 'blur' },
					],
					// department2: [
					// 	{ required: true, message: '请输入部门2', trigger: 'blur' },
					// ],
					// department3: [
					// 	{ required: true, message: '请输入部门3', trigger: 'blur' },
					// ],
					email: [
						{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
						{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
					],
					entryTime: [
						{ required: true, message: '请选择入职时间', trigger: 'change' }
					],
				},
				deOptions: [],
				showPhoneInput: false
			};
		},
//监听属性 类似于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;
			},
			submitForm(formName) {
				console.log(this.userForm)
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.putOrdinaryUser(this.userForm).then((res) => {
							console.log(res)
							if (res.status === 200) {
								this.$message({
									message: '修改信息成功!',
									type: 'success'
								});
								localStorage.setItem('login', this.$Base64.encode(JSON.stringify(res.data)));
								this.userForm = res.data;
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			deleteUSer() {

			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			// let data = {name: '张三', tel1: 13456870678, tel2: '', idCard: '330311111111111111',
			// address: '杭州市嘻嘻嘻嘻嘻嘻嘻嘻', job: '开发工程师', department1: '研发中心',
			// 	department2: '技术中心', department3: '工作簿组', email: '123@123.com',entryTime:'2020-02-02',
			// 	role: ['工作簿组长']
			// }
			this.postDepartmentList();
			let that = this;
			setTimeout(function () {
				let data = JSON.parse(that.$Base64.decode(localStorage.getItem('login')));
				console.log(data)
				that.userForm = data;
			}, 300)


		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.personDetails{
		width: 100%;
		margin: 0 auto;
		position: relative;
	}

	.consumerDetails{
		height: 98%;
	}

	.leftImg{
		text-align: center;
	}

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

	.roleDiv /deep/ .el-select {
		display: inline-block;
		position: relative;
		width: 100%;
	}

	.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;*/
	}

	.detailSave{
		position: absolute;
		top: 0px;
		right: 0px;
	}

	.detailTop{
		height: 320px;
		margin-top: 50px;
		/*line-height: 320px;*/
	}

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

	.imgDiv{
		width: 330px;
		height: 244px;
		background-image: url("../../assets/images/personPhoto.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-right: 90px;
		position: relative;
	}

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

	.imgDiv img{
		width: 246px;
		margin: 42px 0 0 42px;
	}

	.nameDiv{
		text-align: left;
		height: 242px;
	}

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

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

	/deep/ .el-form-item__label {
		text-align: center;
		vertical-align: middle;
		float: none;
		font-size: 18px;
		color: #606266;
		line-height: 40px;
		padding: 0 12px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/deep/ .el-form-item__content {
		line-height: 40px;
		position: relative;
		font-size: 14px;
		margin-left: 0 !important;
	}

	.formDiv{
		margin: 0 200px;
	}

	.formDisabled{
		height: 40px;
		line-height: 40px;
		font-size: 18px;
	}

	/deep/ .el-input__inner {
		-webkit-appearance: none;
		background-color: #FFF;
		background-image: none;
		border-radius: 20px;
		border: 1px solid #DCDFE6;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		font-size: 18px;
		height: 40px;
		line-height: 40px;
		outline: 0;
		padding: 0 15px;
		-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		width: 100%;
	}

	/deep/ .el-input__inner{
		border-color: #a8acea;/*no*/
		font-size: 18px;
	}

	/deep/ .el-input__inner:hover {
		border-color: #5059d5;
	}

	/deep/ .el-input.is-active .el-input__inner, .el-input__inner:focus {
		border-color: #5059d5;
		outline: 0;
	}
</style>
