<!--
 * @Date: 2025-03-24 13:04:21
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-24 13:46:15
 * @FilePath: /mlaj/src/views/profile/settings/UsernameSettingPage.vue
 * @Description: 修改用户名页面
-->
<template>
  <AppLayout title="">
    <div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen">
      <div class="px-4 py-6">
        <FrostedGlass class="rounded-xl overflow-hidden">
          <div class="p-4">
            <div class="space-y-4">
              <div class="mb-6">
                <label for="username" class="block text-sm font-medium text-gray-700 mb-2">新用户名</label>
                <input
                  v-model="username"
                  type="text"
                  id="username"
                  placeholder="请输入新的用户名"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
                />
              </div>
              <van-button
                @click="handleUsernameChange"
                type="primary"
                block
                round
              >
                保存修改
              </van-button>
            </div>
          </div>
        </FrostedGlass>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import AppLayout from '@/components/layout/AppLayout.vue';
import FrostedGlass from '@/components/ui/FrostedGlass.vue';
import { getUserInfoAPI, updateUserInfoAPI } from '@/api/users';

import { useTitle } from '@vueuse/core';

const $route = useRoute();
useTitle($route.meta.title);

// 用户名
const username = ref('');

// 获取用户信息
onMounted(async () => {
  try {
    const response = await getUserInfoAPI();
    if (response.data) {
      username.value = response.data.name;
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
});

// 处理用户名修改
const handleUsernameChange = async () => {
  if (!username.value) {
    alert('请输入新的用户名');
    return;
  }

  try {
    const response = await updateUserInfoAPI({ name: username.value });
    if (response.data) {
      alert('用户名修改成功');
    }
  } catch (error) {
    console.error('用户名修改失败:', error);
    alert('用户名修改失败，请重试');
  }
};
</script>