<template>
<div class="container resource close-left-menu" style="min-height: 490px;">
  <div class="pop-banner clearfix">
<!--     <div class="operate-btns"> 
        <a   class="fbtn fb-return" v-on:click="go">返回</a> 
      </div> -->
      <h3 class="current-module">生产厂商发票跟踪</h3>
  </div>
   <div class="purchase-add-plan">
      <div class="pd-form fast-search-form">
          <div class="group-row">
            <div class="form-group">
              <label for="cn1" class="label label-6em">供应商</label>
              <div class="control w370">
                <input type="text" v-model="search.suppliername" id="cn1">
              </div>
            </div>
            <div class="form-group">
              <label for="cn11" class="label label-6em">商品</label>
              <div class="control">
                <input type="text" v-model="search.goodsname" id="cn11">
              </div>
            </div>
          </div>
          <div class="group-row">
            <div class="form-group data200">
              <label for="cn3" class="label">发票日期</label>
              <div class="control control-date">
                <div style="width:58%;float:left;">
                  <datepicker :target.sync="search.startdate"></datepicker>
                </div>
                <span class="text-and t-center" style="width: 39px">至</span>
                <div style="width:19%;float:left;">
                  <datepicker :target.sync="search.enddate"></datepicker>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="cn11" class="label label-6em">发票号</label>
              <div class="control">
                <input type="text" v-model="search.invoiceno" id="cn11">
              </div>
            </div>
          </div>
          <div class="group-row">
            <div class="form-group">
              <label for="cn8" class="label">生产厂商</label>
              <div class="control w370">
                <input type="text" v-model="search.manufacturer" id="cn11">
              </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"
            v-on:click="getData('search')">查 询</button>
          </div>
        </div>
    
 
        <div class="supplylist clearfix supply-select">
          <div class="supplylist-table ml-0">
            <div id="leftCtable" class="ctable ct-parentr" style='border-bottom: 1px solid rgba(96,111,122,.2);'>
              <div class="ct-head">
                <span class="ct-col w60">序号</span>
                <span class="ct-col w150">供应商</span>
                <span class="ct-col w200">商品</span>
                <span class="ct-col w150">生产厂商</span>
                <span class="ct-col w120">发票号</span>
                <span class="ct-col w100">发票图片</span>
                <span class="ct-col w80">发票日期  </span>
                <span class="ct-col w130">销售明细</span>
              </div>
              <div class="ct-row" v-if="list.length==null || list.length==0">
                <div class="row-line">
                  <span class="ct-col" style="width: 1003px;">    暂无数据    </span>
                </div>
              </div>
              <div class="ct-row" id="div1{{$index}}" v-for="(indOne,item) in list">
                <div class="row-line">
                  <span class="ct-col w60"> {{$index + 1}}       </span>
                  <span class="ct-col w150 t-left pr10">{{item.suppliername }}  </span>
                  <span class="ct-col w200 t-left pr10">{{item.goodsname}}   </span>
                  <span class="ct-col w150 t-left pr10">{{item.manufacturer}}      </span>
                  <span class="ct-col w120 t-left pr10">{{item.invoiceno }}      </span>
                  <span class="ct-col w80">
                    <div style="display:inline-block;margin-left:10px;" class="toggle-image">
                          <div class="pro-pic"  :style="'background:url('+item.path+') no-repeat;width:45px;height:40px;background-size:contain;'">
                              <imagebox v-bind:imgarr="[{img:item.original}]">
                                  <span class="pic-max blue-search"></span>
                              </imagebox>
                         </div>
                    </div>     
                  </span>
                  <span class="ct-col w100">{{item.invoicedate | getYMD}}   </span>
                 
                  <span class="ct-col w130" style='color: #1390e2!important;'><span @click='slidedown($index)'>{{item.pinguishu}}</span></span>
                </div>
                <div class="row-launch clearfix pd0" style='display:none;'>
                  <table class="itable mb-30">
                    <thead>
                      <tr>
                        <th class="w60">序号</th>
                        <th class="w100">医院</th>
                        <th class="w100">销售日期</th>
                        <th class="w100">数量</th>
                        <th class="w100">单价</th>
                        <th class="w100">金额</th>
                        <th class="w60">发票号</th>
                        <th class="w100">发票图</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-if="item.map==null || item.map.length==0">
                        <td colspan="9">暂无符合条件的记录</td>
                      </tr>
                      <tr v-for="(indTwo,sup) in item.map">
                        <td class="pt7">{{ $index + 1 }}</td>
                        <td>
                          {{sup.medname}}
                        </td>
                        <td>{{sup.dodate | getYMD}} </td>
                        <td>{{sup.qty}} </td>
                        <td>{{sup.price}}元 </td>
                        <td>{{sup.amount}}元 </td>
                        <td>{{sup.invoiceno}}</td>
                        <td>
                          <div class="pro-pic"  :style="'background:url('+item.path+') no-repeat;width:45px;height:40px;background-size:contain;'">
                              <imagebox v-bind:imgarr="[{img:item.original}]">
                                  <span class="pic-max blue-search"></span>
                              </imagebox>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <div class="pagination mt-20 mb-40">
                    <pagination @page-change="getSup($index)" :class="['m-20-0']" :page-no.sync="searchSQ[$index].page" :total-pages.sync="searchSQ[$index].totalPages">
                    </pagination>
                  </div>
                  <div class="zip" style="bottom: -1px;" @click="slideup($index)"></div>
                </div>
              </div>
            </div>

          </div>
          <div class="pagination">
            <pagination @page-change="getData(false)" :class="['m-20-0']" :page-no.sync="search.page" :total-pages.sync="search.totalPages">
            </pagination>
          </div>
        </div>
      </div>

