<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>个人中心</span>
        </div>
      </template>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="用户名">{{ userStore.userInfo?.username }}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{ userStore.userInfo?.realName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="员工类型">{{ employeeTypeLabel(userStore.userInfo?.employeeType) }}</el-descriptions-item>
        <el-descriptions-item label="用户类型">{{ userStore.userInfo?.userType === 'ROLE' ? '角色用户' : '系统用户' }}</el-descriptions-item>
      </el-descriptions>

      <el-divider />

      <h4>修改密码</h4>
      <el-form ref="pwdFormRef" :model="pwdForm" :rules="pwdRules" label-width="100px" style="max-width: 400px;">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="pwdForm.oldPassword" type="password" show-password placeholder="请输入原密码" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="pwdForm.newPassword" type="password" show-password placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="pwdForm.confirmPassword" type="password" show-password placeholder="请再次输入新密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitChangePassword">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useUserStore } from '@/stores/user-store'
import { changePassword } from '@/api/auth'
import { employeeTypeLabel } from '@/utils/format'

const userStore = useUserStore()

const pwdFormRef = ref<FormInstance>()
const pwdForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const pwdRules: FormRules = {
  oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
  newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
  confirmPassword: [{
    validator: (rule: any, value: any, callback: any) => {
      if (!value) {
        callback(new Error('请再次输入新密码'))
      } else if (value !== pwdForm.newPassword) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    },
    trigger: 'blur'
  }]
}

async function submitChangePassword() {
  const valid = await pwdFormRef.value?.validate().catch(() => false)
  if (!valid) return
  await changePassword(pwdForm.oldPassword, pwdForm.newPassword)
  ElMessage.success('密码修改成功，请重新登录')
  await userStore.logoutAction()
  window.location.href = '/login'
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
h4 {
  margin: 0 0 16px 0;
  font-size: 15px;
  color: #303133;
}
</style>
