<template>
    <div class="add-address-page">
      <Card>
        <div class="head">
          <Icon type="md-bookmark" color="#2d8cf0" :size="28" />
          <label>新增地址</label>
        </div>
        <div class="item">
          <label class="label">名称：</label>
          <Input
            placeholder="请输入名称"
            v-model="form.addressName"
            clearable
            class="item-input"
            style="width:400px;"
          />
        </div>
        <div class="item">
          <label class="label">联系人：</label>
          <Input
            placeholder="请输入联系人"
            v-model="form.contactName"
            clearable
            class="item-input"
            style="width:400px;"
          />
        </div>
        <div class="item">
          <label class="label">联系电话：</label>
          <Input
            placeholder="请输入联系电话"
            v-model="form.contactPhone"
            clearable
            type="tel"
            class="item-input"
            style="width:400px;"
          />
        </div>
        <div class="item">
          <label class="label">邮寄地址：</label>
          <Input
            placeholder="请输入邮寄地址"
            v-model="form.mailingAddress"
            clearable
            type="textarea"
            class="item-input"
            style="width:400px;"
          />
        </div>
        <div class="item">
          <label class="label">是否默认：</label>
          <i-switch @on-change="handleChange">
            <span slot="open">是</span>
            <span slot="close">否</span>
          </i-switch>
        </div>

        <div class="footer-con">
          <Button
            type="default"
            @click="handleCancel"
            style="margin-right: 30px"
          >取消</Button
          >
          <Button
            type="primary"
            @click="handleSubmit"
            :loading="submitLoading"
          >确定</Button
          >
        </div>
      </Card>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'add-address',
  data () {
    return {
      form: {
        addressName: '',
        contactName: '',
        contactPhone: '',
        mailingAddress: '',
        isDefault: false
      },
      submitLoading: false
    }
  },
  methods: {
    ...mapMutations(['closeTag']),
    checkForm () {
      let errMsg = ''
      let { addressName, contactName, contactPhone, mailingAddress } = this.form

      if (!mailingAddress) {
        errMsg = '请输入邮寄地址！'
      }
      let reg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!reg.test(contactPhone)) {
        errMsg = '联系电话格式输入有误！'
      }
      if (!contactPhone) {
        errMsg = '请输入联系电话！'
      }
      if (!contactName) {
        errMsg = '请输入联系人！'
      }
      if (!addressName) {
        errMsg = '请输入名称！'
      }
      return { errMsg }
    },
    handleChange (status) {
      this.form.isDefault = status
    },
    handleCancel () {
      let route = this.$route
      let toRouteName = 'address_list'
      this.closeTag({ route, toRouteName })
    },
    handleSubmit () {
      let { errMsg } = this.checkForm()
      if (errMsg) {
        return this.$Message.warning(errMsg)
      }
      this.submitLoading = true
      this.api({
        apiName: 'addAddress',
        postdata: this.form,
        complete: () => {
          this.submitLoading = false
        },
        success: (res) => {
          let route = this.$route
          let toRouteName = 'address_list'
          this.closeTag({ route, toRouteName })
          this.$Notice.success({ title: '新增成功！' })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .head {
    color: #17233d;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  i {
    margin-right: 10px;
  }
  }
  .item {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .item-input {
      width: 300px;
    }
  .label{
    width: 100px;
    text-align: right;
    flex-shrink: 0;
  }
  }
  .footer-con {

    margin-left: 150px;
  }
</style>
