<template>
  <view class="address-manage">
    <view class="form-wrap">
      <view class="cu-form-group">
        <view class="title">{{ $t('addressManage.contact') }}</view>
        <input type="text" :placeholder="$t('addressManage.namePlaceholder')" v-model="addressData.name" />
      </view>
      <view class="cu-form-group">
        <view class="title">{{ $t('addressManage.mobile') }}</view>
        <input type="text" :placeholder="$t('addressManage.mobilePlaceholder')" v-model="addressData.mobile" />
      </view>
      <view class="cu-form-group">
        <view class="title">{{ $t('addressManage.region') }}</view>
        <input type="text" v-model="addressData.formatted_address" :placeholder="$t('addressManage.regionPlaceholder')" />
      </view>
      <view class="cu-form-group align-start">
        <view class="title">{{ $t('addressManage.detailAddress') }}</view>
        <textarea maxlength="-1" v-model="addressData.address" :placeholder="$t('addressManage.detailAddressPlaceholder')" />
      </view>
      <view class="cu-form-group margin-top">
        <view class="title">{{ $t('addressManage.setDefault') }}</view>
        <switch @change="switchChange" :class="addressData.default == 1 ? 'checked' : ''"
          :checked="addressData.default == 1" />
      </view>
    </view>

    <view class="padding-bj flex flex-direction margin-top">
      <button @tap="confirm" class="cu-btn wanl-bg-orange lg">{{ $t('orderConfirm.complete') }}</button>
    </view>
  </view>
</template>

<script>
import { postAddressSave } from '@/features/mall/mall-gateway'
export default {
  data() {
    return {
      manageType: 'add',
      addressData: {
        name: '',
        mobile: '',
        default: 0,
        country: '',
        province: '',
        city: '',
        citycode: '', // 城市代码
        district: '',
        adcode: '', // 地区代码
        formatted_address: '',
        address_name: '',
        address_full: '',
        address: '',
        location: ''
      },
    }
  },
  onLoad(option) {
    if (!this.$store.state.user.isLogin) {
      uni.showToast({ title: this.$t('common.pleaseLogin'), icon: 'none' })
      setTimeout(() => {
        uni.navigateTo({ url: '/pages/passport/signin' })
      }, 500)
      return
    }
    if (option.type === 'newadd') {
      this.addressData.default = 1
      this.manageType = 'add'
    } else if (option.type === 'edit') {
      this.manageType = 'edit'
      if (option.data) {
        this.addressData = JSON.parse(option.data)
      }
    } else {
      this.manageType = option.type || 'add'
    }
    uni.setNavigationBarTitle({ title: this.manageType === 'edit' ? this.$t('addressManage.editTitle') : this.$t('addressManage.addTitle') })
  },
  methods: {
    switchChange(e) {
      this.addressData.default = e.detail.value ? 1 : 0
    },
    async confirm() {
      let data = this.addressData
      if (!data.name) {
        uni.showToast({ title: this.$t('addressManage.nameRequired'), icon: 'none' })
        return
      }
      if (!data.mobile) {
        uni.showToast({ title: this.$t('addressManage.mobileRequired'), icon: 'none' })
        return
      }
      if (!data.formatted_address) {
        uni.showToast({ title: this.$t('addressManage.regionRequired'), icon: 'none' })
        return
      }
      if (!data.address) {
        uni.showToast({ title: this.$t('addressManage.addressRequired'), icon: 'none' })
        return
      }
      try {
        data.address_name = data.formatted_address
        data.address_full = (data.formatted_address || '') + (data.address || '')
        const resData = await postAddressSave({ data, type: this.manageType })
        uni.showToast({
          title: this.$t('addressManage.saveSuccess', [this.manageType === 'edit' ? '更新' : '添加']),
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack({ delta: 1 })
          setTimeout(() => {
            let newAddressId = null
            if (resData && typeof resData === 'object') {
              newAddressId = resData.id || null
            }
          }, 100)
        }, 500)
      } catch (e) {
        const message = e && e.message ? e.message : this.$t('addressManage.operationFailed')
        uni.showToast({ title: message, icon: 'none' })
      }
    },
  }
}
</script>

<style scoped>
.address-manage {
  min-height: 100vh;
  background: #fff;
}

.form-wrap {
  padding: 0 10rpx;
}

.cu-form-group {
  padding: 0 25rpx;
  min-height: 100rpx;
}

.cu-form-group .title {
  min-width: calc(4em + 15px);
  font-size: 28rpx;
  color: #333;
}

.cu-form-group input,
.cu-form-group textarea {
  font-size: 28rpx;
}

.cu-form-group textarea {
  min-height: 160rpx;
}

.wanl-bg-orange {
  background: linear-gradient(135deg, #ff6b35, #ff3d2e) !important;
  color: #fff !important;
}

.cu-btn.lg {
  font-size: 32rpx;
  height: 86rpx;
}
</style>
