<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' && window.localStorage.from) {
        vm.invoiceInfo = {}
        vm.getInvoice()
      }
    })
  },
  created () {
    this.getInvoiceType()
    this.getTaxpayer()
    this.addRows(this.invoiceInfo.invoice_adds)
    this.addRowsLive(this.invoiceInfo.open_bank)
  },
  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
          console.log(111111111111111111, res.info.invoice_title)
          if (res.info.invoice_title == '' || res.info.invoice_title == null || res.info.invoice_title == undefined) {
            vm.invoiceInfo.invoice_title = window.localStorage.bp_name
          }
        } 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' ? '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) {
      let addNum = parseInt(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
      }
    },
    addRowsLive (e) {
      let addNum = parseInt(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
      }
    },
    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.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.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;
  }
  .save {
    color: #fff;
    border-radius: 4px;
    background-color: @headerColor;
  }
</style>