<script setup>
import {onMounted, ref} from 'vue';
import 'element-plus/dist/index.css';
import {useStore} from 'vuex';
import axios from "axios";
import {ElButton, ElMessage} from "element-plus";
import {useRouter} from 'vue-router';

const store = useStore();
const router = useRouter();

const nickname = ref('');
const phoneNumber = ref('');
const email = ref('');
const department = ref('');
const role = ref('');
const createdAt = ref('');

onMounted(async () => {
  try {
    // 从Vuex中获取JWT token
    const token = store.getters['authentication/token'];
    if (!token) {
      store.commit('authentication/logout');
      router.push('/login');
    }

    // 发送请求并附带token参数
    const response = await axios.get(`/api/userProfile?token=${token}`);

    if (response.status === 200) {
      const user = response.data;
      nickname.value = user.nickname;
      phoneNumber.value = user.phoneNumber;
      email.value = user.email;
      department.value = user.department;
      role.value = user.role;
      createdAt.value = user.createdAt;
    } else {
      ElMessage.error("获取用户信息失败，请重试");
    }
  } catch (error) {
    console.error('Error fetching user profile:', error);
    ElMessage.error("获取用户信息失败，请重试");
  }
});
</script>


<template>
  <div class="profile-container">
    <div class="profile-box">
      <h2>个人信息</h2>
      <div class="profile-image">
        <img src="@assets/avatar.jpg" alt="Profile Image"/>
      </div>
      <div class="profile-info">
        <div class="divider"></div>
        <div class="info-item">
          <span class="info-label">用户昵称：</span>
          <span class="info-value">{{ nickname }}</span>
        </div>
        <div class="divider"></div>
        <div class="info-item">
          <span class="info-label">手机号码：</span>
          <span class="info-value">{{ phoneNumber }}</span>
        </div>
        <div class="divider"></div>
        <div class="info-item">
          <span class="info-label">用户邮箱：</span>
          <span class="info-value">{{ email }}</span>
        </div>
        <div class="divider"></div>
        <div class="info-item">
          <span class="info-label">所属部门：</span>
          <span class="info-value">{{ department }}</span>
        </div>
        <div class="divider"></div>
        <div class="info-item">
          <span class="info-label">所属角色：</span>
          <span class="info-value">{{ role }}</span>
        </div>
        <div class="divider"></div>
        <div class="info-item">
          <span class="info-label">创建日期：</span>
          <span class="info-value">{{ createdAt }}</span>
        </div>
        <div class="divider"></div>
      </div>
      <ElButton type="text" @click="() => $router.push('/manageProfile')">修改信息</ElButton>
    </div>
  </div>
</template>

<style scoped>
.profile-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: white;
}

.profile-box {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 30%;
  max-width: 300px;
  text-align: center;
}

.profile-image img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.profile-info {
  text-align: left;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.info-label {
  font-weight: bold;
}

.info-value {
  color: #555;
}

.divider {
  height: 1px;
  background: #e0e0e0;
  margin: 0.5rem 0;
}
</style>
