<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores'
import { IdCard, PeopleSearch } from '@icon-park/vue-next'
import { formatDateTime } from '@/utils/format'
import { UserInfoService } from '@/api/user'
import DefaultImg from '@/assets/user-img.png'
import PhotoUpload from './components/PhotoUpload.vue'
import InfoEdit from './components/InfoEdit.vue'

// 初始化用户信息
const userStore = useUserStore()
const userInfo = ref({})
const init = () => {
  userInfo.value = { ...userStore.user }
}
init()

// 获取用户信息
const reset = async () => {
  const {
    data: { data }
  } = await UserInfoService(userInfo.value.id)
  userStore.setUser(data)
  init()
}

// 上传用户头像图片
const uploadRef = ref()
const uploadPhoto = () => {
  ElMessageBox.confirm('确认修改图片', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      uploadRef.value.open(
        userInfo.value.id,
        userInfo.value.isUpload,
        userInfo.value.avatar
      )
      reset()
    })
    .catch(() => {})
}

// 修改用户信息
const editRef = ref()
const updateInfo = () => {
  ElMessageBox.confirm('是否确认修改用户信息', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'info'
  })
    .then(() => {
      editRef.value.open(userInfo.value)
    })
    .catch(() => {})
}
</script>

<template>
  <page-container title="个人中心">
    <template #extra>
      <el-button type="primary" @click="reset" class="refresh-btn">
        <PeopleSearch
          theme="two-tone"
          size="24"
          class="icon-btn"
          :fill="['#333', '#7195fd']"
        />
        刷新
      </el-button>
    </template>

    <!-- 主内容区域 - 使用Flex布局 -->
    <div class="profile-container">
      <!-- 用户头像 - start -->
      <el-card class="avatar-card">
        <template #header>
          <div class="card-header">
            <span>用户头像</span>
          </div>
        </template>

        <div class="avatar-wrapper">
          <img
            :src="userInfo.isUpload == 0 ? DefaultImg : userInfo.avatar"
            alt="用户头像"
            class="avatar-img"
          />
        </div>
        <template #footer>
          <el-button type="primary" @click="uploadPhoto" class="upload-btn">
            上传图片
          </el-button>
        </template>
      </el-card>
      <!-- 用户头像 - end -->

      <!-- 个人信息 - start -->
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <idCard
              theme="two-tone"
              size="24"
              class="icon-btn"
              :fill="['#333', '#7195fd']"
            />
            <span> 个人信息</span>
          </div>
        </template>

        <div class="info-content">
          <el-collapse
            v-model="activeNames"
            @change="handleChange"
            class="info-collapse"
          >
            <el-collapse-item title="账号" name="1">
              <div class="info-item">
                {{ userInfo.account }}
              </div>
            </el-collapse-item>
            <el-collapse-item title="昵称" name="2">
              <div class="info-item">
                {{ userInfo.username }}
              </div>
            </el-collapse-item>
            <el-collapse-item title="注册时间" name="3">
              <div class="info-item">
                {{
                  userInfo.registerTime === null
                    ? '###'
                    : formatDateTime(userInfo.registerTime)
                }}
              </div>
            </el-collapse-item>
            <el-collapse-item title="联系电话" name="4">
              <div class="info-item">
                {{ userInfo.userPhone }}
              </div>
            </el-collapse-item>
            <el-collapse-item title="邮箱" name="5">
              <div class="info-item">
                {{ userInfo.email }}
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <template #footer>
          <el-button type="primary" @click="updateInfo" class="update-btn">
            修改用户信息
          </el-button>
        </template>
      </el-card>
      <!-- 个人信息 - end -->
    </div>
  </page-container>

  <!-- 头像上传 -->
  <PhotoUpload ref="uploadRef" @success="reset"></PhotoUpload>
  <!-- 用户信息修改 -->
  <InfoEdit ref="editRef" @success="reset"></InfoEdit>
</template>

<style scoped>
/* 全局容器样式 */
.profile-container {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
}

/* 卡片基础样式 */
.avatar-card,
.info-card {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  flex: 1;
}

.avatar-card:hover,
.info-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* 头像卡片样式 */
.avatar-wrapper {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}

.avatar-img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px rgba(113, 149, 253, 0.2);
}

/* 信息卡片样式 */
.info-content {
  padding: 1.5rem 0;
}

.info-item {
  font-size: 1.25rem;
  padding: 0.5rem 0;
  color: #333;
}

.info-collapse .el-collapse-item__header {
  font-weight: 500;
  color: #4a4a4a;
}

/* 按钮样式 */
.refresh-btn,
.upload-btn,
.update-btn {
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.refresh-btn:hover,
.upload-btn:hover,
.update-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(113, 149, 253, 0.3);
}

.icon-btn {
  margin-right: 8px;
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .profile-container {
    flex-direction: column;
  }

  .avatar-card,
  .info-card {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .avatar-img {
    width: 150px;
    height: 150px;
  }

  .info-item {
    font-size: 1.1rem;
  }
}
</style>
