<template>
  <div class="auto">
    <validator name='v'>
      <form novalidate class="form-horizontal select-overspread">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#">自定义信息</a></li>
        </ul>
        <div class="row" style="margin-top:10px;">
          <div class="form-group form-input-group col-sm-6" :class="[$v.f_print.required ? 'has-error' : 'has-success']">
            <label for="f_print" class="col-sm-2 control-label">发票类型:</label>
            <input type="text" v-show="false" v-model="model.f_print" v-validate:f_print='{required: true }'>

              <v-select :value.sync="model.f_print" v-model="model.f_print" :value-single="true"
                        :options='invoicetype' placeholder='发票类型'
                        close-on-select v-ref:f_print></v-select>
          </div>
          <div class="form-group form-input-group col-sm-6" :class="[$v.f_user_type.required ? 'has-error' : 'has-success']">
            <label for="f_user_type" class="col-sm-2 control-label">用户类型:</label>
            <div class="col-sm-3">
              <input type="text" v-show="false" v-model="model.f_user_type" v-validate:f_user_type='{required: true }'>
              <v-select :value.sync="model.f_user_type" v-model="model.f_user_type" :value-single="true"
                        :options='userType' placeholder='用户类型'
                        close-on-select v-ref:f_user_type></v-select>
            </div>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <div class="form-group form-input-group col-sm-6" :class="[$v.f_buy_name.required ? 'has-error' : 'has-success']">
            <label for="f_buy_name" class="col-sm-3 control-label">单位名称:</label>
            <div class="col-sm-3">
              <input type="text" v-model="model.f_buy_name" v-validate:f_buy_name='{required: true}' class="form-control" placeholder="" v-el:f_buy_name>
            </div>
          </div>
          <div class="form-group form-input-group col-sm-6" >
            <label for="f_buy_id" class="col-sm-3 control-label">纳税人识别号:</label>
            <div class="col-sm-3">
              <input type="text" v-model="model.f_buy_id" class="form-control" placeholder="" v-el:f_buy_id>
            </div>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <div class="form-group form-input-group col-sm-6">
            <label for="f_address_phone" class="col-sm-3 control-label">地址电话:</label>
            <div class="col-sm-3">
              <input type="text" v-model="model.f_address_phone" class="form-control" placeholder="" v-el:ghdwdzdh>
            </div>
          </div>
          <div class="form-group form-input-group col-sm-6">
            <label for="f_buy_openbank" class="col-sm-3 control-label">开户行及账号:</label>
            <div class="col-sm-3">
              <input type="text" v-model="model.f_buy_openbank" class="form-control" placeholder="" v-el:ghdwyhzh>
            </div>
          </div>
        </div>
        <div class="row">
          <span style="margin-left:25px;color: #00A3F0">商品信息</span>
        </div>
        <div class="row" style="margin-top:10px;">
          <div class="form-group form-input-group col-sm-6" :class="[$v.spmc.required ? 'has-error' : 'has-success']">
            <label for="spmc" class="col-sm-2 control-label">商品名称:</label>
            <input type="text" v-show="false" v-model="model.spmc" v-validate:spmc='{required: true }'>
              <v-select :value.sync="model.spmc" v-model="model.spmc" :value-single="true"
                        :options='radetname' placeholder='商品名称'
                        close-on-select v-ref:spmc></v-select>

          </div>
          <div class="form-group form-input-group col-sm-6" :class="[$v.dw.required ? 'has-error' : 'has-success']">
            <label for="dw" class="col-sm-2 control-label">商品单位:</label>
            <div class="col-sm-3">
              <input type="text" v-model="model.dw" v-validate:dw='{required: true}' class="form-control" placeholder="" v-ref:dw>
            </div>
          </div>
        </div>
        <div class="row" style="margin-top:10px;" v-show="false">
          <div class="form-group form-input-group col-sm-6" >
            <label for="spbm" class="col-sm-2 control-label">商品编码:</label>
            <div class="col-sm-3">
              <input type="text" v-model="model.spbm" class="form-control" placeholder="" >
            </div>

          </div>
          <div class="form-group form-input-group col-sm-6">
            <label for="spbmjm" class="col-sm-2 control-label">商品简码:</label>
            <div class="col-sm-3">
              <input type="text" v-model="model.spbmjm" class="form-control" placeholder="" >
            </div>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <div class="form-group form-input-group col-sm-6" :class="[$v.spsl.required ? 'has-error' : 'has-success']">
            <label for="spsl" class="col-sm-2 control-label">商品数量:</label>
            <div class="col-sm-3">
              <input type="number" v-model="model.spsl" v-validate:spsl='{required: true}' class="form-control" placeholder="0" v-el:spsl>
            </div>
          </div>
          <div class="form-group form-input-group col-sm-6" :class="[$v.spdj.required ? 'has-error' : 'has-success']">
            <label for="spdj" class="col-sm-2 control-label">商品单价:</label>
            <div class="col-sm-3">
              <input type="number" v-model="model.spdj" v-validate:spdj='{required: true}' class="form-control" placeholder="0.00" v-el:spdj>
            </div>
          </div>
        </div>
        <div class="row" style="margin-top:10px;">
          <div class="form-group form-input-group col-sm-6" >
            <div class="form-group form-input-group col-sm-6" :class="[$v.sl.required ? 'has-error' : 'has-success']">
              <label for="sl" class="col-sm-2 control-label">税率:</label>
              <div class="col-sm-3">
                <input type="number" step="0.01" v-model="model.sl" v-validate:sl='{required: true}' class="form-control" placeholder="" v-ref:sl>
              </div>
            </div>
            <label for="spje" class="col-sm-2 control-label">商品金额:</label>
            <div class="col-sm-3">
              <input type="number" v-model="model.spje" class="form-control" placeholder="0.00" disabled>
            </div>
          </div>
        </div>
      </form>
      <div class="col-lg-12" style="text-align:right;margin-top:30px;margin-right:50px;">
      <button class="btn btn-success" @click="confirm">开票</button>
      <button class="btn btn-default" @click="clean">取消</button>
  </div>
  </validator>
  </div>
  <paper-ticket-bill :show="paperticket" :data='row'  @toggle="closeticket"></paper-ticket-bill>
  <modal :show.sync="serachshow"  v-ref:modal large backdrop="false" >
    <header slot="modal-header" class="modal-header">
      <button type="button" class="close" @click="cancelsearch"><span>&times;</span></button>
      <h3 class="modal-title">查看发票</h3>
    </header>
    <article slot="modal-body" class="modal-body">
      <iframe :src="f_sign_url" v-if="f_sign_url" width="100%" height="500px">
      </iframe>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-default" @click='cancelsearch()'>取消</button>
    </footer>
  </modal>
