<template>
  <div class="addresses-page">
    <BackNav />
    <div class="page-header">
      <el-button type="primary" @click="showAdd = true">{{ $t('address.addAddress') }}</el-button>
    </div>
    <div v-for="a in addresses" :key="a.id" class="address-card">
      <div class="address-info">
        <strong>{{ a.name }}</strong> {{ a.phone }}
        <p>{{ a.province }}{{ a.city }}{{ a.district }}{{ a.address }}</p>
      </div>
      <div class="address-actions">
        <el-tag v-if="a.is_default" type="success" size="small">默认</el-tag>
        <el-button v-else link size="small" @click="setDefault(a.id)">{{ $t('address.setDefault') }}</el-button>
        <el-button link type="danger" size="small" @click="deleteAddr(a.id)">{{ $t('common.delete') }}</el-button>
      </div>
    </div>
    <el-dialog v-model="showAdd" :title="$t('address.addAddress')" width="500px">
      <el-form :model="form" label-width="100px">
        <el-form-item :label="$t('address.name')"><el-input v-model="form.name" /></el-form-item>
        <el-form-item :label="$t('address.phone')"><el-input v-model="form.phone" /></el-form-item>
        <el-form-item :label="$t('address.province')"><el-input v-model="form.province" /></el-form-item>
        <el-form-item :label="$t('address.city')"><el-input v-model="form.city" /></el-form-item>
        <el-form-item :label="$t('address.district')"><el-input v-model="form.district" /></el-form-item>
        <el-form-item :label="$t('address.detail')"><el-input v-model="form.address" type="textarea" /></el-form-item>
        <el-form-item><el-switch v-model="form.is_default" active-text="默认地址" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAdd = false">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" @click="addAddress">{{ $t('common.save') }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { addressApi } from '../../api'
import BackNav from '../../components/BackNav.vue'

const addresses = ref<any[]>([])
const showAdd = ref(false)
const form = reactive({ name: '', phone: '', province: '', city: '', district: '', address: '', is_default: false })

async function fetchAddresses() {
  const res: any = await addressApi.list()
  addresses.value = res.data || []
}

async function addAddress() {
  await addressApi.create(form)
  ElMessage.success('地址已添加')
  showAdd.value = false
  Object.assign(form, { name: '', phone: '', province: '', city: '', district: '', address: '', is_default: false })
  await fetchAddresses()
}

async function setDefault(id: number) {
  await addressApi.setDefault(id)
  await fetchAddresses()
}

async function deleteAddr(id: number) {
  await addressApi.delete(id)
  ElMessage.success('地址已删除')
  await fetchAddresses()
}

onMounted(fetchAddresses)
</script>

<style scoped lang="scss">
.addresses-page { padding: 0; }
.page-header { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 24px; }
.address-card {
  display: flex; justify-content: space-between; align-items: center;
  background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 20px; margin-bottom: 12px;
}
.address-info strong { color: #fff; margin-right: 8px; }
.address-info p { color: rgba(255, 255, 255, 0.5); margin-top: 4px; font-size: 14px; }
.address-actions { display: flex; align-items: center; gap: 8px; }
</style>
