<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-button type="primary" @click="save(ruleFormRef)">保存</el-button>
			<el-button type="danger" @click="modifyPassword">修改密码</el-button>
		</el-card>
		<el-card :body-style="cardBodyStyle">

			<el-form :model="user" label-width="80px" label-position="right" ref="ruleFormRef" :rules="rules">
				<el-form-item label="用户编码" prop="userCode">
					<el-input v-model="user.userCode" style="width: 200px;" disabled></el-input>
				</el-form-item>
				<el-form-item label="用户名" prop="userName">
					<el-input v-model="user.userName" style="width: 200px;" disabled></el-input>
				</el-form-item>
				<el-form-item label="用户姓名" prop="userDesc">
					<el-input v-model="user.userDesc" style="width: 200px;" disabled></el-input>
				</el-form-item>
        <el-form-item label="OA账号">
          <el-input v-model="user.oaUserCode" style="width: 200px;"></el-input>
        </el-form-item>
				<el-form-item label="身份证号">
					<el-input v-model="user.idCard" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="user.phone" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="E-mail">
					<el-input v-model="user.email" style="width: 200px;"></el-input>
				</el-form-item>

			</el-form>
		</el-card>


		<PopupPassword ref="PopupPasswordRef"></PopupPassword>
	</div>
</template>


<script setup>
	import PopupPassword from './password.vue'

	const PopupPasswordRef = ref(null)
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance,
		nextTick,
		watch
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)



	import {
		checkPasswordRule,
		level
	} from '@/tools/CheckPassword'
	// 强度条颜色
	const barColor = ref('')
	// 强度条长度
	const width = ref('')
	// 强度条说明
	const strength = ref('')
	const passwordNew = ref('')
	const passwordConfirm = ref('')


	onMounted(() => {
		getUserInfo()
	})

	const getUserInfo = () => {
		var url = 'framework/SysUser/queryByPK'
		var param = {
			id: localStorage.getItem('userId')
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				user.value = response.data.data
				user.value.password = ''
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}


	const user = ref({
		id: '',
		adminFlag: '0'
	})


	const ruleFormRef = ref()
	const save = (ruleFormRef) => {
		ruleFormRef.validate((valid, fields) => {
			if (valid) {
				var url = 'framework/SysUser/saveUser'
				var param = {
					json: JSON.stringify(user.value)
				}
				proxy.$axios.get(url, param).then(response => {
					if (response.data.code == '0') {
						ElMessage.success('保存成功！' + response.data.msg)
						getUserInfo()
					} else {
						ElMessage.error('操作失败！' + response.data.msg)
					}
				})
			} else {
				console.log('error submit!', fields)
			}
		})
	}


	const modifyPassword = () => {
		PopupPasswordRef.value.open()
	}
</script>

<style>
	.strength {
		font-size: 13px;
		color: #271E25;
		position: relative;
		top: 0px;
		left: 0;
		transition: 0.5s all ease;
	}

	.bar {
		/* width: 400px; */
		height: 3px;
		background: red;
		transition: 0.5s all ease;
		max-width: 200px;
		margin: 0px 2px 2px 2px;
		position: absolute;
	}
</style>