<template>
  <a-card :bordered="false" class="content-card">
    <template #title>个人信息</template>
    <a-form :model="profile" layout="vertical" style="max-width: 500px">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="账号">
            <a-input v-model="profile.username" disabled>
              <template #prefix><icon-user /></template>
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="角色">
            <a-input v-model="profile.role" disabled>
              <template #prefix><icon-safe /></template>
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="昵称">
        <a-input v-model="profile.nickname">
          <template #prefix><icon-relation /></template>
        </a-input>
      </a-form-item>
      <a-form-item label="手机号">
        <a-input v-model="profile.phone">
          <template #prefix><icon-phone /></template>
        </a-input>
      </a-form-item>
      <a-form-item label="地址">
        <a-input v-model="profile.address">
          <template #prefix><icon-location /></template>
        </a-input>
      </a-form-item>
      <a-button type="primary" @click="saveProfile">
        <template #icon><icon-check /></template>
        保存修改
      </a-button>
    </a-form>
  </a-card>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { api } from '../../api'
import { IconUser, IconSafe, IconRelation, IconPhone, IconLocation, IconCheck } from '@arco-design/web-vue/es/icon'

const profile = reactive({ username: '', role: '', nickname: '', phone: '', address: '' })

const loadProfile = async () => {
  const me = await api.me()
  profile.username = me.username
  profile.role = me.role
  profile.nickname = me.nickname || ''
  profile.phone = me.phone || ''
  profile.address = me.address || ''
}

const saveProfile = async () => {
  await api.updateMe({ nickname: profile.nickname, phone: profile.phone, address: profile.address })
  Message.success('已保存')
}

onMounted(() => {
  loadProfile()
})
</script>

<style scoped>
.content-card {
  border-radius: 12px;
}

:deep(.arco-btn-primary) {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  border-color: transparent;
}

:deep(.arco-card-header) {
  border-bottom: 1px solid #f0f0f0;
}
</style>
