<style scoped>
    .itable>tbody>tr:hover {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    background-color: #F5F5F5 !important;
}
 .itable tr td{
  border:1px solid #EECBBA !important;
 }
 table th{
   border-bottom: 1px solid #EECBBA !important;
 }
 .itable>tbody>tr>td {
    vertical-align: top;
    border-bottom: 1px solid #c8c8c8;
    word-break: break-all;
    padding: 10px 0px;
}
.pd-form .form-group .control.control-date .text-and{
  background: #fff !important;
  height: 32px;

}

 .itable-td-long-text.itable tr td{
  border:1px solid #F5F5F5 !important;
 }
.itable-td-long-text.itable>tbody>tr>td{
   border-bottom: 1px solid #fff !important;
}
.f-none{
  float: none !important;
}
.w-100{
  width: 100%;
}
</style>
<template>
  <div class="container resource close-left-menu contaNEW">
    <div class="pop-banner clearfix">
      	<div class="operate-btns">
				  <!-- <a v-on:click="exportContentGood()" class="fbtn fb-Print2 ml-10 mr-10">导出</a> -->
          <a class="fbtn fb-save ml-10 mr-10" @click='save'>保存</a>
          <a class="fbtn fb-rename ml-10 mr-10" @click='addInvoice'>再开一张</a>
			</div>
      <h3 class="current-module">发票管理</h3>
    </div>
    <!--采购目录 start-->
    <div class="purchase-plan">
        <div class="from-button" style='margin:20px auto;margin-left:38%;'>
          <a href="javascript:;" class="green-button icon addfp active" >新录发票<i>|</i></a>
          <a href="javascript:;" class="green-button icon addfp2" v-link='{path:"/invoiceManage2"}'>已录入发票</a>
        </div>
   <!--    <div style='margin:20px auto;margin-left:38%;'>
        <a href="javascript:;" class="btn button-green active">新录发票</a>
        <a href="javascript:;" class="btn button-green ml-40">已录入发票</a>
      </div> -->
        
      <div class="pd-form">
        <div class="group-row">
          <div class="form-group form-label must">
            <label for="cn11" class="label">发票类型</label>
            <div class="control input-has-btn ">
              <select v-model="invoicetype" class="inp4" id='cn6'>
                <option value="01">增值税普通发票</option>
                <option value="02">增值税专用发票</option>
              </select>
            </div>
          </div>
          <div class="form-group form-label must">
            <label for="cn22" class="label">发票号</label>
            <div class="control">
              <input type="text" id="cn22" v-model="invoiceno" v-bind:disabled="disabled" class="inp3">
            </div>
          </div>
        </div>
        <div class="group-row">
          <div class="form-group form-label must">
            <div class="control input-has-btn ">
             <datepicker :target.sync="invoicetime" :readonly="readonlyFlag" title='发票日期' placeholder="发票日期"styleobj="width:100% !important;"></datepicker>
            </div>
          </div>
          <div class="form-group form-label">
            <label for="cn28" class="label">发票代码</label>
            <div class="control">
              <input type="text" id="cn28" v-model="invoicecode" v-bind:disabled="disabled" class="inp4">
            </div>
          </div>
        </div>
        <div class="group-row">
          <div class="form-group form-label">
            <div class="control control-date" style="height:34px;overflow: inherit;">
              <div style="width: 42%;float: left">
                <datepicker :target.sync='begindate' :readonly="readonlyFlag" title="出库开始日期" placeholder="出库开始日期"styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
              </div>
              <span class="text-and" style="width: 45px">—</span>
              <div style="width: 48%;float: right;">
                <datepicker :target.sync="enddate" :readonly="readonlyFlag" title="出库结束日期" placeholder="出库结束日期"styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;"></datepicker>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <table class="itable itable-thead-13px">
        <tbody>
          <tr>
            <th class="w10"></th>
            <th class="w150"></th>
            <th class="w100"></th>
            <th class="w80"></th>
            <th class="w100"></th>
            <th class="w10"></th>
            <th class="w80"></th>
            <th class="w150"></th>
            <th class="w80"></th>
            <th class="w100"></th>
            <th class="w80"></th>
          </tr>
          <tr>
            <td rowspan="4" class="v-middle">购货单位</td>
            <td class="v-middle">名称</td>
            <td colspan="3">
              <select   v-model='medguid'>
                <option v-for='item in medList' :value="item.medguid">{{item.medname}}</option>
              </select>
            </td>
            <td rowspan="4" class="v-middle">上传发票</td>
            <td rowspan="4" colspan="5">
                  <uploads v-bind:class="['pic-upload']" :display="'block'"  id="showupload" v-if="uploads.length==0"
                    v-on:file-change="fileChange" v-bind:multiple="false"> 
                        <img class="avatar" src="/images/default-one.png" alt="默认头像" style="height: 100px; width: 30%; margin-left: 0%; margin-top: 10%;">
                  </uploads>

                    <imagebox v-bind:imgarr="[{img:original}]"  class='w-100'>
                    <div class="pic-upload" id="show0" v-if="uploads.length>0" :style="{backgroundImage:'url('+(uploads[0].path)+')'}"
                    style='background-position: 50% 50%;background-repeat:no-repeat;background-size: contain;height:100px;margin-left: 0%; margin-top: 10%;'>
                    </div>
                      </imagebox>
                  
                  <a href="javascript:;" class="btn button-green mt-20" v-if="uploads.length>0" @click='uploads=[]'>修改</a>
                
                    <!-- <a href="javascript:;" class="btn button-green mt-20 fr" v-if="uploads.length>0">放大</a> -->
                
            </td>
          </tr>
           <tr>
            <td>纳税人识别号</td>
            <td colspan="3"><input type="text" v-model='invoicetaxpayerid'></td>
          </tr>
           <tr>
            <td>地址、电话</td>
            <td colspan="3"><input type="text" v-model='invoiceaddress'></td>
          </tr>
          <tr>
            <td>开户行及账户</td>
            <td colspan="3"><input type="text" v-model='invoicebank'></td>
          </tr>
          <tr>
            <td colspan="2">商品名称</td>
            <td>规格型号</td>
            <td>单位</td>
            <td>数量</td>
            <td colspan="2">单价</td>
            <td>金额</td>
            <td>税率</td>
            <td>税额</td>
            <td>操作</td>
          </tr>
          <tr v-for='item in trsettlemvs'>
            <td colspan="2">{{item.goodsname}}</td>
            <td>{{item.goodsspec}}</td>
            <td>{{item.supplier_unit}}</td>
            <td><input type="number" v-model="item.qty" @change='verify($index,item)' style='width:80%;'></td>
            <td colspan="2">{{item.Nprice}}</td>
            <td>{{item.Ninvoiceamount}}</td>
            <td><input type="number" v-model='item.invoicerate' @change='verify($index,item)' style='width:80%;'>%</td>
            <td>{{item.invoicerateprice}}</td>
            <td>
               <a href="javascript:;" class="btn button-red" @click='remove($index)'>删除</a>
            </td>
          </tr>
          <tr>
            <td colspan="2" class="t-left pr10 pl10">
              <div class="control w230 h-30 fl">
                      <input id="cn1" type="text" v-model="goodsname" title='请输入商品名称' @click='state=true' placeholder="商品名称、编号、厂商、注册证号" maxlength="50" v-rule>
                      <div class="select-template" id="searchMore" v-if='state'>
                        <div class="div-select before-none" style="width:100%;">
                          <ul  style="z-index:3;top:0px;width:215%; margin-top: 0px;overflow:auto; margin-bottom:60px;"  id="sortable" :class='{"hei400": goodsList.length>3}'>
                            <li class="div-select-item pl10 pr10 hover-none" style='line-height:20px;height:auto;'>
                              <table class="itable itable-thead-13px itable-td-long-text">
                                  <thead id="t_header">
                          </thead>
                          <tbody>
                            <tr v-for="item in goodsList" @click='goodsData(item)' track-by="$index">
                              <td class="w210 t-left">
                                <div class="p-lr-10"> {{item.goodscode}}<br/>
                                  <span class="p-tit-green" style=' color: #4aa8e5;'>{{item.goodsname}}</span>
                                </div>
                              </td>
                              <td class="t-left pr10">{{item.goodsspec}}</td>
                              <td class="t-left pr10">{{item.producer}}</td>
                              <td class="t-left pr10">{{item.price}}元/{{item.supplier_unit}}</td>
                            </tr>     
                          </tbody>
                        </table>
                            </li>
                            <li class="div-select-item pl10 pr10" v-show="goodsList.length==0 || goodsList == undefined">
                                <span style="width:100%;">未查询到结果！</span>
                            </li>
                          </ul> 
                        </div>
                      </div>
                    </div>
            </td>
            <td class="t-left pl10">
              <!-- M型<br>山东玉源乳胶手套有限 -->
            </td>
            <td></td>
            <td class="pr10 pl10"><input type="text" v-model="" value=''></td>
            <td colspan="2"></td>
            <td></td>
            <td><input type="text" value='' style='width:80%;'>%</td>
            <td>
            </td>
            <td></td>
          </tr>
          <tr>
            <td colspan="7">合计</td>
            <td>{{priceS}}元</td>
            <td></td>
            <td colspan="2">{{invoiceratepriceS}}元</td>
          </tr>
          <tr>
            <td colspan="2">税额合计</td>
            <td colspan="4">(大写){{ThepriceS  }}</td>
            <td colspan="5">(小写){{(priceS*1+invoiceratepriceS*1)| numDigit 2}} 元</td>
          </tr>
          <!-- <tr v-for="pro in getContentList">
            <td>{{$index + 1}}</td>
            <td class="t-left pr10">
              {{pro.medgoodscode}}<br>
              <span class="text-color-blue">{{pro.medgoodsname}}</span><br>
              {{pro.medgoodsspec}}<br>
              {{pro.medproducer}}<br>
              {{pro.medregistkey}}
            </td>
            <td class="t-left pr10">
              {{pro.supgoodscode}}<br>
              <span class="text-color-blue">{{pro.supgoodsname}}</span><br>
              {{pro.supgoodsspec}}<br>
              {{pro.supproducer}}<br>
              {{pro.supregistkey}}
            </td>
          </tr> -->
        </tbody>
      </table>

    <!--   <div class="pagination m-20-0">
        <em class="page">明细条目数【{{ search.total }}】</em>
        <pagination @page-change="getData()" :page-no.sync="search.page" :total-pages.sync="search.totalPages">
        </pagination>
      </div> -->
    </div>
    <!--采购目录 end-->
  </div>
