<template>
  <div class="invoice edit-invoice" slot="edit">
    <div class="select-con edit-item">
      <span>{{$t('manage.account.invoiceModule.invoiceType')}}</span>
      <div :class="{'tag-active':invoice===null}" @click="invoice=null" v-show="false">
        <span>{{$t('manage.myOrders.type1')}}</span>
        <img :src="`${$cdn}images/tag-icon.png`" alt />
      </div>

      <div :class="{'tag-active':invoice===2}" @click="invoice=2">
        <span>{{$t('manage.myOrders.type2')}}</span>
        <img :src="`${$cdn}images/tag-icon.png`" alt />
      </div>
      <div :class="{'tag-active':invoice===3}" @click="invoice=3">
        <span>{{$t('manage.myOrders.type3')}}</span>
        <i></i>
        <img :src="`${$cdn}images/tag-icon.png`" alt />
      </div>
    </div>
    <div class="invoice-input" v-if="invoice===2">
      <div class="input-con edit-item">
        <span>{{$t('manage.account.invoiceModule.title')}}</span>
        <input @input="errMsg = checkParams(invoice).errMsg,showMsg.title = true" type="text" :placeholder="$t('manage.myOrders.title')" maxlength="20" v-model="editInvoice2.title" />
        <p class="errmsg">{{showMsg.title && errMsg.title}}</p>
      </div>
      <div class="input-con edit-item">
        <span>{{$t('manage.account.invoiceModule.invoiceShui')}}</span>
        <input
          @input="e => { (errMsg = checkParams(invoice).errMsg), showMsg.code = true}"
          maxlength="18"
          v-model="editInvoice2.code"
          type="text"
          :placeholder="$t('manage.myOrders.code')"
          oninput="value=value.replace(/[^\w\.\/]/ig,'')"
        />
        <p class="errmsg">{{showMsg.code && errMsg.code}}</p>
      </div>
      <div class="input-con edit-item">
        <span>{{$t('manage.account.invoiceEmail')}}</span>
        <input @input="errMsg = checkParams(invoice).errMsg, showMsg.email = true" type="text" :placeholder="$t('manage.myOrders.email')" maxlength="30" v-model="editInvoice2.emailAddress" />
        <p class="errmsg">{{showMsg.email && errMsg.email}}</p>
      </div>
      <div class="input-con edit-item">
        <span>{{$t('manage.account.placeholder.shipMobile')}}</span>
        <input @input="errMsg = checkParams(invoice).errMsg, showMsg.phone = true" type="text" :placeholder="$t('manage.account.placeholder.phone')" maxlength="20" oninput="value=value.replace(/[^\d\-]/g,'')" v-model="editInvoice2.shipMobile" />
        <p class="errmsg">{{showMsg.phone && errMsg.phone}}</p>
      </div>
    </div>
    <div class="invoice-input" v-if="invoice===3">
      <div class="input-con" style="padding-left: 30px" v-if="(!this.shaddress || !this.shaddress.id || !this.shaddress.shipMobile)">
        <Address class="invoice-address-module" ref="address" />
        <p class="errmsg">{{showMsg.shaddress && errMsg.shaddress}}</p>
      </div>
      <template v-else>
        <div class="input-con edit-item">
          <span>{{$t('manage.account.invoiceModule.title')}}</span>
          <input @input="errMsg = checkParams(invoice).errMsg,showMsg.title1=true" type="text" v-model="editInvoice3.title" maxlength="20" :placeholder="$t('manage.myOrders.title')"/>
          <p class="errmsg">{{showMsg.title1 && errMsg.title}}</p>
        </div>
        <div class="input-con edit-item">
          <span>{{$t('manage.account.invoiceModule.invoiceShui')}}</span>
          <input
            @input="e => {(errMsg = checkParams(invoice).errMsg),showMsg.code1 = true}"
            maxlength="18"
            v-model="editInvoice3.code"
            type="text"
            oninput="value=value.replace(/[^\w\.\/]/ig,'')"
            :placeholder="$t('manage.myOrders.code')"
          />
          <p class="errmsg">{{showMsg.code1 && errMsg.code}}</p>
        </div>
        <div class="input-con edit-item">
          <span>{{$t('manage.account.invoiceModule.address')}}</span>
          <input
            @input="errMsg = checkParams(invoice).errMsg, showMsg.organizedAddress = true"
            type="text"
            maxlength="100"
            v-model="editInvoice3.organizedAddress"
            :placeholder="$t('manage.myOrders.organizedAddress')"
          />
          <p class="errmsg">{{showMsg.organizedAddress && errMsg.organizedAddress}}</p>
        </div>
        <div class="input-con edit-item">
          <span>{{$t('manage.account.invoiceModule.phone')}}</span>
          <input @input="errMsg = checkParams(invoice).errMsg,showMsg.guhua=true" type="text" maxlength="20" oninput="value=value.replace(/[^\d\-]/g,'')" v-model="editInvoice3.registerPhone" :placeholder="$t('manage.myOrders.registerPhone')"/>
          <p class="errmsg">{{showMsg.guhua && errMsg.guhua}}</p>
        </div>
        <div class="input-con edit-item">
          <span>{{$t('manage.account.invoiceModule.bank')}}</span>
          <input @input="errMsg = checkParams(invoice).errMsg,showMsg.bankName=true" type="text" maxlength="40" v-model="editInvoice3.bankName" :placeholder="$t('manage.myOrders.bankName')" />
          <p class="errmsg">{{showMsg.bankName && errMsg.bankName}}</p>
        </div>
        <div class="input-con edit-item">
          <span>{{$t('manage.account.invoiceModule.bankAccount')}}</span>
          <input @input="errMsg = checkParams(invoice).errMsg,showMsg.bankAccount=true" type="text" maxlength="40" v-model="editInvoice3.bankAccount" :placeholder="$t('manage.myOrders.bankAccount')"  />
          <p class="errmsg">{{showMsg.bankAccount && errMsg.bankAccount}}</p>
        </div>
        <div class="input-con edit-item">
          <span>{{$t('manage.account.placeholder.shipMobile')}}</span>
          <input @input="errMsg = checkParams(invoice).errMsg, showMsg.phone = true" type="text" :placeholder="$t('manage.account.placeholder.phone')" maxlength="20" oninput="value=value.replace(/[^\d\-]/g,'')" v-model="editInvoice3.shipMobile" />
          <p class="errmsg">{{showMsg.phone && errMsg.phone}}</p>
        </div>
      </template>

    </div>
    <div class="bottom-floot">
      <div @click="hideInvoice" class="btn">{{$t('manage.myOrders.cancal1')}}</div>
      <div @click="saveInvoice(invoice)" class="btn parmary">{{$t('manage.myOrders.save')}}</div>
    </div>
  </div>
