<template>
  <div>
    <h2>账号设置</h2>
    <el-card style="max-width:480px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="邮箱"><el-input v-model="form.email" /></el-form-item>
        <el-form-item label="手机号"><el-input v-model="form.phone" /></el-form-item>
        <el-button type="primary" @click="save" :loading="saving">保存</el-button>
      </el-form>
    </el-card>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { updateMe } from '@/api/auth'
import { ElMessage } from 'element-plus'

const auth = useAuthStore()
const form = ref({ email: '', phone: '' })
const saving = ref(false)

onMounted(() => {
  form.value.email = auth.user?.email || ''
  form.value.phone = auth.user?.phone || ''
})

async function save() {
  saving.value = true
  try {
    await updateMe({ email: form.value.email, phone: form.value.phone })
    ElMessage.success('保存成功')
  } catch { ElMessage.error('保存失败') }
  finally { saving.value = false }
}
</script>