</template>
<script>
  module.exports = {
    data: function () {
      return {
        search: {
          pageSize: 50,
          page: 1,
          totalPages: 0,
          total: 0,
        },
        avatar:'',
        medguid:'',
        medList:'',
        enddate:'',
        begindate:'',
        goodsname:'',
        state:false,
        trsettlemvs:[],
        goodsList:[],
        invoicetype:'01',
        invoicecode:'',
        invoicetime:'',
        invoiceno:'',
        invoicetaxpayerid:'',
        invoiceaddress:'',
        invoicebank:'',
        priceS:0,
        invoiceratepriceS:0,
        invoiceratepriceS2:0,
        uploads:[],
        path:'',
        ThepriceS:'零',
        original:''
      };
    },

    methods: {
      //加载数据   
       fileChange:function(data){
        var self = this, imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
        var backObj=JSON.parse(data)
        data=backObj.data;
        this.path=JSON.stringify(data);
        for(var i=0;i<data.length;i++){
          var path=imgReg.test(data[i].thumbnail.path) ? data[i].thumbnail.path : data[i].thumbnail.path+data[i].thumbnail.name;
          self.original=imgReg.test(data[i].original.path) ? data[i].original.path : data[i].original.path+data[i].original.name;
          var json='{"path":"'+path+'"}';
          var obj=JSON.parse(json);
          obj.pic=JSON.stringify(data);
          this.uploads.push(obj);

        }
      },   
      getData: function () {
        var self = this;
        // self.enddate=self.GetDate().enddate;
        // self.begindate=self.GetDate().begindate;
        

        Ajax.post('/supplierReport/getSupRelationMed')
          .then(function (response) {
            var data = response.data.data;
            
            if(response.data.errorCode==0){
                self.$set('medList',data)
                self.$set('medguid',data[0].medguid)
            }
          })
      },
      // 检索的商品 选中
      goodsData:function(item){
        var self = this;
        var state=false;
       
          if(self.trsettlemvs==0){
            self.trsettlemvs.push(item);
            self.verify(0,item);
          }else{
            for(var a=0;a<self.trsettlemvs.length;a++){
  
              if(self.trsettlemvs[a].supplierdoguid==item.supplierdoguid && self.trsettlemvs[a].supplierdorowno==item.supplierdorowno){
                  layer.msg('该商品已存在');
                state=true;
              }
            }
            if(!state){
              self.trsettlemvs.push(item);
              self.verify(self.trsettlemvs.length-1,item);
            }

          }

      
          self.$set('state',false)
          self.$set('goodsname','');
          self.$set('goodsList',[]);
        
      },
      decimals:function(x, digit) {
        var digit=2;
        if((x || '') == '') {
          x = 0;
        }

        var beishu = Math.pow(10, digit);
        var f = parseFloat(x);
        if(isNaN(f)) {
          return false;
        }
        var f = Math.round(x * beishu) / beishu;
        var s = f.toString();
        var rs = s.indexOf('.');
        if(rs < 0) {
          rs = s.length;
          s += '.';
        }
        while(s.length <= rs + digit) {
          s += '0';
        }
        return s;
      },
      verify:function(index,item){
        var self = this;
        // 原总额
         item.invoiceamount=self.decimals(item.qty*item.price);

         // 税额
         item.invoicerateprice=self.decimals(item.qty*item.price*(item.invoicerate*1)/100);
         // 现总额
         item.Ninvoiceamount=self.decimals(item.invoiceamount-item.invoicerateprice);
         // 现单价 
         item.Nprice= self.decimals(item.Ninvoiceamount/item.qty);

         self.trsettlemvs.splice( index,1, Object.assign({}, self.trsettlemvs[index]))

      },
      getList: function() {
        var self = this;

        Ajax.post('/supplierReport/getSupplierDoGoods', 
          {medguid:self.medguid,enddate:self.enddate,
            begindate:self.begindate,goodsname:self.goodsname})
          .then(function(response) {
            var data = response.data.data;
            if(response.data.errorCode == 0) {
                 for(var i=0;i<data.length;i++){

                  data[i].invoicerate=17;
                 
                }
              self.$set('goodsList',data);
            } else {
                layer.msg(response.data.message);
            }
          });
      },
 
      // 再开一张
      addInvoice:function(){
          var self = this;
          window.location.reload();

      },
      setHeadImg:function(){
        this.$set('user.pictcontent',this.avatar);
    },
      save:function(){
         var self = this;

          for(var a=0;a<self.trsettlemvs.length;a++){
              self.trsettlemvs[a].medguid=self.medguid;
              self.trsettlemvs[a].invoicetaxpayerid=self.invoicetaxpayerid;
              self.trsettlemvs[a].invoiceaddress=self.invoiceaddress;
              self.trsettlemvs[a].invoicebank=self.invoicebank;
              self.trsettlemvs[a].invoicetype=self.invoicetype;
              self.trsettlemvs[a].invoiceno=self.invoiceno;
              self.trsettlemvs[a].invoicetime=self.invoicetime;
              self.trsettlemvs[a].invoicecode=self.invoicecode;
              self.trsettlemvs[a].pictcontent=self.path;
              self.trsettlemvs[a].invoicerateprice= self.trsettlemvs[a].invoicerateprice;
              self.trsettlemvs[a].invoiceamount = (self.priceS*1+self.invoiceratepriceS*1);
           }
  

        Ajax.post('/supplierReport/addTrSettleMvInv', JSON.stringify(self.trsettlemvs))
          .then(function(response) {
            var data = response.data.data;
            if(response.data.errorCode == 0) {
                layer.msg('保存成功！');
               window.location.reload();
              // self.$set('goodsList',data);
            } else {
                layer.msg(response.data.message);
            }
          });
        
      },
      remove:function(index){
        var self = this;
        self.trsettlemvs.splice( index,1);
      }

  },
    route: {
      activate: function () {
        this.getData();
      }
    },
    watch:{
      'goodsname':function(){
        if(this.goodsname.trim()){
          this.getList();
        }
        
      },
      'trsettlemvs':{
        handler(curVal,oldVal){   
          var self = this;
          var priceS=0;
          var invoiceratepriceS=0;
          var invoiceratepriceS2=0;

          for(var i=0;i<self.trsettlemvs.length;i++){
            //总金额
            priceS+=self.trsettlemvs[i].qty*self.trsettlemvs[i].Nprice; 
            // 总税率
            invoiceratepriceS+=self.trsettlemvs[i].qty*self.trsettlemvs[i].price*(self.trsettlemvs[i].invoicerate*1)/100; 


            self.ThepriceS=self.Chinese(priceS+invoiceratepriceS);
            if(self.ThepriceS==''){
                self.ThepriceS='零';
             
            }
          }
          self.$set('priceS',self.decimals(priceS));
          self.$set('invoiceratepriceS',self.decimals(invoiceratepriceS));
        },
        deep:true
      }
      
    },
    
  };
</script>