<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>
          <view class="form-field">{{ form.name }}</view>
        </view>
        <view class="form-item">
          <text class="form-label">手机号</text>
          <view class="form-field">{{ form.phone }}</view>
        </view>
        <view class="form-item">
          <text class="form-label">地址标签</text>
          <view class="form-field">{{ form.tag }}</view>
        </view>
        <view class="form-item no-border">
          <text class="form-label">详细地址</text>
          <view class="form-field multiline">{{ form.full }}</view>
        </view>
      </view>

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

<script>
import { findAddressById } from '@/data/mock'

export default {
  data() {
    return {
      mode: 'edit',
      form: findAddressById(1)
    }
  },
  computed: {
    pageTitle() {
      return this.mode === 'create' ? '新增地址' : '编辑地址'
    }
  },
  onLoad(options) {
    this.mode = options.mode || 'edit'
    if (options.id) {
      this.form = findAddressById(options.id)
    } else if (this.mode === 'create') {
      this.form = {
        name: '林小姐',
        phone: '138****5628',
        tag: '新地址',
        full: '请填写收货地址'
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({ fail: () => uni.redirectTo({ url: '/pages/address-list/address-list' }) })
    },
    saveAddress() {
      uni.showToast({ title: '地址已保存', icon: 'none' })
      setTimeout(() => {
        uni.redirectTo({ url: '/pages/address-list/address-list' })
      }, 300)
    },
    removeAddress() {
      uni.showToast({ title: this.mode === 'create' ? '已取消新增' : '地址已删除', icon: 'none' })
      setTimeout(() => {
        uni.redirectTo({ url: '/pages/address-list/address-list' })
      }, 300)
    }
  }
}
</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-field {
  margin-top: 14rpx;
  font-size: 30rpx;
  font-weight: 600;
  color: $text-primary;
}

.form-field.multiline {
  line-height: 1.8;
}
</style>
