<template>
  <h-view id="np-invoice">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <img src="@/assets/userBind/arrow.png" >
        <span>开票信息</span>
      </div>
    </h-header>
    <h-content>
      <list-item :item-height="44">
        <item :showArrow="true">
          <div slot="name">纳税人类型</div>
          <input
            slot="content"
            v-model="invoiceInfo.taxpayer_type_n"
            type="text"
            readonly
            placeholder="请选择"
            onfocus="this.blur()"
            @click="selectTaxpayer"
          >
        </item>
        <item :showArrow="true">
          <div slot="name">发票类型</div>
          <input
            slot="content"
            v-model="invoiceInfo.invoice_kind_n"
            type="text"
            readonly
            placeholder="请选择"
            onfocus="this.blur()"
            @click="selectInvoiceType"
          >
        </item>
        <item>
          <div slot="name">发票抬头</div>
          <input slot="content" v-model="invoiceInfo.invoice_title" type="text" placeholder="请输入发票抬头" >
        </item>
        <item>
          <div slot="name">发票地址</div>
          <textarea
            slot="content"
            ref="myTestarea"
            v-model="invoiceInfo.invoice_adds"
            cols="22" rows="1" type="text" placeholder="请输入发票地址"
            @input="addRows(invoiceInfo.invoice_adds)" />
        </item>
        <item>
          <div slot="name">开户电话</div>
          <input slot="content" v-model="invoiceInfo.invoice_tel" type="text" placeholder="请输入开户电话" >
        </item>
        <item>
          <div slot="name">发票开户行</div>
          <textarea
            slot="content"
            ref="myTestareaLive"
            v-model="invoiceInfo.open_bank"
            cols="22"
            rows="1"
            type="text"
            placeholder="请输入发票开户行及账号"
            @input="addRowsLive(invoiceInfo.open_bank)"
          />
        </item>
        <item>
          <div slot="name">开户行账号</div>
          <input
            slot="content" v-model="invoiceInfo.open_account" type="number" pattern="\d*"
            placeholder="请输入开户行账号" >
        </item>
      </list-item>
    </h-content>
    <bottom-tab class="footer-button">
      <tab-button class="save" @click.native="save">下一步</tab-button>
    </bottom-tab>
  </h-view>
</template>
<script>
export default {
  data () {
    return {
      value: '',
      invoicList: [],
      taxpayerList: [],
      invoiceInfo: {
        bp_id: null,
        bp_class: null,
        taxpayer_type_n: '',
        invoice_kind_n: '',
        taxpayer_type: '',
        invoice_kind: '',
        invoice_title: '',
        invoice_adds: '',
        invoice_tel: '',
        open_bank: '',
        open_account: '',
      },
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'NPBaseInfo') {
        vm.invoiceInfo = {
          bp_id: null,
          bp_class: null,
          taxpayer_type_n: '',
          invoice_kind_n: '',
          taxpayer_type: '',
          invoice_kind: '',
          invoice_title: '',
          invoice_adds: '',
          invoice_tel: '',
          open_bank: '',
          open_account: '',
        }
        vm.getInvoice()
      }
    })
  },
  created () {
    this.getInvoiceType()
    this.getTaxpayer()
  },
  methods: {
    getInvoice () {
      let vm = this
      let url = process.env.basePath + 'bp_invoice_query'
      let param = {
        bp_id: window.localStorage.getItem('bp_id'),
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.invoiceInfo = res.info
          if (res.info.invoice_title == '' || res.info.invoice_title == null || res.info.invoice_title == undefined) {
            vm.invoiceInfo.invoice_title = window.localStorage.bp_name
          }
          vm.addRows(vm.invoiceInfo.invoice_adds)
          vm.addRowsLive(vm.invoiceInfo.open_bank)
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    save () {
      let vm = this
      let url = process.env.basePath + 'bp_invoice_save'
      let name = ((window.localStorage.bp_type === 'TENANT' || window.localStorage.bp_type === 'GUTA') && !window.localStorage.getItem('multipleRole')) || ((window.localStorage.multipleRole === 'TENANT' || window.localStorage.multipleRole === 'GUTA') && window.localStorage.getItem('multipleRole')) ? 'AccessoryInfo' : 'NPBankInfo'
      vm.invoiceInfo.bp_id = window.localStorage.getItem('bp_id')
      vm.invoiceInfo.bp_class = 'NP'
      let param = {
        master: vm.invoiceInfo,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.$router.push({
            name: name,
          })
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    addRows (e) {
      if (e) {
        // let addNum = Math.ceil(e.length / 16)
        // if (addNum === 0) {
        //   this.$refs.myTestarea.rows = 1
        // } else if (addNum >= addNum - 1 && addNum < addNum + 1) {
        //   this.$refs.myTestarea.rows = addNum + 1
        // }
        let len = 0
        for (let i = 0; i < e.length; i++) {
          var c = e.charCodeAt(i)
          // 统计字符串的字符长度
          if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
            len += 1
          } else {
            len += 2
          }
        }
        let addNum = Math.ceil(len / 21)
        this.$refs.myTestarea.rows = addNum
      }
    },
    addRowsLive (e) {
      if (e) {
        // let addNum = Math.ceil(e.length / 16)
        // if (addNum === 0) {
        //   this.$refs.myTestareaLive.rows = 1
        // } else if (addNum >= addNum - 1 && addNum < addNum + 1) {
        //   this.$refs.myTestareaLive.rows = addNum + 1
        // }
        let len = 0
        for (let i = 0; i < e.length; i++) {
          var c = e.charCodeAt(i)
          // 统计字符串的字符长度
          if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
            len += 1
          } else {
            len += 2
          }
        }
        let addNum = Math.ceil(len / 21)
        this.$refs.myTestareaLive.rows = addNum
      }
    },
    getInvoiceType () {
      let vm = this
      let url = process.env.basePath + 'bp_invoice_kind_query'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.invoicList = res.lists.map(item => {
            return {
              code: item.invoice_kind,
              code_name: item.invoice_kind_n,
            }
          })
        }
      })
    },
    getTaxpayer () {
      let vm = this
      let url = process.env.basePath + 'bp_taxpayer_type_query'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.taxpayerList = res.lists.map(item => {
            return {
              code: item.taxpayer_type,
              code_name: item.taxpayer_type_n,
            }
          })
        }
      })
    },
    selectInvoiceType (e) {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.invoicList,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.$set(vm.invoiceInfo, 'invoice_kind', obj.bp_type)
          vm.$set(vm.invoiceInfo, 'invoice_kind_n', obj.bp_type_n)
          /* vm.invoiceInfo.invoice_kind = obj.bp_type
          vm.invoiceInfo.invoice_kind_n = obj.bp_type_n */
        },
      })
    },
    selectTaxpayer (e) {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.taxpayerList,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.$set(vm.invoiceInfo, 'taxpayer_type', obj.bp_type)
          vm.$set(vm.invoiceInfo, 'taxpayer_type_n', obj.bp_type_n)
          /* vm.invoiceInfo.taxpayer_type = obj.bp_type
          vm.invoiceInfo.taxpayer_type_n = obj.bp_type_n */
        },
      })
    },
  },
}
</script>
<style lang="less" scoped>
input::placeholder{
    color: #B4B4B5;
}
 textarea::placeholder {
    color: #b4b4b5;
  }
  textarea {
    text-align: right;
    color:#666;
    resize: none;
  }
  .save {
    color: #fff;
    border-radius: 4px;
    background-color: @headerColor;
  }
</style>