<template>
	
	<div class="container resource close-left-menu">

  <div class="pop-banner clearfix">
    <div class="operate-btns">
      <a href="javascript:void(0)" class="fbtn fb-download">导出</a>
    </div>
    <div class="operate-btns">
    </div> 
    <h3 class="current-module">配送商库存查询</h3>
  </div>
  

  <!--order-orderlist-view start-->
  <div class="order-orderlist-view clearfix">
    
    <div class="pd-form form-label4em mb-40 fast-search-form">
      <div class="group-row">
        <div class="form-group">
          <div class="control">
            <input type="text" v-model="goodsname" placeholder="商品信息" title="商品信息">
          </div>
        </div>
        <div class="form-group">
            <label for="cn3" class="label"><!-- 出库日期 --></label>
            <div class="control control-date" style="height:34px;overflow: inherit;">
                <div style="width:44%;float:left;height:32px;">
                    <datepicker :target.sync="productiondate" :readonly="readonlyFlag" title='开始日期' placeholder='开始日期' styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
                </div>
                <span class="text-and">-</span>
                <div style="width:48%;float:left;height:32px;">
                    <datepicker :target.sync="expiredate" :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">
          <div class="control">
            <input type="text" v-model="storeRoom" placeholder="库房" title="库房">
          </div>
        </div>
        <div class="form-group">
          <div class="control">
            <input type="text" v-model="shelves" placeholder="货位" title="货位">
          </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">查 询</button>
      </div>
    </div>

    <table class="itable itable-bordertop itable-td-long-text">
      <thead>
        <tr>
          <th class="w40">序号</th>
          <th class="w130">库房</th>
          <th class="w130">货位</th>
          <th class="w260">商品</th>
          <th class="w80">单位</th>
          <th class="w80">库存可用数量</th>
          <th class="w80">批号</th>
          <th class="w80">生产日期</th>
          <th class="w80">有效期</th>
          <!-- <th class="w80">操作</th> -->
        </tr>
      </thead>
      <tbody v-for="item in list">
        <tr>
          <td>{{$index+1}}
            <div class="pro-pic" :style="{'background-image': 'url('+item.pictcontent.thumbnail.photo+')'}">
              <span class="pic-max blue-search"></span>
            </div>
          </td>
          <td>{{item.storeroom}}</td>
          <td>{{item.shelves}}</td>
          <td class="v-middle t-left">
            <div class="p-lr-10">
              {{item.GoodsCode}}<br>
              <span class="p-tit-green">{{item.goodsname}}</span><br>
              {{item.goodsspec}}<br>
              {{item.Producer}}<br>
              {{item.registkey}}
            </div>
          </td>
          <td class="v-middle">{{item.unitstyle}}</td>
          <td class="v-middle">{{item.stockqty}}</td>
          <td class="v-middle">{{item.lot}}</td>
          <td class="v-middle">{{item.productiondate}}</td>
          <td class="v-middle">{{item.expiredate}}</td>
        <!--   <td class="v-middle">
            <a class="btn-d btn-d-activate" href="settlement-hospital-list2.html">明细</a>
          </td> -->
        </tr>
      </tbody>
    </table>

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


  </div>
  <!--order-orderlist-view end-->

</div>
</template>
<script>
module.exports={
  data: function(){
    return {      
      list:{},
      goodsname:'',
      storeRoom:'',
      shelves:'',
      productiondate:'',
      expiredate:'',
      search:{
          page: 1,
          totalPages: 1,
          pageSize:5
      },
    };
  },
  methods: {
    getData: function(){
      var self = this;

      Ajax.post('/distributorReport/getDistributorStocklist',{
        'page':self.search.page,'pageSize':5,'goodsname':self.goodsname,
        'storeRoom':self.storeRoom,'shelves':self.shelves,'productiondate':self.productiondate,
        'expiredate':self.expiredate
      }).
          then(function(response){
            var res=response.data.data;
            var list = res.list || [], imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
            list.map(l => {
              l.pictcontent.thumbnail.photo = imgReg.test(l.pictcontent.thumbnail.path) ? l.pictcontent.thumbnail.path : l.pictcontent.thumbnail.path + l.pictcontent.thumbnail.name;
            })
            self.list=res.list;
            self.search.page=res.pageNo;
            self.search.totalPages=res.totalPages;
        })    
    },
   },
  route:{
    activate : function(){
      this.getData();
    }
  }
};
</script>