<template>
	<div class="head">
		<div class="head_l">
<!--			<img src="/icoimg.png" alt="收缩" />-->
		</div>
		<el-dropdown>
			<div class="head_r">
<!--				<img :src="userStore().adminUserInfo.avatar" alt="头像" class="profile" />-->
				<div class="head_user">
					<div class="head_user_name">{{ userStore().adminUserInfo.username }}</div>
					<div class="head_user_desc">管理员</div>
				</div>
			</div>
			<template #dropdown>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item @click="drawer = true" >个人中心</el-dropdown-item>
					<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>

		<el-drawer
			v-model="drawer"
			title="个人中心"
		>
			<el-form
				ref="formRef"
				:model="state.dynamicValidateForm"
				label-position="top"
			>
				<el-form-item
					prop="password"
					label="原始密码"
					:rules="[
        {
          required: true,
          message: '原始密码不能为空',
          trigger: 'blur',
        },
      ]"
				>
					<el-input v-model="state.dynamicValidateForm.password" />
				</el-form-item>

				<el-form-item
					prop="newPassword"
					label="新密码"
					:rules="[
        {
          required: true,
          message: '新密码不能为空',
          trigger: 'blur',
        },
      ]"
				>
					<el-input v-model="state.dynamicValidateForm.newPassword" />
				</el-form-item>
				<el-form-item>

					<el-button type="primary" @click="submitForm(formRef)">确定修改</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import type { FormInstance } from 'element-plus'
const formRef = ref<FormInstance>()
import { updatePasswordAdmin } from '~/api/user/adminUserApi'
const router = useRouter();
const drawer = ref(false)
const state = reactive({
	dynamicValidateForm:{}
})

/**
 * 退出登录
 */
const logout = () => {
	logoutAdmin().then(()=>{
		toast.success("退出成功~")
		router.push('/login');
	})
}

/**
 * 修改密码
 * @param formEl
 */
const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			updatePasswordAdmin(state.dynamicValidateForm).then(result => {

			})
		}
	})
}
</script>
<style scoped>
	.head{
		width: 100%;
		height: 50px;
		background: #fdfdfe;

		display: flex;
		align-items: center;
		justify-content: space-between;
		.head_l{
			width:40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.head_l img{
			width: 25px;
			height: 25px;
			cursor: pointer;
		}
		.head_r{
			display: flex;
			align-items: center;
			margin-right: 30px;
			.profile{
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background: #f6f6f6;
				color: #333333;
				font-size: 10px;
				margin-right: 10px;
			}
			.head_user{
				.head_user_name{
					margin-top: 10px;
					color: #333333;
					font-size: 14px;
					font-weight: 500;
				}
				.head_user_desc{
					color:#a7a7a7;
					font-size: 12px;
					text-align: center;
				}
			}
		}
	}
</style>
