<!--
  @description: 添加邮寄地址弹框
  @Modifier：lcj
  @date：  2019/10/09-10:00
-->
<template>
  <div>
    <el-dialog
      :visible.sync="childenData.dialog"
      :close-on-click-modal="false"
      :title="childenData.type==='00' ? '编辑地址' : '新增地址'"
      modal-append-to-body
      append-to-body
      width="900px"
      custom-class="shop_mall_dialog"
    >
      <el-form
        ref="addAddressForm"
        :label-position="labelPosition"
        :model="adddressobj"
        :rules="rules"
        label-width="110px"
        class="shop_mall_form"
        style="padding:0 20px"
      >
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="收货人姓名" prop="receiverName">
              <gx-input
                v-model.trim="adddressobj.receiverName"
                gx-maxlength="varchar15"
                placeholder="请输入收货人姓名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <gx-input
                v-model.trim="adddressobj.email"
                gx-maxlength="varchar100"
                placeholder="请输入邮箱"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phoneNumber">
              <gx-input
                v-model.trim="adddressobj.phoneNumber"
                gx-maxlength="varchar20"
                placeholder="请输入联系电话"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div>
              <el-form-item label="固定电话">
                <gx-input
                  v-model.trim="adddressobj.telPhone"
                  gx-maxlength="varchar20"
                  placeholder="请输入固定电话"
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item ref="address" label="所在地区" prop="addressName">
              <cascader :region-text="adddressobj.addressName" :is-check-strictly="false" @regionData="regionData" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="addressDetail">
              <gx-input
                v-model.trim="adddressobj.addressDetail"
                gx-maxlength="varchar100"
                placeholder="请输入具体地址，不需要重复填写省/市/县"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="邮政编码" prop="postalcode">
              <gx-input
                v-model.trim="adddressobj.postalcode"
                gx-maxlength="varchar6"
                placeholder="请输入邮政编码"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="默认地址">
              <el-checkbox v-model="adddressobj.status">
                是
              </el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doneAddClickBtn('addAddressForm')">保 存</el-button>
        <el-button @click="childenData.dialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cascader from '@comp/common/cascader'// 地区三级联动
import { phone, email, characters1_auto, linkerName, validateInput, checkCode } from '@/assets/js/validate'
import {
  addAdress,
  getMailingAddressinfo,
  updateAdress
} from '@/api/shoppingmall/mailingaddress'
export default {
  name: 'AddressAdd',
  components: {
    cascader // 地区三级联动
  },
  props: {
    childenData: {
      type: Object,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      labelPosition: 'left',
      projectAreaName: '',
      adddressobj: {
        addressName: '', // 所在地区
        id: '',
        receiverName: '',
        phoneNumber: '',
        telPhone: '',
        addressDetail: '',
        postalcode: '',
        status: false,
        provinceName: '',
        provinceCode: '',
        cityName: '',
        cityCode: '',
        areaName: '',
        areaCode: '',
        email: ''
      },
      rules: {
        receiverName: [{ required: true, validator: linkerName, trigger: 'blur' }],
        phoneNumber: [{ required: true, validator: phone, message: '手机号码格式不正确', trigger: 'blur' }],
        email: [{ required: true, validator: email, trigger: 'blur' }],
        addressName: [{ required: true, validator: validateInput, trigger: 'blur' }],
        postalcode: [{ required: true, validator: checkCode, trigger: 'blur' }],
        addressDetail: [{ required: true, validator: characters1_auto, trigger: 'blur' }]
      }
    }
  },
  mounted() {
    if (this.childenData.type === '00') {
      getMailingAddressinfo(this.childenData.id)
        .then(res => {
          if (res.header.ret === '0') {
            if (res.data.status === '00') {
              res.data.status = true
            }
            this.adddressobj = res.data
            // 拼装所在地区
            if (this.adddressobj.areaName) {
              this.adddressobj.addressName = this.adddressobj.provinceName + ',' + this.adddressobj.cityName + ',' + this.adddressobj.areaName
            } else if (this.adddressobj.cityName) {
              this.adddressobj.addressName = this.adddressobj.provinceName + ',' + this.adddressobj.cityName
            } else if (this.adddressobj.provinceName) {
              this.adddressobj.addressName = this.adddressobj.provinceName
            }
          }
        })
        .catch(err => {
          throw new Error('修改邮寄地址失败' + err)
        })
    }
  },
  methods: {
    // 所在地区级联选择
    regionData(regionName, location) {
      this.adddressobj.addressName = regionName
      this.adddressobj.provinceCode = location[0]
      if (location[1]) {
        this.adddressobj.cityCode = location[1]
      } else {
        this.adddressobj.cityCode = ''
      }
      if (location[2]) {
        this.adddressobj.areaCode = location[2]
      } else {
        this.adddressobj.areaCode = ''
      }
    },
    doneAddClickBtn(addAddressForm) {
      this.$refs[addAddressForm].validate(valid => {
        if (valid) {
          if (this.childenData.type === '01') {
            if (this.adddressobj.addressName) {
              // 状态
              if (this.adddressobj.status) {
                this.adddressobj.status = '00'
              } else {
                this.adddressobj.status = ''
              }
              // 是否是三级
              let location = []
              if (this.adddressobj.addressName.indexOf(',') !== -1) {
                location = this.adddressobj.addressName.split(',')
              } else {
                location = [this.adddressobj.addressName]
              }
              // 保存省市县的名称
              this.adddressobj.provinceName = location[0]
              if (location[1]) {
                this.adddressobj.cityName = location[1]
              } else {
                this.adddressobj.cityName = ''
              }
              if (location[2]) {
                this.adddressobj.areaName = location[2]
              } else {
                this.adddressobj.areaName = ''
              }
              const addressParams = JSON.parse(JSON.stringify(this.adddressobj))
              delete addressParams.addressName
              addAdress(addressParams)
                .then(res => {
                  if (res.header.ret === '0') {
                    // this.$emit('add')
                    this.$message({
                      message: '添加地址成功',
                      type: 'success'
                    })
                    this.childenData.dialog = false
                    // this.reload()
                    this.$emit('saveSuccess', true)
                    this.$emit('updateList')
                  }
                })
                .catch(err => {
                  throw new Error('添加地址失败' + err)
                })
            }
          } else {
            if (this.adddressobj.addressName) {
              // 是否是三级
              let location = []
              if (this.adddressobj.addressName.indexOf(',') !== -1) {
                location = this.adddressobj.addressName.split(',')
              } else {
                location = [this.adddressobj.addressName]
              }
              // 保存省市县的名称
              this.adddressobj.provinceName = location[0]
              if (location[1]) {
                this.adddressobj.cityName = location[1]
              } else {
                this.adddressobj.cityName = ''
              }
              if (location[2]) {
                this.adddressobj.areaName = location[2]
              } else {
                this.adddressobj.areaName = ''
              }
            }
            if (this.adddressobj.status) {
              this.adddressobj.status = '00'
            } else {
              this.adddressobj.status = ''
            }
            const addressParams = JSON.parse(JSON.stringify(this.adddressobj))
            delete addressParams.addressName
            updateAdress(addressParams)
              .then(res => {
                // this.$emit('update')
                this.$message({
                  message: '修改地址成功',
                  type: 'success'
                })
                this.childenData.dialog = false
                // this.reload()
                this.$emit('saveSuccess', true)
                this.$emit('updateList')
              }).catch(err => {
                throw new Error('修改邮寄地址失败' + err)
              })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>
