<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-remove ml-10 mr-10" @click='remove("all")'>批量废弃</a>
          <a class="fbtn fb-download ml-10 mr-10" @click='download'>导出</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" v-link='{path:"/invoiceManage"}'>新录发票<i>|</i></a>
          <a href="javascript:;" class="green-button icon addfp2 active" >已录入发票</a>
        </div>
      <div class="pd-form fast-search-form">
        <div class="group-row">
          <div class="form-group form-label">
            <div class="control">    
              <input type="text" id="cn2" v-model="search.ckbillno" title='出库单号' placeholder="出库单号"> </div>
          </div>
          <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='search.ckbegindate' :readonly="readonlyFlag" title="出库开始日期" placeholder="出库开始日期"styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
              </div>
              <span class="text-and" style="width: 45.7px">—</span>
              <div style="width: 48%;float: right;">
                <datepicker :target.sync="search.ckenddate" :readonly="readonlyFlag" title="出库结束日期" placeholder="出库结束日期"styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;"></datepicker>
              </div>
            </div>
          </div>
          
        </div>
        <div class="group-row">
          <div class="form-group form-label">
            <div class="control">
              <input type="text" id="cn1" v-model='search.planbillno' title='订单号' placeholder="订单号"> </div>
          </div>
          <div class="form-group form-label">
            <label for="cc5" class="label">医院</label>
            <div class="control">
              <select v-model='search.medguid' id='cc5' class="inp2">
                <option value="">请选择</option>
                <option v-for='item in medListS' :value="item.medguid">{{item.medname}}</option>
              </select>
              <!-- <input type="text" id="cn2" v-model="proList.medname" title='医院' placeholder="医院"> </div> -->
            </div>
          </div>
        </div>
        <div class="group-row">
          <div class="form-group form-label">
            <div class="control">
              <input type="text" id="cn11" v-model='search.invoiceno' title='发票号' placeholder="发票号"> </div>
          </div>
          <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='search.begindate' :readonly="readonlyFlag" title="发票开始日期" placeholder="发票开始日期"styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
              </div>
              <span class="text-and" style="width: 45.7px">—</span>
              <div style="width: 48%;float: right;">
                <datepicker :target.sync="search.enddate" :readonly="readonlyFlag" title="发票结束日期" placeholder="发票结束日期"styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;"></datepicker>
              </div>
            </div>
          </div>
        </div>
        <div class="group-row">
          <div class="form-group form-label">
            <div class="control">
              <input type="text" id="cn13" v-model='search.goodsname' title='商品' placeholder="商品"> </div>
          </div>
        </div>

 

        <div class="group-row t-right">
          <button class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle" @click="getData(true)">查 询</button>
        </div>
      </div>
      <table class="itable itable-td-long-text">
        <thead id='t_header'>
          <tr>
            <th class="w50">
                  <div class="checkbox-control">
                     <input type="checkbox" name="cb" id="cball0" v-model="allFlag">
                        <label class="checkbox" for="cball0">序号</label>
                  </div>
            </th>
            <th class="w200">出库信息</th>
            <th class="w200">商品信息</th>
            <th class="w100">批号</th>
             <th class="w100">金额</th>
             <th class="w80">发票号</th>
            <th class="w120">发票总金额</th>
            <th class="w100">图片</th>
            <th class="w100">操作</th>
            
          </tr>
        </thead>
        <tbody>
          <tr v-if="list==null || list.length==0">
            <td colspan="10">
              暂无符合条件的记录
            </td>

          </tr>
          <tr v-for='item in list'>
            <td>
              <div class="checkbox-control">
                     <input type="checkbox" name="cb" :id="item.rowno+item.guid" v-model='item.checked'>
                        <label class="checkbox" :for="item.rowno+item.guid"> {{$index+1}}</label>
                  </div>
           </td>
            <td class="t-left pr10">
              {{item.supplierdodate | getYMD}}
              <br>
               <span class="product-tit p-tit-green">{{item.medname}} </span>
              <br>
              出库单：{{item.supplierdobillno}}
              <br>
              订  单：{{item.supplierpobillno}}
            </td>
            <td class="t-left pr10">
              {{item.goodscode}} <br>
              <span class="product-tit p-tit-green">{{item.goodsname}} </span><br>
              {{item.goodsspec}} <br>
              {{item.manufacturer}} <br>
              {{item.registkey}}
            </td>
            <td>
              {{item.lot}} <br>
              {{item.productiondate | getYMD}} <br>
              {{item.expiredate | getYMD}}
            </td>
             <td>
              {{item.amount}}元
            </td>
            <td class='t-left'>
              {{item.invoiceno}}
            </td>
            <td>
              {{item.invoiceamount}}元
            </td>
           <td style='padding-left:20px;'>
             <imagebox v-bind:imgarr="item.pictcontent | original">
                    <img class="pro-pic pro-pic-lg" style="margin-top: 0px;" :src="item.pictcontent | thumbnail">
              </imagebox>
           </td>
           <td>
             <a href="javascript:;" class="btn button-red" @click='remove(item)'>作废</a>
           </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,
          kbegindate:'',
          ckenddate:'',
          ckbillno:'',
          planbillno:'',
          medguid:'',
          invoiceno:'',
          begindate:'',
          enddate:'',
          goodsname:'' 
        },
        allFlag:false,
        medListS:[],
        list:[]
      };
    },

    methods: {
      //加载数据      
     
      getData: function (falg) {
        var self = this;
        if(falg){
          self.search.page=1;
        }

        Ajax.post('/supplierReport/getTrsettlemvsSup',self.search)
          .then(function (response) {
            var data = response.data.data;
            if(response.data.errorCode==0){
              for(var a=0;a<data.list.length;a++){
                data.list[a].checked=false;
                
              }
              self.search.totalPages = data.totalPages;
              self.search.pageNo = data.pageNo;
              self.search.total = data.total;
              self.$set('list',data.list);
            }else{
                layer.msg(response.data.message);
            }
            // window.open(data);
          })
        
      },
       medList: function () {
        var self = this;
        
        self.search.enddate=self.GetDate().enddate;
        self.search.begindate=self.GetDate().begindate;

        Ajax.post('/supplierReport/getSupRelationMed')
          .then(function (response) {
            var data = response.data.data;
            
            if(response.data.errorCode==0){
                self.$set('medListS',data)
            }else{
                layer.msg(response.data.message);
            }
          })
      },
      remove:function(item){
        var self = this;
        var arr=[];
        if(item=="all"){
            for(var a=0;a<self.list.length;a++){
                if(self.list[a].checked){
                  arr.push(self.list[a]);
                }
            }
         }else{
              arr.push(item);
         }
         if(arr.length==0){
             layer.msg('请选择需要废弃的发票！');
          return;
         }

          Ajax.post('/supplierReport/delTrsettlemvs',JSON.stringify(arr))
          .then(function (response) {
            var data = response.data.data;
            
            if(response.data.errorCode==0){
                layer.msg('废弃成功！');
                 self.getData(true);

            }else{
                layer.msg(response.data.message);

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

          Ajax.post('/supplierReport/exportTrsettlemvs',self.search)
          .then(function (response) {
            var data = response.data.data;
            // window.open(data);
            if(response.data.errorCode > 0) {
                layer.msg(response.data.message);

            } else {
              window.open(response.data);
            }
          })
      }
    },
    route: {
      activate: function () {
        this.medList();
        this.getData(true);
      }
    },
    watch:{
      'allFlag':function(){
        var self = this;
        for(var a=0;a<self.list.length;a++){
               self.list[a].checked=self.allFlag;
          }
      }
    }
    
  };
</script>