<template>
  <div class="address-page">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="nav-left">
        <el-button 
          type="text" 
          @click="$router.go(-1)"
          class="back-btn"
        >
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
      </div>
      <div class="nav-center">
        <h1 class="nav-title">地址</h1>
      </div>
      <div class="nav-right">
        <el-button 
          type="primary" 
          @click="showAddDialog = true"
          class="add-btn"
        >
          +新增地址
        </el-button>
      </div>
    </nav>

    <div v-loading="loading" class="address-content">
      <!-- 地址列表为空 -->
      <div v-if="addresses.length === 0 && !loading" class="empty-address">
        <el-icon class="empty-icon"><Location /></el-icon>
        <p>暂无收货地址</p>
        <p class="empty-tip">点击右上角添加收货地址</p>
      </div>

      <!-- 地址列表 -->
      <div v-else class="address-list">
        <div 
          v-for="(address,index) in addresses" 
          :key="address.id" 
          class="address-item"
          :class="{ 'default-address': address.isDefault }"
        >
          <div class="address-info">
            <div class="address-header">
              <el-icon><Location /></el-icon>
              <div class="address-location">
                <div class="region-info">{{ address.province_name }} {{ address.city_name }} {{ address.district_name }}</div>
                <div class="detail-info">{{ address.detailAddress }}</div>
              </div>
              <el-tag v-if="address.isDefault" type="warning" size="small" class="default-tag">
                默认
              </el-tag>
            </div>
            <div class="address-detail">
              <span class="recipient-name">{{ address.recipientName }}</span>
              <span class="recipient-phone">{{ address.recipientPhone }}</span>
            </div>
          </div>
          
          <div class="address-actions">
            <el-button 
              type="text" 
              @click="editAddress(address)"
              class="edit-btn"
            >
              编辑
            </el-button>
            <el-button 
              type="text" 
              @click="deleteAddress(address.id)"
              class="delete-btn"
            >
              删除
            </el-button>
            <el-button 
              v-if="!address.isDefault"
              type="text" 
              @click="setDefaultAddress(index)"
              class="default-btn"
            >
              设为默认
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增/编辑地址对话框 -->
    <el-dialog
      v-model="showAddDialog"
      :title="editingAddress ? '编辑地址' : '新增地址'"
      width="90%"
      class="address-dialog"
    >
      <el-form
        ref="addressFormRef"
        :model="addressForm"
        :rules="addressRules"
        label-width="80px"
        class="address-form"
      >
        <el-form-item label="收货人" prop="recipientName">
          <el-input 
            v-model="addressForm.recipientName" 
            placeholder="请输入收货人姓名"
            maxlength="20"
          />
        </el-form-item>
        
        <el-form-item label="手机号" prop="recipientPhone">
          <el-input 
            v-model="addressForm.recipientPhone" 
            placeholder="请输入手机号"
            maxlength="11"
          />
        </el-form-item>
        
        <el-form-item label="省市区" prop="region">
          <el-cascader
            v-model="addressForm.region"
            :options="regionOptions"
            placeholder="请选择省市区"
            style="width: 100%"
            :props="{ expandTrigger: 'hover', value:'code' }"
            :show-all-levels="true"
            :collapse-tags="true"
            :max-collapse-tags="1"
            :teleported="false"
            popper-class="mobile-cascader-popper"
            @change="handleRegionChange"
          />
        </el-form-item>
        
        <el-form-item label="详细地址" prop="detailAddress">
          <el-input 
            v-model="addressForm.detailAddress" 
            type="textarea"
            :rows="3"
            placeholder="请输入详细地址"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
        
        <el-form-item>
          <el-checkbox v-model="addressForm.isDefault">
            设为默认地址
          </el-checkbox>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="saveAddress" :loading="saving">
            {{ editingAddress ? '保存' : '添加' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  ArrowLeft,
  Location
} from '@element-plus/icons-vue'
import api from '@/utils/api'

const router = useRouter()

// 响应式数据
const loading = ref(false)
const saving = ref(false)
const addresses = ref([])
const showAddDialog = ref(false)
const editingAddress = ref(null)
const addressFormRef = ref(null)
const addressList = ref([])

// 地址表单数据
const addressForm = reactive({
  recipientName: '',
  recipientPhone: '',
  region: [],
  province: '',
  city: '',
  district: '',
  detailAddress: '',
  isDefault: false
})

// 省市区选项数据（从API获取）
const regionOptions = ref([])

// 表单验证规则
const addressRules = {
  recipientName: [
    { required: true, message: '请输入收货人姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  recipientPhone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  region: [
    { required: true, message: '请选择省市区', trigger: 'change' }
  ],
  detailAddress: [
    { required: true, message: '请输入详细地址', trigger: 'blur' },
    { min: 5, max: 100, message: '详细地址长度在 5 到 100 个字符', trigger: 'blur' }
  ]
}

// 方法
const loadRegionOptions = async () => {
  try {
    // 获取所有省份
    const provincesResponse = await api.get('/regions/provinces')
    console.log('获取省份数据:', provincesResponse)
    if (!provincesResponse.data.success) {
      throw new Error(provincesResponse.data.message || '获取省份数据失败')
    }
    
    regionOptions.value= provincesResponse.data.data || []
    console.log('获取省份数据:', regionOptions.value);
    
  } catch (error) {
    console.error('获取省市区数据失败:', error)
    ElMessage.error(error.message || '获取省市区数据失败')
  
  }
}

const loadAddresses = async () => {
  try {
    loading.value = true
    const response = await api.get('/addresses')
    console.log('获取地址列表响应:', response)
    if (response.data.success) {
      // 根据接口文档转换数据格式
      addressList.value = response.data.data || []
      addresses.value = addressList.value.map(addr => ({
        id: addr.id,
        recipientName: addr.receiver_name,
        recipientPhone: addr.receiver_phone,
        province: addr.province_name,
        city: addr.city_name,
        district: addr.district_name,
        detailAddress: addr.detailed_address,
        isDefault: addr.is_default,
        labelName: addr.label_name,
        labelColor: addr.label_color,
        city_code:addr.city_code,
        province_code:addr.province_code,
        district_code:addr.district_code,
        ...addr
      }))
    } else {
      // 保留原有的测试数据作为回退
      addresses.value = [{
        id: 1,
        recipientName: '张三',
        recipientPhone: '11111111111',
        province: '浙江省',
        city: '宁波市',
        district: '鄞州区',
        detailAddress: '宁波外经合作大厦',
        isDefault: true
      },{
        id: 2,
        recipientName: '李四',
        recipientPhone: '22222222222',
        province: '浙江省',
        city: '宁波市',
        district: '鄞州区',
        detailAddress: '四明东路',
        isDefault: false
      }]
      throw new Error(response.data.message || '获取地址列表失败')
    }
  } catch (error) {
    ElMessage.error(error.message || '获取地址列表失败')
  } finally {
    loading.value = false
  }
}

const handleRegionChange = (value) => {
  console.log(value);
  
  if (value && value.length === 3) {
    addressForm.province = value[0]
    addressForm.city = value[1]
    addressForm.district = value[2]
  }
}


const editAddress = (address) => {
  editingAddress.value = address
  addressForm.recipientName = address.recipientName
  addressForm.recipientPhone = address.recipientPhone
  addressForm.region = [address.province, address.city, address.district]
  addressForm.province = address.province
  addressForm.city = address.city
  addressForm.district = address.district
  addressForm.detailAddress = address.detailAddress
  addressForm.isDefault = address.isDefault
  showAddDialog.value = true
}

const saveAddress = async () => {
  if (!addressFormRef.value) return
  
  try {
    await addressFormRef.value.validate()
    saving.value = true
    
    // 根据接口文档构建请求数据
    const addressData = {
      recipient_name: addressForm.recipientName,
      phone: addressForm.recipientPhone,
      province_code: addressForm.province,
      city_code: addressForm.city,
      district_code: addressForm.district,
      detailed_address: addressForm.detailAddress,
      is_default: addressForm.isDefault
    }
    
    let response
    if (editingAddress.value) {
      // 编辑地址
      response = await api.put(`/addresses/${editingAddress.value.id}`, addressData)
    } else {
      // 新增地址
      console.log('表单原始数据:', addressForm)
      response = await api.post('/addresses', addressData)
    }
    
    if (response.data.success) {
      ElMessage.success(editingAddress.value ? '地址更新成功' : '地址添加成功')
      showAddDialog.value = false
      resetForm()
      await loadAddresses()
    } else {
      throw new Error(response.data.message || '保存地址失败')
    }
  } catch (error) {
    if (error.message) {
      ElMessage.error(error.message)
    }
  } finally {
    saving.value = false
  }
}

const deleteAddress = async (addressId) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这个地址吗？',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const response = await api.delete(`/addresses/${addressId}`)
    console.log("删除id",addressId)
    if (response.data.success) {
      ElMessage.success('地址删除成功')
      await loadAddresses()
    } else {
      throw new Error(response.data.message || '删除地址失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(error.message || '删除地址失败')
    }
  }
}

const setDefaultAddress = async (addressId) => {
  console.log(addressId,addresses.value[addressId]);
  let addressDataTest = addresses.value[addressId]
  addressDataTest.isDefault = true
  const addressData = {
      recipient_name: addressDataTest.receiver_name,
      phone: addressDataTest.receiver_phone,
      province_code: addressDataTest.province,
      city_code: addressDataTest.city,
      district_code: addressDataTest.district,
      detailed_address: addressDataTest.detailAddress,
      is_default: addressDataTest.isDefault
  }
  console.log('addressDataTest',addressDataTest);
  console.log('addressData',addressData);
  try {
    const response = await api.put(`/addresses/${addressDataTest.id}`, addressData)
    if (response.data.success) {
      ElMessage.success('默认地址设置成功')
      await loadAddresses()
    } else {
      throw new Error(response.data.message || '设置默认地址失败')
    }
  } catch (error) {console.log(error)}
  return
  // 从addresses列表中找到对应的地址信息
  const getDefaultAddress = () => {
    for(add in addresses.value)
    {
      if(addresses.value[add].isDefault)
      {
        return addresses.value[add]
      }
    }
    return null
  }



  console.log('getDefaultAddress', getDefaultAddress)
  // const addressData = {
  //     recipient_name: addressList.value[0].receiver_name,
  //     phone: addressList.value[0].receiver_phone,
  //     province_code: addressList.value[0].province,
  //     city_code: addressList.value[0].city,
  //     district_code: addressList.value[0].district,
  //     detailed_address: targetAddress.detailAddress,
  //     is_default: true
  // }
  console.log('addresses', addresses.value)
  console.log('targetaddress', targetAddress)
  console.log('默认地址替换数据', addressData)
  try {
    const response = await api.put(`/addresses/${addressId}`, addressData)
    if (response.data.success) {
      ElMessage.success('默认地址设置成功')
      await loadAddresses()
    } else {
      throw new Error(response.data.message || '设置默认地址失败')
    }
  } catch (error) {console.log(error)}
}

const cancelEdit = () => {
  showAddDialog.value = false
  resetForm()
}

const resetForm = () => {
  editingAddress.value = null
  addressForm.recipientName = ''
  addressForm.recipientPhone = ''
  addressForm.region = []
  addressForm.province = ''
  addressForm.city = ''
  addressForm.district = ''
  addressForm.detailAddress = ''
  addressForm.isDefault = false
  
  if (addressFormRef.value) {
    addressFormRef.value.resetFields()
  }
}

// 生命周期
onMounted(() => {
  loadRegionOptions()
  loadAddresses()
})
</script>

<style scoped>
.address-page {
  min-height: 100vh;
  background: linear-gradient(to bottom, #72c9ffae, #f3f3f3);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-left, .nav-right {
  flex: 1;
}

.nav-right {
  display: flex;
  justify-content: flex-end;
}

.nav-center {
  flex: 2;
  text-align: center;
}

.nav-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: white;
}

.back-btn {
  color: white;
  font-size: 16px;
}

.add-btn {
  font-size: 14px;
  background-color: none;
  border-color: none;
}

.address-content {
  padding: 16px;
}

.empty-address {
  text-align: center;
  padding: 80px 20px;
  color: #999;
}

.empty-icon {
  font-size: 64px;
  color: #ddd;
  margin-bottom: 16px;
}

.empty-tip {
  font-size: 14px;
  margin-top: 8px;
}

.address-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.address-item {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.address-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.default-address {
  border: 2px solid #ffc640;
}

.address-info {
  margin-bottom: 12px;
  flex: 1;
}

.address-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.address-location {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.region-info {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}

.detail-info {
  font-size: 14px;
  color: #666;
  font-weight: normal;
}

.recipient-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.recipient-phone {
  font-size: 16px;
  color: #666;
}

.default-tag {
  font-size: 12px;
  margin-left: auto;
  align-self: flex-start;
}

.address-detail {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  margin-left: 0;
  justify-content: flex-end;
}

.address-actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.edit-btn {
  color: #409eff;
}

.delete-btn {
  color: #f56c6c;
}

.default-btn {
  color: #67c23a;
}

.address-dialog {
  border-radius: 8px;
}

.address-form {
  padding: 0 8px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 768px) {
  .address-item {
    padding: 12px;
  }
  
  .address-actions {
    gap: 12px;
  }
  
  .address-dialog {
    width: 95% !important;
  }
}

/* 移动端级联选择器样式优化 */
:deep(.mobile-cascader-popper) {
  max-width: calc(100vw - 32px) !important;
  left: 16px !important;
  right: 16px !important;
  transform: none !important;
}

:deep(.mobile-cascader-popper .el-cascader-panel) {
  max-width: 100% !important;
  overflow-x: auto;
  display: flex !important;
}

:deep(.mobile-cascader-popper .el-cascader-menu) {
  min-width: 120px !important;
  max-width: 150px !important;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  :deep(.mobile-cascader-popper) {
    max-width: calc(100vw - 20px) !important;
    left: 10px !important;
    right: 10px !important;
  }
  
  :deep(.mobile-cascader-popper .el-cascader-menu) {
    min-width: 100px !important;
    max-width: 120px !important;
    font-size: 14px;
  }
  
  :deep(.mobile-cascader-popper .el-cascader-menu__item) {
    padding: 8px 10px;
    line-height: 1.2;
    font-size: 14px;
  }
  
  .address-form :deep(.el-cascader) {
    font-size: 14px;
  }
  
  .address-form :deep(.el-cascader .el-input__inner) {
    font-size: 14px;
  }
}
</style>