</template>

<script>
  import Vue from 'vue'
  import co from 'co'
  export default {
    title: '自定义开票',
    name: 'CustomInvoice',
    data () {
      return {
        model: {
          spje:0
        },
        paperticket:false,
        row:{},
        serachshow:false,
        f_sign_url:''
      }
    },
    ready () {
    },
    methods: {
      cancelsearch(){
        this.serachshow=false
        this.clean()
      },
      closeticket(){
        this.paperticket=false
        this.row={}
        this.clean()
      },
      clean () {
        this.model = {}
        this.$dispatch('refresh', this.data)
      },
       confirm () {
          if(this.model.f_print!='电子发票'){
            if(!this.model.f_buy_id){
              return this.$showAlert("开具纸质专票或纸质普票时，纳税人识别号必填","warning",3000)
            }else if(!this.model.f_address_phone){
              return this.$showAlert("开具纸质专票或纸质普票时，购货方地址电话必填","warning",3000)
            }else if(!this.model.f_buy_openbank){
              return this.$showAlert("开具纸质专票或纸质普票时，开户行账号必填","warning",3000)
            }
          }else if(this.model.f_print=='电子发票'&&this.model.f_user_type=='非民用'){
            if(!this.model.f_buy_id){
              return this.$showAlert("开具非民用电子发票，纳税人识别号必填","warning",3000)
            }else if(!this.model.f_address_phone){
              return this.$showAlert("开具非民用电子发票，购货方地址电话必填","warning",3000)
            }else if(!this.model.f_buy_openbank){
              return this.$showAlert("开具非民用电子发票，开户行账号必填","warning",3000)
            }
          }
         this.model.f_operator = this.$login.f.name
         this.model.f_filiale = this.$login.f.f_fengongsi
         this.model.f_outlets = this.$login.f.f_parentname
         this.model.f_filialeids = this.$login.f.f_orgids
         this.model.f_orgstr = this.$login.f.orgpathstr
         this.model.daxie=Number(this.model.spje)
        this.$InvoiceService.custOpen(this.model,this.model.f_print).then((res)=>{
            if(this.model.f_print=='电子发票'){
              this.f_sign_url=res.f_bill_url
              this.serachshow=true
            }else{
              this.row.eticketid=res.f_eticket_id
              this.paperticket=true
            }
        })
      },
    },
    watch:{
      'model.spsl'(){
         this.model.spje=this.model.spsl*this.model.spdj
      },
      'model.spdj'(){
        this.model.spje=this.model.spsl*this.model.spdj
      }
    },
    computed: {
      invoicetype () {
        return this.$appdata.getParam('发票打印类型')
      },
      radetname () {
        return this.$appdata.getParam('商品名称')
      },
      userType () {
        return this.$appdata.getParam('用户类型')
      },

    }
  }
</script>

<style scoped>

</style>
