<template>
  <page-header-wrapper
    :title="addressId != ''?'编辑收货地址':'新增收货地址'"
  >
    <a-card
      :bordered="false"
    >
      <a-form
        ref="form"
        v-bind="formItemLayout"
        :form="form"
        @submit="handleSubmit"
      >
        <a-form-item label="收件人姓名">
          <a-input
            v-decorator="[
              'name',
              {
                rules: [
                  { required: true, message: '请输入收件人姓名!', type: 'string' },
                ]
              }
            ]"
            placeholder="请输入收件人姓名"
          />
        </a-form-item>

        <a-form-item label="收件人电话">
          <a-input
            v-decorator="[
              'mobile',
              {
                rules: [
                  { required: true, message: '请输入收件人电话!', type: 'string' },
                ]
              }
            ]"
            placeholder="请输入收件人电话"
          />
        </a-form-item>

        <!-- 省市区选择器 -->
        <a-form-item label="省市区">
          <area-select
            @change="selectArea"
            :default-value="defaultArea"
          />
        </a-form-item>

        <a-form-item label="详细地址">
          <a-textarea
            v-decorator="[
              'address',
              {
                rules: [
                  { required: true, message: '请输入详细地址!', type: 'string' },
                ]
              }
            ]"
            :rows="4"
            placeholder="请输入详细地址"
          />
        </a-form-item>
        <!-- 是否显示默认 -->
        <a-form-item label="默认地址">
          <a-switch :checked="is_default" @change="onChange"/>
        </a-form-item>

        <a-form-item>
          <a-button :loading="loading" html-type="submit" type="primary">提交新增</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import {
  createAddr,
  getAddr,
  updateAddr
} from '@/api/address'
import areaSelect from '@/components/AddressSelect'

export default {
  name: 'AddressCreate',
  components: {
    areaSelect
  },
  data () {
    return {
      addressId: '',
      loading: false,
      formItemLayout: {
        labelCol: { span: 7 },
        wrapperCol: { span: 10 }
      },
      form: this.$form.createForm(this),
      is_default: false,
      content: '',
      checked: '', // 默认地址
      defaultArea: [] // 默认省市区
    }
  },
  // 页面激活的时候调用的
  activated () {
    this.form.resetFields()
    if (this.$route.params.addressId) {
      this.addressId = this.$route.params.addressId
      getAddr(this.addressId).then(res => {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            name: res.name,
            mobile: res.mobile,
            address: res.address
          })
          this.defaultArea = [
            res.province.code.substring(0, 2),
            res.city.code.substring(0, 4),
            res.district.code
          ]
          this.is_default = res.default
        })
      })
    }
  },
  // 页面离开keep-alive
  deactivated () {
    this.addressId = ''
    this.loading = false
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.loading = true
      this.form.validateFields((errors, values) => {
        if (!errors) {
          values['is_default'] = this.is_default
          values['province_id'] = this.defaultArea[0] + '0000'
          values['city_id'] = this.defaultArea[1] + '00'
          values['district_id'] = this.defaultArea[2]
          if (this.addressId) {
            updateAddr(this.addressId, values).then(res => {
              this.$notification['success']({
                message: '操作成功',
                description: '地址更新成功'
              })
              this.$router.back()
            }).catch(err => {
              this.$notification['error']({
                message: err.message
              })
            }).finally(() => {
              this.loading = false
            })
          } else {
            createAddr(values).then(res => {
              this.$notification['success']({
                message: '操作成功',
                description: '地址新增成功'
              })
              this.defaultArea = []
              this.is_default = false
              this.$router.back()
            }).catch(err => {
              this.$notification['error']({
                message: err.message
              })
            }).finally(() => {
              this.loading = false
            })
          }
        } else {
          this.loading = false
        }
      })
    },
    onChange (checked) {
      this.is_default = checked
    },
    // 选择地区之后的回调
    selectArea (selectedArea) {
      this.defaultArea = selectedArea
    }
  }
}
</script>

<style scoped>

</style>