</template>
<script>
import { reg } from '@/util'
import { mapState } from 'vuex'
import address from '@/page/mall/confirm/components/addressModule'

export default {
  props: ['data', 'orderId', 'invoiceId', 'consumeType'],
  inject: ['hideInvoice', 'saveInvoiceData'],
  data: function () {
    return {
      showMsg: {},
      errMsg: {},
      editInvoice2: this.data.type === 2 ? this.data : {},
      editInvoice3: this.data.type === 3 ? this.data : {},
      invoice: this.data.type || 2
    }
  },
  watch: {
    data (newVal) {
      this.invoice = newVal.type || 2
      this.editInvoice2 = newVal.type === 2 ? newVal : {}
      this.editInvoice3 = newVal.type === 3 ? newVal : {}
    },
    invoice () {
      this.errMsg = this.checkParams(this.invoice).errMsg
    }
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      shaddress: state => state.user.address,
      language: state => state.language.current
    })
  },
  mounted () {
    this.errMsg = this.checkParams(this.invoice).errMsg
  },
  methods: {
    checkParams (cInvoice) {
      let invoiceType = ''
      let isObject = function (obj) {
        return JSON.stringify(obj) === '{}' ? '' : obj
      }
      let check = value => {
        for (let i = 0, len = value.length; i < len; i++) {
          if (!value[i].val) {
            errMsg[value[i].key] = value[i].name + this.$t('toast.7')
          }
        }
        return true
      }
      let params = {}
      let errMsg = {}
      console.log('cInvoice', cInvoice)
      if (cInvoice === 2) {
        invoiceType = 2
        console.log(this.editInvoice2)
        let title = isObject(this.editInvoice2.title)
        let code = isObject(this.editInvoice2.code)
        let emailAddress = isObject(this.editInvoice2.emailAddress)
        let shipMobile = isObject(this.editInvoice2.shipMobile)

        if (code && code.length !== 18) {
          errMsg.code = this.$t('toast.21')
        }
        if (!reg.email.test(emailAddress)) {
          errMsg.email = this.$t('toast.8')
        }
        //if (!shipMobile) {
        //  errMsg.phone = this.$t('toast.22')
        //}
        params = {
          invoiceType,
          title,
          code: code || '',
          emailAddress,
          shipMobile
        }

        let checkStr = [
          {
            name: this.$t('manage.account.invoiceTitle'),
            val: title,
            key: 'title'
          },
          {
            name: this.$t('mall.invoiceEmail'),
            val: emailAddress,
            key: 'emailAddress'
          },
          {
            name: this.$t('manage.account.placeholder.shipMobile'),
            val: shipMobile,
            key: 'shipMobile'
          }
        ]
        check(checkStr)
        if (shipMobile && !reg.phone.test(shipMobile)) {
          errMsg.phone = this.$t('toast.22')
        }
      } else {
        if ((!this.shaddress || !this.shaddress.id || !this.shaddress.shipMobile)) {
          errMsg.shaddress = this.$t('manage.myOrders.unaddress')
        } else {
          delete errMsg.shaddress
        }

        let {title: title1, code: code1, shipMobile, organizedAddress: organizedAddress1, registerPhone: registerPhone1, bankName: bankName1, bankAccount: bankAccount1} = this.editInvoice3
        invoiceType = 3
        console.log('shipMobile', shipMobile, !reg.phone.test(shipMobile))
        let title = isObject(title1)
        let code = isObject(code1)
        let organizedAddress = isObject(organizedAddress1)
        let registerPhone = isObject(registerPhone1)
        let bankName = isObject(bankName1)
        let bankAccount = isObject(bankAccount1)

        params = {
          invoiceType,
          title,
          code: code || '',
          organizedAddress,
          registerPhone,
          bankName,
          bankAccount,
          shipMobile
        }
        let checkStr = [
          {
            name: this.$t('manage.account.invoiceTitle'),
            val: title,
            key: 'title'
          },
          {
            name: this.$t('manage.account.invoiceModule.code'),
            val: code,
            key: 'code'
          },
          {
            name: this.$t('manage.account.invoiceModule.address'),
            val: organizedAddress,
            key: 'organizedAddress'
          },
          {
            name: this.$t('manage.account.invoiceModule.phone'),
            val: registerPhone,
            key: 'registerPhone'
          },
          {
            name: this.$t('manage.account.invoiceModule.bank'),
            val: bankName,
            key: 'bankName'
          },
          {
            name: this.$t('manage.account.invoiceModule.bankAccount'),
            val: bankAccount,
            key: 'bankAccount'
          },
          {
            name: this.$t('manage.account.placeholder.shipMobile'),
            val: shipMobile,
            key: 'shipMobile'
          }
        ]

        check(checkStr)

        if (!code || code.length !== 18) {
          errMsg.code = this.$t('toast.21')
        }

        if (!reg.guhua.test(registerPhone)) {
          errMsg.guhua = this.$t('toast.22')
        }
        if (shipMobile && !reg.phone.test(shipMobile)) {
          errMsg.phone = this.$t('toast.22')
        }
      }

      return {
        errMsg,
        params,
        invoiceType
      }
    },
    changeType (type) {
      this.$emit('changtype', type)
    },
    saveInvoice (cInvoice) {
      if (!cInvoice) {
        if (this.invoiceId) {
          this.$http
            .post('user/invoice/delete', {
              invoiceId: this.invoiceId
            }, {
              headers: {
                token: this.token
              }
            })
            .then(data => {
              let response = data.data
              if (response.code === 0) {
                this.$bus.$emit('editItem', {
                  id: '',
                  type: null
                })
                ()
              }
            })
        } else {
          this.$bus.$emit('editItem', {
            id: '',
            type: null
          })
          this.hideInvoice()
        }
        return
      }

      let {params, invoiceType, errMsg} = this.checkParams(cInvoice)
      let keys = Object.keys(errMsg)
      if (keys.length) {
        return this.$toast.show('warn', errMsg[keys[0]])
      }

      if (this.invoiceId) {
        params['invoiceId'] = params['id'] = this.invoiceId || null
      }
      params['orderId'] = this.orderId
      params['type'] = invoiceType
      params['consumeType'] = this.consumeType
      this.$http
        .post('user/invoice/open', params, {
          headers: {
            token: this.token
          }
        })
        .then(data => {
          let response = data.data
          if (response.code === 0) {
            this.saveInvoiceData(response.data)
            this.hideInvoice()
          } else {
            let key = `toast.${response.code}`
            let msg = this.$t(key) && this.$t(key) !== key ? this.$t(key) : response.msg
            this.$toast.show('warn', msg)
          }
        })
    }
  },
  components: {
    Address: address
  }
}
</script>

