<template>
  <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>
</template>
<script>
export default {
  props: {
    'baseInfo': {
      type: Object,
      default: {},
    },
    'tabNum': {
      type: Number,
      default: 0,
    },
  },
  data () {
    return {
      value: '',
      invoicList: [],
      taxpayerList: [],
      invoiceInfo: {
        taxpayer_type_n: '',
        invoice_kind_n: '',
        taxpayer_type: '',
        invoice_kind: '',
        invoice_title: '',
        invoice_adds: '',
        invoice_tel: '',
        open_bank: '',
        open_account: '',
      },
    }
  },
  watch: {
    tabNum (newVal, oldVal) {
      if (newVal === 2) {
        Object.assign(this.invoiceInfo, this.baseInfo)
      }
    },
  },
  created () {
    this.getInvoiceType()
    this.getTaxpayer()
    this.addRows(this.invoiceInfo.invoice_adds)
    this.addRowsLive(this.invoiceInfo.open_bank)
  },
  updated () {
    this.sendList()
  },
  methods: {
    onInput (value) {
      this.invoiceInfo.open_account += ('' + value)
      console.log(value)
    },
    onDelete () {
      this.invoiceInfo.open_account = ''
      console.log('delete')
    },
    keyboradShow () {
      let vm = this
      this.hlsPopup.showNumberKeyborad({
        title: '数字键盘',
        keyDown: (text) => {
          vm.onInput(text)
        },
        keyDelete: () => {
          vm.onDelete()
        },
      })
    },
    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
        },
      })
    },
    sendList () {
      this.$emit('getinvoiceList', this.invoiceInfo)
    },
  },
}
</script>
<style scoped>
input::placeholder{
    color: #B4B4B5;
}
 textarea::placeholder {
    color: #b4b4b5;
  }
  textarea {
    text-align: right;
    color:#666;
  }

</style>
