<template>
  <el-header>
    <Header />
  </el-header>
  <div class="profile-list-container">
    <div class="profile-content">
      <!-- 用户资料表单 -->
      <el-card class="profile-card" shadow="hover">
        <div class="profile-header">
          <!-- 头像 -->
          <el-avatar
            style="width: 80px; height: 80px;"
            :src="avatarUrl"
            class="avatar"
            @click="changeAvatar"
          />
          <div class="profile-info">
            <el-form ref="profileForm" :model="profileInfo" label-width="80px">
              <el-form-item label="用户名">
                <el-input v-model="profileInfo.name" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="profileInfo.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <el-button type="danger" @click="logout">退出登录</el-button>
        <!-- 用户详细信息表单 -->
        <div class="profile-details">
          <el-form ref="profileDetailsForm" :model="profileInfo" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="手机号">
                  <el-input v-model="profileInfo.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别">
                  <el-select v-model="profileInfo.gender" placeholder="请选择性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="出生日期">
                  <el-date-picker v-model="profileInfo.birthday" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地址">
                  <el-input v-model="profileInfo.address" placeholder="请输入地址"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>

      <!-- 地址管理表单 -->
      <el-card class="address-card" shadow="hover">
        <h3>地址管理</h3>
        <el-button type="primary" @click="addAddress">添加地址</el-button>
        <!-- 地址表单 -->
        <el-form :model="addresses" label-width="80px">
          <div v-for="(address, index) in addresses" :key="address.id" class="address-item">
            <el-form-item label="收货人" :prop="'name' + index">
              <el-input v-model="address.name" placeholder="请输入收货人姓名"></el-input>
            </el-form-item>
            <el-form-item label="地址" :prop="'address' + index">
              <el-input v-model="address.address" placeholder="请输入收货地址"></el-input>
            </el-form-item>
            <el-form-item label="电话" :prop="'phone' + index">
              <el-input v-model="address.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="text" @click="editAddress(index)">保存</el-button>
              <el-button type="text" @click="deleteAddress(address.id)">删除</el-button>
              <el-button type="text" @click="copyAddress(address)">复制</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { profileAPI } from '@/api'
import type { UserProfile, Address } from '@/types/api'

const profileInfo = ref<UserProfile>({
  name: '',
  email: '',
  phone: '',
  gender: '',
  birthday: '',
  address: '',
})

const addresses = ref<Address[]>([])

// 获取用户信息
const getUserInfo = async () => {
  try {
    const response = await profileAPI.getUserProfile()
    profileInfo.value = response.data
  } catch (error) {
    ElMessage.error('获取用户信息失败')
  }
}

// 更新头像
const changeAvatar = async (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0]
  if (file) {
    const formData = new FormData()
    formData.append('avatar', file)
    try {
      await profileAPI.updateAvatar(formData)
      ElMessage.success('头像更新成功')
    } catch (error) {
      ElMessage.error('头像更新失败')
    }
  }
}

// 获取地址列表
const getAddresses = async () => {
  try {
    const response = await profileAPI.getAddresses()
    addresses.value = response.data
  } catch (error) {
    ElMessage.error('获取地址列表失败')
  }
}

// 添加地址
const addAddress = async () => {
  const newAddress = { name: '', address: '', phone: '' }
  try {
    const response = await profileAPI.addAddress(newAddress)
    addresses.value.push(response.data)
    ElMessage.success('地址添加成功')
  } catch (error) {
    ElMessage.error('地址添加失败')
  }
}

// 编辑地址
const editAddress = async (index: number) => {
  try {
    const address = addresses.value[index]
    await profileAPI.updateAddress(address.id, address)
    ElMessage.success('地址更新成功')
  } catch (error) {
    ElMessage.error('地址更新失败')
  }
}

// 删除地址
const deleteAddress = async (id: number) => {
  try {
    await profileAPI.deleteAddress(id)
    addresses.value = addresses.value.filter(addr => addr.id !== id)
    ElMessage.success('地址删除成功')
  } catch (error) {
    ElMessage.error('地址删除失败')
  }
}

onMounted(() => {
  getUserInfo()
  getAddresses()
})

// ... 其他代码保持不变 ...
</script>
<style scoped>
.profile-list-container {
  position: fixed;
  top: 60px;
  right: 0;
  width: calc(100% - 220px);
  height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

.profile-content {
  max-width: 1000px;
  margin: 20px auto;
}

.profile-card {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 8px;
}

.profile-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.avatar {
  margin-right: 20px;
  cursor: pointer;
}

.profile-info {
  flex-grow: 1;
}

.profile-details {
  margin-top: 20px;
}

.address-card {
  background-color: #fff;
  border-radius: 8px;
  margin-top: 20px;
}

.address-item {
  border-bottom: 1px solid #eee;
  padding: 20px 0;
}

.address-item:last-child {
  border-bottom: none;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .profile-list-container {
    width: calc(100% - 64px);
  }
  
  .profile-content {
    padding: 10px;
  }
  
  .el-form-item {
    margin-bottom: 15px;
  }
}

/* Element Plus 样式覆盖 */
:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-button--text) {
  padding: 0 10px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-input__inner) {
  border-radius: 4px;
}
</style>
