<template>
  <div class="container">
    <n-card
      style="height: 100%; width: 19%; display: flex; flex-direction: column"
    >
      <div style="font-size: 20px">个人信息</div>
      <n-divider />
      <n-avatar
        round
        :size="48"
        style="background-color: #eee"
      />

      <div class="flex_between message_box">
        <div class="align_center">
          <Icon name="LineMdPerson"></Icon>
          <span class="ml_4">真实姓名</span>
        </div>
        <div>xxx</div>
      </div>

      <div class="flex_between message_box">
        <div class="align_center">
          <Icon name="PhGenderIntersexBold"></Icon>
          <span class="ml_4">用户性别</span>
        </div>
        <div>男</div>
      </div>
    </n-card>
    <n-card
      style="height: 100%; width: 80%; display: flex; flex-direction: column"
    >
      <n-tabs
        style="height: 90%"
        type="line"
        animated
      >
        <n-tab-pane
          name="基本资料"
          tab="基本资料"
        >
          基本资料
        </n-tab-pane>
        <n-tab-pane
          name="修改密码"
          tab="修改密码"
        >
          <div style="width: 50%">
            <FormPro
              labelWidth="100"
              ref="passwordForm"
              v-model:value="passwordValue"
              :form-item-options="formOptionsPassword"
            />
          </div>
        </n-tab-pane>
      </n-tabs>
      <n-divider />
      <div style="height: 10%; display: flex; justify-content: flex-end">
        <n-button
          type="tertiary"
          @click="close"
        >
          关闭
        </n-button>
        <n-button
          type="primary"
          style="margin-left: 10px"
          @click="changePassword"
        >
          确认
        </n-button>
      </div>
    </n-card>
  </div>
</template>

<script setup lang="tsx">
  import api from "@/axios";
  import { encryptStr } from "@/utils/rsaUtil";
  import { useRoute, useRouter } from "vue-router";
  const router = useRouter();
  const route = useRoute();
  import { FormPro, type FormItemOptions } from "@/components";
  import { type passwordInterface } from "./index";
  import { INDEX_ROUTER } from "@/config/constant";
  import { useTabsStore } from "@/stores/tabsStore";
  import { useMessage, type FormInst } from "naive-ui";
  import { useUserStore } from "@/stores/user";
  const message = useMessage();
  const passwordForm = ref<FormInst | null>(null);
  const formOptionsPassword = reactive<FormItemOptions<passwordInterface>>({
    oldPassword: {
      type: "input",
      label: "旧密码",
      required: true,
      componentsProps: {
        type: "password",
        showPasswordOn: "mousedown",
      },
    },
    newPassword: {
      type: "input",
      label: "新密码",
      required: true,
      componentsProps: {
        type: "password",
        showPasswordOn: "mousedown",
      },
    },
    confirmPassword: {
      type: "input",
      label: "确认密码",
      required: true,
      componentsProps: {
        type: "password",
        showPasswordOn: "mousedown",
      },
    },
  });
  const passwordDefaultValue: passwordInterface = {
    oldPassword: "",
    newPassword: "",
    confirmPassword: "",
  };
  const passwordValue = ref<passwordInterface>({
    oldPassword: "",
    newPassword: "",
    confirmPassword: "",
  });
  const resetPasswordValue = () => {
    passwordValue.value = { ...passwordDefaultValue };
  };
  const tabStore = useTabsStore();
  const userStore = useUserStore();
  const close = function () {
    tabStore.closeTab(route.fullPath);
    router.replace(INDEX_ROUTER.path);
  };
  const changePassword = async function () {
    const oldPassword = encryptStr(passwordValue.value.oldPassword);
    const newPassword = encryptStr(passwordValue.value.newPassword);
    const confirmPassword = encryptStr(passwordValue.value.confirmPassword);
    const submitParams = {
      oldPassword,
      newPassword,
      confirmPassword,
    };
    await passwordForm.value?.validate();
    const res = await api.get("/management/user/updatePassword", submitParams);
    userStore.setTokenInfo(res.data as TokenInfo);
    message.success("修改成功");
    resetPasswordValue();
    console.log(passwordValue.value);
  };
</script>

<style lang="scss" scoped>
  .container {
    height: 94%;
    display: flex;
    justify-content: space-between;
    padding: 4px;
  }
  .flex_between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .message_box {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
  }
  .align_center {
    display: flex;
    align-items: center;
  }
  .ml_4 {
    margin-left: 4px;
  }
</style>
