<template>
  <view class="address-page">
    <!-- 地址列表 -->
    <view class="address-list" v-if="list.length > 0">
      <view
        class="address-card"
        :class="{ 'is-default': item.defaultFlag == 1 }"
        v-for="item in list"
        :key="item.id"
      >
        <view class="address-content" @click="selectAddress(item)">
           <view class="default-tag" v-if="item.defaultFlag == 1">默认</view>
          <view class="address-region">
            {{ item.province }} {{ item.city }} {{ item.area }}
          </view>
          <view class="address-detail">
            {{ item.a }}
          </view>
          <view class="address-contact">
            <text class="name">{{ item.name }}</text>
            <text class="phone">{{ item.phone }}</text>
            <!-- <view class="default-tag" v-if="item.defaultFlag == 1">默认</view> -->
          </view>
        </view>

        <view class="address-actions">
          <view class="action-btn delete" @click="handleDelete(item)" v-if="item.defaultFlag != 1">删除</view>
          <view class="action-btn default" @click="handleSetDefault(item)" v-if="item.defaultFlag != 1">设为默认</view>
          <view class="action-btn edit" @click="handleEdit(item)">编辑</view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty" v-else>
      <image src="/static/nodata.png" mode="aspectFit" class="empty-icon" />
      <text class="empty-text">暂无收货地址</text>
    </view>

    <!-- 添加地址按钮 -->
    <view class="add-btn-wrap">
      <view class="add-btn" @click="goAddAddress">+ 添加新地址</view>
    </view>

    <!-- 地址编辑弹窗 -->
    <uni-popup ref="addressPopup" type="bottom" background-color="#fff">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{ isEdit ? '编辑地址' : '新增地址' }}</text>
          <text class="popup-close" @click="closePopup">×</text>
        </view>

        <view class="form-body">
          <view class="form-item">
            <text class="form-label">收货人</text>
            <input class="form-input" v-model="form.name" placeholder="请输入收货人姓名" />
          </view>

          <view class="form-item">
            <text class="form-label">手机号码</text>
            <input class="form-input" v-model="form.phone" placeholder="请输入手机号码" type="number" maxlength="11" />
          </view>

          <view class="form-item">
            <text class="form-label">省市区</text>
            <picker class="form-picker" mode="region" :value="region" @change="onRegionChange">
              <view class="picker-value">
                {{ region[0] || '请选择' }} {{ region[1] || '' }} {{ region[2] || '' }}
              </view>
            </picker>
          </view>

          <view class="form-item">
            <text class="form-label">详细地址</text>
            <textarea class="form-textarea" v-model="form.a" placeholder="请输入详细地址" maxlength="100" />
          </view>
        </view>

        <view class="popup-footer">
          <view class="cancel-btn" @click="closePopup">取消</view>
          <view class="submit-btn" @click="submitAddress">保存地址</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as api from '@/common/api.js';

const list = ref([]);
const addressPopup = ref(null);
const isEdit = ref(false);
const editId = ref(null);

const form = ref({
  name: '',
  phone: '',
  province: '',
  city: '',
  area: '',
  a: ''
});

const region = ref([]);

onMounted(() => {
  initData();
});

const initData = async () => {
  uni.showLoading({ title: '加载中' });
  try {
    const res = await api.getAddressList();
    if (res.rows) {
      list.value = res.rows;
    }
  } catch (e) {
    console.error('获取地址列表失败', e);
  } finally {
    uni.hideLoading();
  }
};

const selectAddress = (item) => {
  const pages = getCurrentPages();
  const prevPage = pages[pages.length - 2];
  if (prevPage) {
    prevPage.$vm.selectedAddress = item;
  }
  uni.navigateBack();
};

const handleDelete = async (item) => {
  uni.showModal({
    title: '提示',
    content: '确定删除该地址吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await api.postAddressDel(item.id);
          uni.showToast({ title: '删除成功', icon: 'success' });
          initData();
        } catch (e) {
          uni.showToast({ title: '删除失败', icon: 'none' });
        }
      }
    }
  });
};

const handleSetDefault = async (item) => {
  // 加一个二次确认弹窗
  uni.showModal({
    title: '提示',
    content: '确定要将该地址设为默认吗？',
    success: async (res) => {
      // 只有用户点了确认，才执行设为默认
      if (res.confirm) {
        try {
          await api.setDefault(item.id);
          uni.showToast({ title: '设置成功', icon: 'success' });
          initData(); // 刷新列表
        } catch (e) {
          uni.showToast({ title: '设置失败', icon: 'none' });
        }
      }
    }
  });
};

const handleEdit = (item) => {
  isEdit.value = true;
  editId.value = item.id;
  form.value = {
    name: item.name,
    phone: item.phone,
    province: item.province,
    city: item.city,
    area: item.area,
    a: item.a
  };
  region.value = [item.province, item.city, item.area];
  addressPopup.value.open();
};

