<template>
	<div class="box" v-loading="loading">
		<el-row :gutter="12" style="height: 100%;">
			<el-col :span="8" :xs="24">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>个人信息</span>
						<img src="/images/头像/20230614060011blob" alt="">
					</div>
					<div class="box-card-center">
						<!-- 头像👤 -->
						<div class="text-center">
							<userAvatar :user="user" />
						</div>
						<ul class="list-group list-group-striped">
							<li class="list-group-item">
								<svg-icon icon-class="user" style="margin-right:10px;" />用户名称
								<div class="pull-right">{{ user.p_PersonName }}</div>
							</li>
							<li class="list-group-item">
								<svg-icon icon-class="tree" style="margin-right:10px;" />工号
								<div class="pull-right">{{ user.p_IDCard }}</div>
							</li>
							<li class="list-group-item">
								<svg-icon icon-class="build" style="margin-right:10px;" />所属部门
								<div class="pull-right">{{ user.orgainName }}</div>
							</li>
							<li class="list-group-item">
								<svg-icon icon-class="date" style="margin-right:10px;" />入职日期
								<div class="pull-right">{{ user.p_EntryTime | timeSplit }}</div>
							</li>
							<li class="list-group-item">
								<div class="right">
									<svg-icon icon-class="date" style="margin-right:10px;width: 5%;" />
									<span style="width: 96%;">生日</span>
									<!-- <div class="pull-right">{{  user.p_BirthDay| timeSplit }}</div> -->
									<el-date-picker class="date-picker" size="mini" v-model="user.p_BirthDay" type="date"
										:clearable='false' placeholder="选择日期">
									</el-date-picker>
								</div>

							</li>
							<li class="list-group-item">
								<div class="right">
									<svg-icon icon-class="phone" style="margin-right:10px;width: 5%;" />
									<span style="width:96%;">联系电话</span>
									<el-input class="input" maxlength='11' v-model="user.p_Telphone" size="mini"
										oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
								</div>
							</li>
						</ul>

						<el-button type="primary" size="mini" @click="updateData"
							style="margin-top: 30px ;position: absolute;right: 0;">更新个人信息</el-button>
					</div>
				</el-card>
			</el-col>
			<el-col :span="8" :xs="24">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>修改密码</span>
					</div>
					<div class="box-card-pwd">
						<resetPwd />
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import {
	PersonDetail,
	PersonSaveData
} from '@/api/apis/personnelSettings'
import {
	getUserProfile
} from "@/api/system/user";
import {
	getInfo
} from '@/utils/auth.js'
export default {
	name: "Profile",
	components: {
		userAvatar,
		userInfo,
		resetPwd
	},
	data() {
		return {
			user: {},
			roleGroup: {},
			postGroup: {},
			activeTab: "resetPwd",
			loading: false
		};
	},
	mounted() {
		// this.getUser();
		this.getPersonData()
		this.loading = true
		setTimeout(() => {
			this.loading = false
		}, 1500)
	},
	filters: {
		timeSplit(val) {
			if (!val) {
				return
			} else {
				let time = val.split("T")[0]
				return time
			}
		}
	},
	methods: {
		getUser() {
			this.user = this.$store.state.user.info.personName ? this.$store.state.user.info : JSON.parse(getInfo())
			// getUserProfile().then(response => {
			//   this.user = response.data;
			//   this.roleGroup = response.roleGroup;
			//   this.postGroup = response.postGroup;
			// });
		},
		async getPersonData() {
			let obj = JSON.parse(getInfo())
			let res = await PersonDetail({
				id: obj.personID
			})
			this.user = res.data[0]
		},
		async updateData() {
			let dataMain = this.user
			let res = await PersonSaveData({ dataMain })
			if (res.code == 1) {
				this.$vmNews('更新资料成功', "success")
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.box {
	// display: flex;
}

.box-card {
	.box-card-center {
		position: relative;
		height: 415px;
	}

	.box-card-pwd {
		height: 415px;
	}

	.text-center {
		margin-bottom: 20px;
	}

	.list-group-item {
		font-size: 14px;
		color: #606266;
		font-family: "Helvetica Neue", Helvetica, "PingFang SC";

	}

	.right {

		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		::v-deep .el-input--mini .el-input__icon {
			position: absolute;
			text-align: right;
			top: -14px;
		}

		::v-deep .el-input--mini .el-input__inner {
			position: absolute;
			right: 0;
			top: -14px;
			width: 100%;
			text-align: right;
			padding: 0;
			font-size: 13px;
			color: #303133
		}
	}
}
</style>
