<template>
  <div class="auto form-horizontal">
    <modal :show.sync="show" v-ref:modal large backdrop="false" :width="900">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="closeShow"><span>&times;</span></button>
        <h4 class="modal-title">发票信息</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="auto select-overspread form-horizontal">
          <div class="row auto">
            <div class="col-sm-12 form-group " :class="[!row.f_paper_name ? 'has-error' : '']">
              <label class="control-label col-sm-3">开票名称:</label>
              <input class="form-control "
                     v-model="row.f_paper_name" placeholder="开票名称">
            </div>
            <div class="col-sm-12 form-group " :class="[ row.invoice_is_pax.length < 1 ? 'has-error' : '']">
              <label class="control-label col-sm-3">是否征税:</label>
              <v-select v-model="row.invoice_is_pax"
                        placeholder='请选择'
                        :value.sync="row.invoice_is_pax"
                        close-on-select
                        :width="60"
                        :value-single="true"
                        :search="false"
                        :options='is_pax' clear-button>
              </v-select>
            </div>
            <div class="col-sm-12 form-group ">
              <label class="control-label col-sm-3">开户行及账号:</label>
              <input class="form-control col-sm-2"
                     v-model="row.f_paper_account" placeholder="购方开户行及账号">
            </div>
            <div class="col-sm-12 form-group "
                 :class="[ (row.f_taxpayer_id.length < 16 || row.f_taxpayer_id.length > 18) && row.f_paper_type === '数电专票' ? 'has-error' : '']">
              <label class="control-label col-sm-3">纳税人识别号:</label>
              <input class="form-control col-sm-2"
                     v-model="row.f_taxpayer_id" placeholder="纳税人识别号(16至18位)">
            </div>
            <div class="col-sm-12 form-group " :class="[!row.f_address_phone ? 'has-error' : '']">
              <label class="control-label col-sm-3">开票地址电话:</label>
              <input class="form-control col-sm-2"
                     v-model="row.f_address_phone" placeholder="开票地址">
            </div>
            <div class="col-sm-12 form-group " >
              <label class="control-label col-sm-3">发票备注:</label>
              <input class="form-control col-sm-2"
                     v-model="row.f_eticket_reason" placeholder="发票备注">
            </div>
            <div class="col-sm-12 form-group ">
              <label class="control-label col-sm-3">邮箱推送:</label>
              <input class="form-control col-sm-2"
                     v-model="row.f_email" placeholder="邮箱推送">
            </div>
          </div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn button_search"
                :disabled="!(row.f_paper_name&&row.f_address_phone&&((row.f_taxpayer_id.length>=16 && row.f_taxpayer_id.length<=18) || row.f_paper_type === '数电普票')&&row.invoice_is_pax.length >0)"
                @click='confirm'>确认收费
        </button>
      </footer>
    </modal>
  </div>
</template>
<script>

export default {
  title: '电子发票',
  data () {
    return {
      is_pax: [{label: '征税', value: '征税'}, {label: '不征税', value: '不征税'}],
    }
  },
  props: ['row','show'],
  ready () {
  },
  methods: {
    confirm(){
      this.$dispatch('confirm')
    },
    closeShow(){
      this.$dispatch('closemodalshow')
    }
  },
  watch: {
    'row'(){
      this.row.invoice_is_pax = '征税'
    }
  },
  events: {}
}
</script>
<style>
</style>