const goAddAddress = () => {
  isEdit.value = false;
  editId.value = null;
  form.value = {
    name: '',
    phone: '',
    province: '',
    city: '',
    area: '',
    a: ''
  };
  region.value = [];
  addressPopup.value.open();
};

const onRegionChange = (e) => {
  region.value = e.detail.value;
};

const closePopup = () => {
  addressPopup.value.close();
};

const submitAddress = async () => {
  if (!form.value.name) {
    return uni.showToast({ title: '请输入收货人', icon: 'none' });
  }
  if (!form.value.phone) {
    return uni.showToast({ title: '请输入手机号', icon: 'none' });
  }
  if (!/^1[3-9]\d{9}$/.test(form.value.phone)) {
    return uni.showToast({ title: '手机号格式不正确', icon: 'none' });
  }
  if (region.value.length < 3) {
    return uni.showToast({ title: '请选择省市区', icon: 'none' });
  }
  if (!form.value.a) {
    return uni.showToast({ title: '请输入详细地址', icon: 'none' });
  }

  form.value.province = region.value[0];
  form.value.city = region.value[1];
  form.value.area = region.value[2];

  uni.showLoading({ title: '保存中' });
  try {
    if (isEdit.value) {
      form.value.id = editId.value;
      await api.editMyAddress(form.value);
    } else {
      await api.addMyAddress(form.value);
    }
    uni.showToast({ title: '保存成功', icon: 'success' });
    closePopup();
    initData();
  } catch (e) {
    uni.showToast({ title: '保存失败', icon: 'none' });
  } finally {
    uni.hideLoading();
  }
};
</script>

<style lang="scss" scoped>
.address-page {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20rpx;
  padding-bottom: 140rpx;
}

.address-list {
  .address-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

    // &.is-default {
    //   border-left: 6rpx solid #e4393c;
    // }

    .address-content {
      padding-bottom: 20rpx;
      border-bottom: 1rpx dashed #eee;
       position: relative; 
       .default-tag {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #FF755A, #F51722);
    color: #fff;
    font-size: 22rpx;
    padding: 4rpx 16rpx;
    border-radius: 0 12rpx 0 12rpx; // 右上角圆角匹配卡片
    line-height: 1.2;
  }
      .address-region {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 10rpx;
      }

      .address-detail {
        font-size: 30rpx;
        color: #333;
        font-weight: 500;
        margin-bottom: 16rpx;
        line-height: 1.5;
      }

      .address-contact {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 16rpx;

        .name, .phone {
          font-size: 26rpx;
          color: #999;
        }

        // .default-tag {
        //   background: linear-gradient(135deg, #FF755A, #F51722);
        //   color: #fff;
        //   font-size: 22rpx;
        //   padding: 4rpx 16rpx;
        //   border-radius: 20rpx;
        // }
      }
    }

    .address-actions {
      display: flex;
      justify-content: flex-end;
      gap: 30rpx;
      padding-top: 20rpx;

      .action-btn {
        font-size: 26rpx;
        color: #666;

        &.delete {
          color: #ff4d4f;
        }

        &.default {
          color: #e4393c;
        }

        &.edit {
          color: #1561cb;
        }
      }
    }
  }
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120rpx;

  .empty-icon {
    width: 240rpx;
    height: 240rpx;
    opacity: 0.5;
  }

  .empty-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999;
  }
}

.add-btn-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .add-btn {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: linear-gradient(135deg, #FF755A, #F51722);
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
    font-weight: 500;
  }
}

.popup-content {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;

  .popup-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #333;
  }

  .popup-close {
    font-size: 50rpx;
    color: #999;
    line-height: 1;
  }
}

.form-body {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx 30rpx;

  .form-item {
    margin-bottom: 30rpx;

    .form-label {
      display: block;
      font-size: 28rpx;
      color: #333;
      margin-bottom: 16rpx;
      font-weight: 500;
    }

    .form-input {
      height: 80rpx;
      padding: 0 20rpx;
      background: #f5f7fa;
      border-radius: 12rpx;
      font-size: 28rpx;
    }

    .form-picker {
      height: 80rpx;
      padding: 0 20rpx;
      background: #f5f7fa;
      border-radius: 12rpx;
      display: flex;
      align-items: center;

      .picker-value {
        font-size: 28rpx;
        color: #333;
      }
    }

    .form-textarea {
      width: 100%;
      height: 160rpx;
      padding: 20rpx;
      background: #f5f7fa;
      border-radius: 12rpx;
      font-size: 28rpx;
      box-sizing: border-box;
    }
  }
}

.popup-footer {
  display: flex;
  gap: 20rpx;
  padding: 20rpx 30rpx 40rpx;

  .cancel-btn, .submit-btn {
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    border-radius: 44rpx;
    font-size: 32rpx;
  }

  .cancel-btn {
    background: #f5f5f5;
    color: #666;
  }

  .submit-btn {
    background: linear-gradient(135deg, #FF755A, #F51722);
    color: #fff;
  }
}
</style>