</div>
</template>
<script>
module.exports={
  data:function(){
    return {
      list:[],
      search:{
          pageSize: 50, 
          page: 1, 
          totalPages: 0,
          manufacturer:'',
          invoiceno:'',
          goodsname:'',
          suppliername:''
      },
      searchSQ:{
          pageSize: 10, 
          page: 1, 
          totalPages: 0,
          invoiceno:'',
          goodsguid:''
      },
      getHosList:[{}],
      supList:{},
      sh:{}
    }
  },methods:{
    getData:function(falg){//请求数据     
      if(falg){
        this.search.page=1;
      }
      Ajax.post('/api/getInvReport',
        this.search).then(function(res){
          var result=res.data;
          var imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
          if(result.errorCode==0){
             
              var list=result.data.list;
               for (var a=0;a<list.length;a++) {
                if(!list[a].invoicepic){
                  continue;
                }
                var img=JSON.parse(list[a].invoicepic);
                list[a].path= imgReg.test(img[0].thumbnail.path) ? img[0].thumbnail.path : img[0].thumbnail.path+img[0].thumbnail.name;
							  list[a].original=imgReg.test(img[0].original.path) ? img[0].original.path : img[0].original.path+img[0].original.name;
                // list.splice( a,1, Object.assign({}, list[a], {'img':img[0].original.path}));
              }
              this.$set('list',list);
              this.search.totalPages=result.data.totalPages
          }else{
            this.MessageBox.alert(result.errorCode);
          }
      }.bind(this))
    },
      getSup: function(index) {
        var self = this;
        self.searchSQ.goodsguid=self.list[index].goodsguid;
        self.searchSQ.invoiceno=self.list[index].invoiceno;
        
        Ajax.post('/api/getInvReportDetail', self.searchSQ)
          .then(function(response) {
            var data = response.data.data, imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
            if(response.data.errorCode == 0) {

              for (var a=0;a<data.list.length;a++) {
                if(!data.list[a].invoicepic){
                  continue;
                }
                var img=JSON.parse(data.list[a].invoicepic);
                data.list[a].path=imgReg.test(img[0].thumbnail.path) ? img[0].thumbnail.path : img[0].thumbnail.path+img[0].thumbnail.name;
                data.list[a].original=imgReg.test(img[0].original.path) ? img[0].original.path : img[0].original.path+img[0].original.name;
                // list.splice( a,1, Object.assign({}, list[a], {'img':img[0].original.path+img[0].original.name}));
              }
              self.$set('searchSQ[' + index + '].totalPages', data.totalPages);
              self.$set('searchSQ[' + index + '].page', data.page);
              self.$set('list[' + index + '].map', data.list);
              

            } else {
              self.MessageBox({ title: '提示',message: response.data.message, type: 'alert'});
            }
          })
      },
      slidedown: function(index) {
        var self = this;
        this.getSup(index);
        
        $(".ct-row:eq(" + index + ")").addClass("active");
        $(".row-launch:eq(" + index + ")").slideDown(400, function() {});

      },
      slideup: function(index) {
        var self = this;
        $(".row-launch:eq(" + index + ")").slideUp(400, function() {
          $(".ct-row:eq(" + index + ")").removeClass('active');
          $(".ct-col:eq(" + index + ")").removeClass('activate');
        });
      },
    },route:{
    activate:function(){
      this.getData();
    }
  }
}
</script>