<!--
  @description: 添加邮寄地址弹框
  @Modifier：lcj
  @date：  2019/10/09-10:00
-->
<template>
  <div>
    <el-dialog
      :visible.sync="childenData.dialog"
      :close-on-click-modal="false"
      title="发票收件管理"
      modal-append-to-body
      append-to-body
      width="810px"
      custom-class="shop_mall_dialog"
    >
      <el-form
        ref="addAddressForm"
        :label-position="labelPosition"
        :model="adddressobj"
        :rules="rules"
        label-width="100px"
      >
        <el-row :gutter="0">
          <el-col :span="12">
            <div>
              <el-form-item label="收件人姓名" prop="mailingName">
                <el-input v-model="adddressobj.mailingName" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <el-form-item label="手机号码" prop="mailingPhone">
                <el-input v-model="adddressobj.mailingPhone" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="0">
          <el-col :span="12">
            <div>
              <el-form-item label="电话号码" prop="telPhone">
                <el-input v-model="adddressobj.telPhone" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <el-form-item label="邮编" prop="postalcode">
                <el-input v-model="adddressobj.postalcode" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="12">
            <div>
              <el-form-item ref="address" label="所在地区" prop="address">
                <el-cascader
                  ref="refHandle"
                  v-model="adddressobj.address"
                  :options="regionData"
                  style="width:100%;"
                  @change="addressChange"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <el-form-item label-width="10px">
                <el-input v-model="adddressobj.addressDetail" placeholder="请输入具体地址，不需要重复填写省/市/县" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="24">
            <div>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="adddressobj.email" />
              </el-form-item>
            </div>
          </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 { regionData, CodeToText, TextToCode } from 'element-china-area-data'
import { phone, checkCode, email } from '@/assets/js/validate'
import {
  editBilings,
  addBilings
} from '@/api/shoppingmall/order'
export default {
  name: 'AddressAdd',
  inject: ['reload'],
  props: {
    childenData: {
      type: Object,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      regionData: regionData,
      labelPosition: 'right',
      projectAreaName: '',
      adddressobj: {
        mailingName: '',
        address: [],
        telPhone: '',
        addressDetail: '',
        postalcode: '',
        mailingPhone: '',
        provinceName: '',
        provinceCode: '',
        cityName: '',
        cityCode: '',
        areaName: '',
        areaCode: '',
        email: ''
      },
      rules: {
        mailingName: [
          { required: true, message: '请输入收货人姓名', trigger: 'blur' }
        ],
        mailingPhone: [
          { required: true, validator: phone, message: '手机号码格式不正确', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入所在地区', trigger: 'blur' }
        ],
        telPhone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' }
        ],
        addressDetail: [
          { required: true, message: '请输入具体地址，不需要重复填写省/市/县', trigger: 'blur' }
        ],
        postalcode: [
          { required: false },
          { validator: checkCode, trigger: 'blur' }
        ],
        email: [
          { required: true, validator: email, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /**
     * 三级联动
     * @param arr
     */
    addressChange(arr) {
      const len = arr.length
      const codeToTextArr = []
      for (let i = 0; i < len; i++) {
        codeToTextArr.push(CodeToText[arr[i]])
      }
      this.projectAreaName = codeToTextArr.join()
    },
    doneAddClickBtn(addAddressForm) {
      this.$refs[addAddressForm].validate(valid => {
        if (valid) {
          if (this.childenData.type === '01') {
            if (this.projectAreaName) {
              const location = this.projectAreaName.split(',')
              const len = location.length
              if (len === 1) {
                this.adddressobj.address = [TextToCode[location[0]].code]
              } else if (len === 2) {
                this.adddressobj.address = [
                  TextToCode[location[0]].code,
                  TextToCode[location[0]][location[1]].code
                ]
              } else {
                this.adddressobj.address = [
                  TextToCode[location[0]].code,
                  TextToCode[location[0]][location[1]].code,
                  TextToCode[location[0]][location[1]][location[2]].code
                ]
              }
              this.adddressobj.provinceName = location[0]
              this.adddressobj.provinceCode = this.adddressobj.address[0]
              this.adddressobj.cityName = location[1]
              this.adddressobj.cityCode = this.adddressobj.address[1]
              this.adddressobj.areaName = location[2]
              this.adddressobj.areaCode = this.adddressobj.address[2]
              const addressParams = JSON.parse(JSON.stringify(this.adddressobj))
              delete addressParams.address
              addBilings(addressParams)
                .then(res => {
                  if (res.header.ret === '0') {
                    // this.$emit('add')
                    this.$message({
                      message: '添加收件信息成功',
                      type: 'success'
                    })
                    this.childenData.dialog = false
                    this.reload()
                  }
                })
                .catch(err => {
                  throw new Error('添加收件信息失败' + err)
                })
            }
          } else {
            if (this.projectAreaName) {
              const location = this.projectAreaName.split(',')
              const len = location.length
              if (len === 1) {
                this.adddressobj.address = [TextToCode[location[0]].code]
              } else if (len === 2) {
                this.adddressobj.address = [
                  TextToCode[location[0]].code,
                  TextToCode[location[0]][location[1]].code
                ]
              } else {
                this.adddressobj.address = [
                  TextToCode[location[0]].code,
                  TextToCode[location[0]][location[1]].code,
                  TextToCode[location[0]][location[1]][location[2]].code
                ]
              }

              this.adddressobj.provinceName = location[0]
              this.adddressobj.provinceCode = this.adddressobj.address[0]
              this.adddressobj.cityName = location[1]
              this.adddressobj.cityCode = this.adddressobj.address[1]
              this.adddressobj.areaName = location[2]
              this.adddressobj.areaCode = this.adddressobj.address[2]
            }
            const addressParams = JSON.parse(JSON.stringify(this.adddressobj))
            delete addressParams.address
            editBilings(addressParams)
              .then(res => {
                if (res.header.ret === '0') {
                  // this.$emit('update')
                  this.$message({
                    message: '修改收件信息成功',
                    type: 'success'
                  })
                  this.childenData.dialog = false
                  this.reload()
                }
              })
              .catch(err => {
                throw new Error('修改收件信息失败' + err)
              })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="less"></style>
