<template>
  <view class="page-shell address-edit-page">
    <view class="page-blur"></view>
    <view class="page-blur-secondary"></view>
    <view class="page-blur-tertiary"></view>

    <view class="page-content subpage-content">
      <view class="subpage-nav">
        <view class="subpage-back" @tap="goBack">‹</view>
        <view class="subpage-title-wrap">
          <text class="subpage-title">{{ pageTitle }}</text>
          <text class="subpage-subtitle">以简洁的方式，保留你最常用的配送信息</text>
        </view>
      </view>

      <view class="subpage-card">
        <view class="form-item">
          <text class="form-label">收货人</text>
          <input v-model="form.ReceiverName" class="form-input" placeholder="请输入收货人姓名" placeholder-class="form-placeholder" />
        </view>
        <view class="form-item">
          <text class="form-label">手机号</text>
          <input v-model="form.ReceiverPhone" class="form-input" type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="form-placeholder" />
        </view>
        <view class="form-item">
          <text class="form-label">省</text>
          <input v-model="form.Province" class="form-input" placeholder="省份" placeholder-class="form-placeholder" />
        </view>
        <view class="form-item">
          <text class="form-label">市</text>
          <input v-model="form.City" class="form-input" placeholder="城市" placeholder-class="form-placeholder" />
        </view>
        <view class="form-item">
          <text class="form-label">区/县</text>
          <input v-model="form.District" class="form-input" placeholder="区/县" placeholder-class="form-placeholder" />
        </view>
        <view class="form-item">
          <text class="form-label">详细地址</text>
          <input v-model="form.DetailAddress" class="form-input" placeholder="街道、门牌号等" placeholder-class="form-placeholder" />
        </view>
        <view class="form-item no-border switch-row">
          <text class="form-label switch-label">设为默认地址</text>
          <switch :checked="form.IsDefault === 1" color="#33594b" @change="onDefaultChange" />
        </view>
      </view>

      <view class="cta-row">
        <view v-if="mode !== 'create'" class="secondary-button" @tap="removeAddress">删除</view>
        <view class="primary-button" @tap="saveAddress">保存地址</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getAddressList, createAddress, updateAddress, deleteAddress } from '@/api/mall'

export default {
  data() {
    return {
      mode: 'edit',
      id: '',
      form: {
        ReceiverName: '',
        ReceiverPhone: '',
        Province: '',
        City: '',
        District: '',
        DetailAddress: '',
        IsDefault: 0
      }
    }
  },
  computed: {
    pageTitle() {
      return this.mode === 'create' ? '新增地址' : '编辑地址'
    }
  },
  onLoad(options) {
    this.mode = options.mode || (options.id ? 'edit' : 'create')
    if (options.id) {
      this.id = options.id
      this.loadDetail()
    }
  },
  methods: {
    loadDetail() {
      getAddressList()
        .then((list) => {
          const item = (list || []).find(a => String(a.id) === String(this.id))
          if (item) {
            this.form = {
              ReceiverName: item.receiverName || '',
              ReceiverPhone: item.receiverPhone || '',
              Province: item.province || '',
              City: item.city || '',
              District: item.district || '',
              DetailAddress: item.detailAddress || '',
              IsDefault: item.isDefault === 1 ? 1 : 0
            }
          }
        })
        .catch(() => {})
    },
    onDefaultChange(e) {
      this.form.IsDefault = e.detail.value ? 1 : 0
    },
    validate() {
      if (!this.form.ReceiverName) {
        uni.showToast({ title: '请输入收货人', icon: 'none' })
        return false
      }
      if (!/^1\d{10}$/.test(this.form.ReceiverPhone)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return false
      }
      if (!this.form.DetailAddress) {
        uni.showToast({ title: '请输入详细地址', icon: 'none' })
        return false
      }
      return true
    },
    saveAddress() {
      if (!this.validate()) return
      const payload = { ...this.form }
      const req = this.mode === 'create'
        ? createAddress(payload)
        : updateAddress({ ...payload, Id: this.id })
      req
        .then(() => {
          uni.showToast({ title: '地址已保存', icon: 'none' })
          setTimeout(() => this.backToList(), 300)
        })
        .catch(() => {})
    },
    removeAddress() {
      uni.showModal({
        title: '删除地址',
        content: '确认删除该地址吗？',
        success: (res) => {
          if (!res.confirm) return
          deleteAddress(this.id)
            .then(() => {
              uni.showToast({ title: '地址已删除', icon: 'none' })
              setTimeout(() => this.backToList(), 300)
            })
            .catch(() => {})
        }
      })
    },
    backToList() {
      uni.navigateBack({ fail: () => uni.redirectTo({ url: '/packageProfile/address-list/address-list' }) })
    },
    goBack() {
      this.backToList()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';
@import '@/styles/subpage.scss';

.form-item {
  padding: 18rpx 0;
  border-bottom: 1rpx solid rgba(100, 140, 118, 0.08);
}

.form-item.no-border {
  border-bottom: 0;
}

.form-label {
  display: block;
  font-size: 22rpx;
  color: $text-tertiary;
  letter-spacing: 2rpx;
}

.form-input {
  margin-top: 14rpx;
  height: 60rpx;
  font-size: 30rpx;
  font-weight: 600;
  color: $text-primary;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.switch-label {
  margin-top: 0;
  font-size: 28rpx;
  font-weight: 600;
  color: $text-primary;
}
</style>
