<template>
	<div v-loading="loading">
	
	
		<el-form   label-width="120px" style="border: 1px solid #e9e9e9; border-radius: 5px;margin-top: 8px;">
			<el-row style="padding: 20px;margin:10px ;">
				<el-col :span="16">
					基本信息
				</el-col>
			</el-row>
			<el-row style="padding: 20px;margin:10px ;">
				<el-col :span="16">
					<el-form-item label="头像">
						 <el-upload style="margin-left: 20px;"
						    class="avatar-uploader"
						    :action="upfileurl"
							:headers="headerObj"
						    :show-file-list="false"
						    :on-success="upLoadSuccess"
						  >
						    <img v-if="headImage" :src="headImage" class="avatar" />
						    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
						  </el-upload>
					</el-form-item>
					<el-form-item label="名称">
						<el-input size="large" v-model="userInfo.cn_name"   placeholder="名称"
							style="  margin: auto 20px;" />
					</el-form-item>
				</el-col>
				<el-col :span="8" style="display:flex;align-items:center;"><el-button type="primary" size="large"
						@click="saveInfo">保 存</el-button></el-col>
			</el-row>
			<el-row style="padding: 20px;margin:10px ;">
				<el-col :span="16">
					修改密码
				</el-col>
			</el-row>
			<el-row style="padding: 20px;margin:10px ;">
				<el-col :span="16">
					<el-form-item label="旧密码">
						<el-input size="large" v-model="oldpwd" type="password" placeholder="新密码"
							style="  margin: auto 20px;" />
					</el-form-item>
					<el-form-item label="新密码">
						<el-input size="large" v-model="newpwd" type="password" placeholder="新密码"
							style="  margin: auto 20px;" />
					</el-form-item>
					<el-form-item label="再次输入">
						<el-input size="large" v-model="renewpwd" type="password" placeholder="再次输入"
							style="  margin: auto 20px;" />
					</el-form-item>
				</el-col>
				<el-col :span="8" style="display:flex;align-items:center;"><el-button type="primary" size="large"
						@click="SetPwd">修 改</el-button></el-col>
			</el-row>

		</el-form>
	
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		Iphone, Refresh
	} from '@element-plus/icons-vue'
	import {
		adminChangePwd,UpFileUrl,ChangInfo,GetBaseAdminUserInfo
	} from '@/api/api.js'
	let loading = ref(false)
	
	let oldpwd = ref('')
	let newpwd = ref('')
	let renewpwd = ref('')
	let upfileurl=UpFileUrl()
	let headerObj={
        Authorization: 'Bearer ' + sessionStorage.getItem("token")
      }
	const SetPwd = () => {
		if (newpwd.value == renewpwd.value && renewpwd.value != '') {
			adminChangePwd({
				oldpwd: oldpwd.value,
				newpwd: newpwd.value
			}).then(res => {
				if (res.status == 'ok') {

					ElMessageBox.alert('密码修改成功,请重新登录', '提示', {
						// if you want to disable its autofocus
						// autofocus: false,
						confirmButtonText: 'OK',
						callback: () => {
							window.location.href = "./#/login"
						},
					})
				} else {
					ElMessage.error(res.msg)
				}
			})
		} else {
			ElMessage.error("两次密码不一致，请重新输入！")
		}
	}

	let headImage=ref('');
	//上传成功钩子
	const upLoadSuccess=(res)=>{
		headImage.value=import.meta.env.VITE_APP_FILE+res.data
		userInfo.value.img=res.data
	}
	//修改信息
	const saveInfo=()=>{
		ChangInfo({
			name:userInfo.value.cn_name,
			headimg:userInfo.value.img
		}).then(res => {
			if(res.status){
				ElMessage({
					message: '保存成功',
					type: 'success',
				})
			 
			}else{
				ElMessage.error(res.msg)
			}
		})
	}
	let userInfo=ref([]);
 
	
	onMounted(()=>{
		 
		userInfo.value=JSON.parse(sessionStorage.getItem('LoginUserInfo'))
		headImage.value=import.meta.env.VITE_APP_FILE+userInfo.value.img
	})

</script>

<style scoped>
 
	.erweima_tu {

		height: 310px;

		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
		text-align: center;
		color: coral;
	}

	.timeout {
		margin-top: 20%;
		text-align: center;
		color: coral;
		cursor: pointer;
	}

	.saoma_tishi {
		color: #7cba74;
		padding-top: 20%;
		font-size: 20px;
	}
	.avatar-uploader .avatar {
	  width: 178px;
	  height: 178px;
	  display: block;
	}
</style>

<style>
	.avatar-uploader .el-upload {
	  border: 1px dashed var(--el-border-color);
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  transition: var(--el-transition-duration-fast);
	}
	
	.avatar-uploader .el-upload:hover {
	  border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 50px;
	  height: 50px;
	  text-align: center;
	}
</style>