<template>
	<div class="head">
		<div class="head_l">
		</div>
		<span class="head-title">智能银行企业信用系统</span>
		<el-dropdown>
			<div class="head_r">
				<!--				<img :src="userStore().adminUserInfo.avatar" alt="头像" class="profile" />-->
				<div class="head_user">
					<!--					<div class="head_user_name">{{ userStore().userInfo.username }}</div>-->
					<div class="head_user_desc"> {{userStore().userInfo.role === 0 ? '管理员' : '普通用户'}} </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.form"
				label-position="top"
			>
				<el-form-item
					prop="old_password"
					label="原始密码"
					:rules="[
        {
          required: true,
          message: '原始密码不能为空',
          trigger: 'blur',
        },
      ]"
				>
					<el-input v-model="state.form.old_password" />
				</el-form-item>
				<el-form-item
					prop="new_password"
					label="新密码"
					:rules="[
        {
          required: true,
          message: '新密码不能为空',
          trigger: 'blur',
        },
      ]"
				>
					<el-input v-model="state.form.new_password" />
				</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 { adminRequest } from '~/composables/adminRequest'

const router = useRouter()
const drawer = ref(false)

// 明确userInfo类型，避免类型错误
interface UserInfo {
	username?: string;
	role?: number;
}
const state = reactive(<any>{
	form: {}
})

function userStore() {
	// 假设全局有userStore，返回类型加上userInfo类型声明
	return {
		isLogin: false,
		userInfo: {} as UserInfo
	}
}

/**
 * 退出登录
 */
const logout = () => {
	ElMessage.success('退出成功~')
	userStore().isLogin = false
	userStore().userInfo = {}
	router.push('/login')
}

/**
 * 修改密码
 * @param formEl
 */
const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			if (state.form.old_password !== state.form.new_password) {
				ElMessage.error('两次密码输入不一致')
				return
			}
			state.form.username = userStore().userInfo.username
			adminRequest.post('/change_password', state.form).then(() => {
				userStore().isLogin = false
				window.location.href = '/login'
				ElMessage.success('修改成功')
			})
		}
	})
}
</script>
<style scoped>
.head {
	width: 100%;
	height: 50px;
	background: linear-gradient(90deg, #2563eb 60%, #1e3a8a 100%);
	color: #fff;
	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;
			}
		}
	}
}
.head-title {
	flex: 1;
	text-align: center;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 2px;
}
</style>
