<template>
  <div class="personal-info">
    <div class="info-container">
      <!-- 头像 -->
      <div class="avatar-container">
        <img v-if="currentUser.isAdmin" class="avatar" src="../assets/user/avatar.png" alt="User Avatar" />
        <img v-else class="avatar" src="../assets/user/user.png" alt="User Avatar" />
      </div>

      <!-- 用户信息 -->
      <div class="user-info">
        <p class="user-item"><strong>账户类型:</strong> {{ currentUser.isAdmin ? '管理员' : '普通用户' }}</p>
        
        <!-- 可编辑的昵称 -->
        <p class="user-item">
          <strong>昵称:</strong>
          <input v-model="currentUser.username" class="editable-input" type="text" />
        </p>
        
        <!-- 可编辑的个性签名 -->
        <p class="user-item">
          <strong>个性签名:</strong>
          <input v-model="currentUser.signature" class="editable-input" type="text" />
        </p>

        <!-- 手机号码 (仅普通用户显示) -->
        <p v-if="!currentUser.isAdmin" class="user-item">
          <strong>手机号码:</strong>
          <input v-model="currentUser.phone" class="editable-input" type="text" />
        </p>
        
        <!-- 可编辑的生日 -->
        <p class="user-item">
          <strong>生日:</strong>
          <input v-model="currentUser.birthday" class="editable-input" type="date" />
        </p>

        <p class="user-item">
          <el-button type="primary" @click="saveUser"  style="width: 100%;" v-if="!currentUser.isAdmin">保存</el-button>
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted ,reactive} from 'vue';
import { useUserStore } from '../stores/user';
import { IUserInfo } from '../model/model';

// 从Pinia中获取user store
const userStore = useUserStore();

const currentUser = reactive<IUserInfo>({
  isAdmin: false,
  nickname: '',
  signature: '',
  phone: '',
  birthday: '',
  username: '',
  password: ''
});

onMounted(() => {
  // 获取当前用户
  const user = userStore.getCurrentUser()
  currentUser.username = user.username || '';
  currentUser.nickname = user.nickname || '';
  currentUser.signature = user.signature || '';
  currentUser.phone = user.phone || '';
  currentUser.birthday = user.birthday || '';
  currentUser.isAdmin = user.isAdmin || false;
  currentUser.password = user.password || '';
  console.log("current = ", currentUser);
})

const saveUser = () => {
  // 假设 currentUser 是你正在编辑的用户信息
  userStore.updateUser(currentUser);  // 保存修改后的用户信息
  console.log('用户信息已更新:', currentUser);
  ElMessage.success("保存成功")
}
</script>

<style scoped>
/* 整体布局居中 */
.personal-info {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.info-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: left;
  width: 350px;
}

.avatar-container {
  text-align: center;
  margin-bottom: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.user-info {
  font-size: 16px;
  color: #333;
}

.user-item {
  font-size: 16px;
  margin-bottom: 10px;
}

.user-item strong {
  color: #555;
}

/* 样式修改：让输入框看起来更整洁 */
.editable-input {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}
</style>
