<script setup lang="ts">

import {onMounted, ref} from "vue";
import UserTagStyleFormatter from "@/plugin/formatter/UserTagStyleFormatter.ts";
import type {ILocalUserData} from "@/interface/page/user/ILocalUserData.ts";
import {userStore} from "@/stores/user.ts";
import MessageUtils from "@/utils/MessageUtils.ts";
import UserApi from "@/api/user.ts";
import type {AppServeResponse} from "@/interface/api/AppServeResponse.ts";
import {AppServeResponseCodeEnum} from "@/constant/enums/AppServeResponseCodeEnum.ts";
import StringUtils from "@/utils/StringUtils.ts";


const userTagStyleFormatter = new UserTagStyleFormatter(); // 表数据格式化
const userData = ref<ILocalUserData>({}); // 用户的数据
const userStoreInstance = userStore();

onMounted(() => {
  userData.value = {
    userId: userStoreInstance.getUserInfo().userId,
    userName: userStoreInstance.getUserInfo().userName
  }
});


// 保存信息
const save = () => {
  MessageUtils.confirmMessageBox(`确定修改自己的个人信息？`, "修改确认").then(() => {
    const loading = MessageUtils.loading('请稍后');
    userData.value.oldPwd = StringUtils.getPwdMd5(userData.value.oldPwd??"");
    userData.value.newPwd = StringUtils.getPwdMd5(userData.value.newPwd??"");
    UserApi.updateSelfUser(userData.value).then((res) => {
      const response = JSON.parse(JSON.stringify(res.data)) as AppServeResponse;
      if (response && response.code == AppServeResponseCodeEnum.SUCCESS) {
        MessageUtils.successMessage("修改成功");
      } else {
        MessageUtils.warningMessageBox(response.msg);
      }
    }).catch(() => {}).finally(()=>{
      userData.value.oldPwd = undefined;
      userData.value.newPwd = undefined;
      loading.close();
    })
  }).catch(() => {})
}

</script>

<template>
  <div style="margin-left: 10px;margin-top: 10px; width: calc(100vw - 280px);">
    <el-text type="primary" style="font-size: large; margin-bottom: 10px">个人信息修改：</el-text>
    <el-form :model="userData" label-position="left" label-width="100px" require-asterisk-position="right" style="width: 95%">
      <el-form-item label="用户ID:" required>
        <el-text type="success">{{userData.userId}}</el-text>
      </el-form-item>
      <el-form-item label="旧密码:" required>
        <el-input v-model="userData.oldPwd" placeholder="输入您的旧密码（必填，否则无法修改所有数据）" show-password></el-input>
      </el-form-item>
      <el-form-item label="用户名称:" required>
        <el-input v-model="userData.userName" placeholder="请填写用户名称"></el-input>
      </el-form-item>
      <el-form-item label="新密码:">
        <el-input v-model="userData.newPwd" placeholder="输入您的新密码" show-password></el-input>
      </el-form-item>
      <el-form-item label="性别:">
        <el-select v-model="userData.sex" placeholder="暂不支持修改性别" disabled>
          <el-option v-for="item in userTagStyleFormatter.userSexTagStyle" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="头像:">
        <el-input v-model="userData.photo" placeholder="点击上传头像（暂不支持）" disabled></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="save">保存信息</el-button>
  </div>
</template>

<style scoped>

</style>