<template>
  <div class="page-container">
    <div class="page-header">
      <PageTitle title="收货地址" />
      <el-button type="danger" link @click="handleAdd">
        <el-icon><Plus /></el-icon>新增收货地址
      </el-button>
    </div>

    <!-- 地址列表 -->
    <div class="address-list">
      <div v-for="(item, index) in addressList" :key="index" class="address-item">
        <div class="address-info">
          <div class="address-name">
            <span>{{ item.name }}</span>
            <el-tag v-if="item.isDefault" type="danger" size="small">默认地址</el-tag>
          </div>
          <div class="address-detail">{{ item.province }} {{ item.city }} {{ item.district }}{{ item.address }}</div>
          <div class="address-phone">{{ item.phone }}</div>
        </div>
        <div class="address-actions">
          <el-button type="primary" link @click="handleEdit(item)">编辑</el-button>
          <el-button type="danger" link @click="handleDelete(item)">删除</el-button>
          <el-button v-if="!item.isDefault" type="danger" link @click="handleSetDefault(item)">设为默认</el-button>
        </div>
      </div>
      <el-empty v-if="addressList.length === 0" description="暂无收货地址" />
    </div>

    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="550px">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="收货人" prop="name">
          <el-input v-model="form.name" placeholder="请输入收货人姓名" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="所在地区" prop="province">
          <el-row :gutter="10">
            <el-col :span="8"><el-select v-model="form.province" placeholder="省份" style="width: 100%"><el-option label="广东省" value="广东省" /><el-option label="北京市" value="北京市" /></el-select></el-col>
            <el-col :span="8"><el-select v-model="form.city" placeholder="城市" style="width: 100%"><el-option label="广州市" value="广州市" /><el-option label="深圳市" value="深圳市" /></el-select></el-col>
            <el-col :span="8"><el-select v-model="form.district" placeholder="区县" style="width: 100%"><el-option label="萝岗区" value="萝岗区" /><el-option label="天河区" value="天河区" /></el-select></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.address" type="textarea" :rows="2" placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="设为默认"><el-switch v-model="form.isDefault" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleSave">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { PageTitle } from '@/components'

const dialogVisible = ref(false)
const dialogTitle = ref('新增收货地址')
const formRef = ref()
const editingId = ref<number | null>(null)

const form = reactive({ name: '', phone: '', province: '', city: '', district: '', address: '', isDefault: false })
const rules = {
  name: [{ required: true, message: '请输入收货人姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
  province: [{ required: true, message: '请选择省份', trigger: 'change' }],
  address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
}

const addressList = ref([
  { id: 1, name: '中国南方电网有限公司', phone: '18062697722', province: '广东省', city: '广州市', district: '萝岗区', address: '科学城11号', isDefault: true },
  { id: 2, name: '中国南方电网有限公司', phone: '18062697722', province: '广东省', city: '广州市', district: '萝岗区', address: '科学城11号', isDefault: false },
  { id: 3, name: '中国南方电网有限公司', phone: '18062697722', province: '广东省', city: '广州市', district: '萝岗区', address: '科学城11号', isDefault: false }
])

const resetForm = () => { form.name = ''; form.phone = ''; form.province = ''; form.city = ''; form.district = ''; form.address = ''; form.isDefault = false; editingId.value = null }
const handleAdd = () => { resetForm(); dialogTitle.value = '新增收货地址'; dialogVisible.value = true }
const handleEdit = (item: any) => { editingId.value = item.id; form.name = item.name; form.phone = item.phone; form.province = item.province; form.city = item.city; form.district = item.district; form.address = item.address; form.isDefault = item.isDefault; dialogTitle.value = '编辑收货地址'; dialogVisible.value = true }
const handleSave = async () => { const valid = await formRef.value?.validate(); if (!valid) return; ElMessage.success(editingId.value ? '修改成功' : '新增成功'); dialogVisible.value = false }
const handleDelete = (item: any) => { ElMessageBox.confirm('确定要删除该收货地址吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { const index = addressList.value.findIndex(i => i.id === item.id); if (index > -1) addressList.value.splice(index, 1); ElMessage.success('删除成功') }) }
const handleSetDefault = (item: any) => { addressList.value.forEach(i => { i.isDefault = i.id === item.id }); ElMessage.success('设置成功') }
</script>

<style scoped lang="scss">
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; :deep(.page-title) { margin-bottom: 0; } }
.address-list { .address-item { display: flex; justify-content: space-between; align-items: center; padding: 20px; border: 1px solid #eee; border-radius: 4px; margin-bottom: 15px; &:last-child { margin-bottom: 0; } .address-info { .address-name { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: #333; margin-bottom: 8px; } .address-detail { font-size: 14px; color: #666; margin-bottom: 5px; } .address-phone { font-size: 14px; color: #666; } } .address-actions { display: flex; gap: 10px; } } }
</style>
