<template>
  <div class="invoice edit-invoice" slot="edit">
    <div class="select-con">
      <div :class="{'tag-active':invoice===null}" @click="invoice=null">
        <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">
        <input type="text" :placeholder="$t('manage.myOrders.title')" maxlength="20" v-model="editInvoice2.title" />
        <input
          type="text"
          :placeholder="$t('manage.myOrders.code')"
          oninput="value=value.replace(/[^\w\.\/]/ig,'')"
          maxlength="18"
          v-model="editInvoice2.code"
        />
      </div>
      <div class="input-con">
        <input type="text" :placeholder="$t('manage.myOrders.email')" maxlength="30" v-model="editInvoice2.emailAddress" />
      </div>
    </div>
    <div class="invoice-input" v-if="invoice===3">
      <div class="input-con">
        <input type="text" v-model="editInvoice3.title" maxlength="20" :placeholder="$t('manage.myOrders.title')"/>
        <input
          type="text"
          maxlength="18"
          v-model="editInvoice3.code"
          oninput="value=value.replace(/[^\w\.\/]/ig,'')"
          :placeholder="$t('manage.myOrders.code')"
        />
      </div>
      <div class="input-con">
        <input
          type="text"
          maxlength="100"
          v-model="editInvoice3.organizedAddress"
          :placeholder="$t('manage.myOrders.organizedAddress')"
        />
        <input type="text" maxlength="20" oninput="value=value.replace(/[^\d\-]/g,'')" v-model="editInvoice3.registerPhone" :placeholder="$t('manage.myOrders.registerPhone')"/>
      </div>
      <div class="input-con">
        <input type="text" maxlength="40" v-model="editInvoice3.bankName" :placeholder="$t('manage.myOrders.bankName')" />
        <input type="text" maxlength="40" v-model="editInvoice3.bankAccount" :placeholder="$t('manage.myOrders.bankAccount')"  />
      </div>
    </div>
    <div @click="saveInvoice(invoice)" class="btn parmary">{{$t('manage.myOrders.save')}}</div>
    <div @click="hideInvoice" class="btn">{{$t('manage.myOrders.cancal1')}}</div>
  </div>
</template>
<script>
import { reg } from '@/util'
import { mapState } from 'vuex'

export default {
  props: ['data', 'orderId', 'invoiceId'],
  inject: ['hideInvoice', 'saveInvoiceData'],
  data: function () {
    return {
      editInvoice2: this.data.type === 2 ? this.data : {},
      editInvoice3: this.data.type === 3 ? this.data : {},
      invoice: this.data.type || null
    }
  },
  watch: {
    data (newVal) {
      this.invoice = newVal.type || null
      this.editInvoice2 = newVal.type === 2 ? newVal : {}
      this.editInvoice3 = newVal.type === 3 ? newVal : {}
    }
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      language: state => state.language.current
    })
  },
  methods: {
    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 isObject = function (obj) {
        return JSON.stringify(obj) === '{}' ? '' : obj
      }
      let params = {}
      let invoiceType = ''
      let check = value => {
        for (let i = 0, len = value.length; i < len; i++) {
          if (!value[i].val) {
            return this.$toast.show('warn', value[i].name + this.$t('toast.7'))
          }
        }
        return true
      }

      if (cInvoice === 2) {
        invoiceType = 2

        let title = isObject(this.editInvoice2.title)
        let code = isObject(this.editInvoice2.code)
        let emailAddress = isObject(this.editInvoice2.emailAddress)

        if (code && code.length !== 18) {
          return this.$toast.show('warn', this.$t('toast.21'))
        }
        if (!reg.email.test(emailAddress)) {
          return this.$toast.show('warn', this.$t('toast.8'))
        }
        params = {
          invoiceType,
          title,
          code: code || '',
          emailAddress
        }

        let checkStr = [
          {
            name: this.$t('manage.account.invoiceTitle'),
            val: title
          },
          {
            name: this.$t('mall.invoiceEmail'),
            val: emailAddress
          }
        ]
        if (!check(checkStr)) {
          return
        }
      } else {
        let {title: title1, code: code1, organizedAddress: organizedAddress1, registerPhone: registerPhone1, bankName: bankName1, bankAccount: bankAccount1} = this.editInvoice3
        invoiceType = 3
        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
        }
        let checkStr = [
          {
            name: this.$t('manage.account.invoiceTitle'),
            val: title
          },
          {
            name: this.$t('manage.account.invoiceModule.code'),
            val: code
          },
          {
            name: this.$t('manage.account.invoiceModule.address'),
            val: organizedAddress
          },
          {
            name: this.$t('manage.account.invoiceModule.phone'),
            val: registerPhone
          },
          {
            name: this.$t('manage.account.invoiceModule.bank'),
            val: bankName
          },
          {
            name: this.$t('manage.account.invoiceModule.bankAccount'),
            val: bankAccount
          }
        ]
        if (!check(checkStr)) {
          return
        }
        if (!code || code.length !== 18) {
          return this.$toast.show('warn', this.$t('toast.21'))
        }

        if (!reg.guhua.test(registerPhone)) {
          return this.$toast.show('warn', this.$t('toast.22'))
        }
      }

      if (this.invoiceId) {
        params['invoiceId'] = params['id'] = this.invoiceId || null
      }
      params['orderId'] = this.orderId
      params['type'] = invoiceType
      params['consumeType'] = 0
      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()
          }
        })
    }
  }
}
</script>

<style lang="less" scoped>
@theme-color: #15BEC8;
@border-color: #e7e7e7;
input {
  appearance: none;
  line-height: 36px;
  height: 36px;
  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;
      min-width: 200px;
      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;
      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: 36px;
      height: 36px;
      margin: 10px 25px 10px 0;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
}
</style>