<style>
.invoice-address-module h3{
  display: none;
}

.invoice-address-module .submit-btn {
  background-color: #15BEC8;
  color: #fff;
}

.invoice-address-module .cancel-btn {
  border: solid 1px #ccc;
  background: none !important;
  font-weight: 600;
  color: #202020;
}

</style>

<style lang="scss" scoped>
$theme-color: #15BEC8;
$border-color: #e7e7e7;
input {
  appearance: none;
  line-height: 40px;
  height: 40px;
  border: solid 1px $border-color;
  padding-left: 10px;
  &:focus {
    border: solid 1px $theme-color;
  }
}
.btn {
  text-align: center;
  cursor: pointer;
  width: 126px;
  height: 36px;
  line-height: 36px;
  margin: 10px 25px 0 0;
  display: inline-block;
  border: solid 1px #ccc;
}
.parmary {
  background-color: $theme-color;
  border: solid 1px $theme-color;
}
.invoice {
  margin-top: 20px;
  p {
    line-height: 18px;
    margin-bottom: 8px;
    overflow-wrap: break-word;
    &:last-of-type {
      margin-bottom: 0;
    }
    span {
      padding-right: 10px;
    }
  }
  .p-desc {
    color: #a0a0a0;
    overflow-wrap: break-word;
    line-height: 24px;
  }
  .no-info {
    margin-top: 4px;
  }
  .avatar {
    width: 68px;
    height: 68px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    margin: 5px 0;
  }
  .nickname {
    width: 126px;
  }
}
.edit-invoice {
  .select-con {
    div {
      position: relative;
      cursor: pointer;
      line-height: 36px;
      height: 36px;
      text-align: center;
      margin: 10px 26px 10px 0;
      border: solid 1px $border-color;
      color: #a0a0a0;
      padding: 0 10px;
      display: inline-block;
      font-size: 12px;
      img {
        display: none;
        position: absolute;
        bottom: 0;
        right: 0;
      }
      &:last-of-type {
        margin-right: 0;
      }
    }
    .tag-active {
      border: solid 1px $theme-color;
      color: #000;
      img {
        display: inline-block;
      }
    }
  }
  .input-con {
    input {
      width: 316px;
      line-height: 40px;
      height: 40px;
      margin: 10px 25px 10px 0;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
}

.edit-item  {
  position: relative;
  padding-left: 130px;
  margin: 20px 0;

  .errmsg {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FF3E3E;
    line-height: 12px;
    top: 100%;
    left: 130px;
    position: absolute;
  }

  > span {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100px;
    text-align: right;
    transform: translateY(-50%);
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #202020;
    line-height: 20px;
  }
}

.bottom-floot {
  border-top: 1px solid #EBEBEB;
  padding-top: 20px;
  text-align: center;
  width: calc(100% + 48px);

  .btn {
    border-radius: 4px;
    margin: 0;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #202020;

    &.parmary {
      color: #fff;
    }
    &:first-child {
      margin-right: 20px;
    }
  }
}

</style>
