<template>
  <div class="container resource close-left-menu contaNEW" style="min-height: 809px;">

  <div class="pop-banner clearfix">
    <!--  <div class="operate-btns">
      <a href="javascript:void(0)" class="fbtn fb-send">发送提醒</a>
    </div> -->
    <h3 class="current-module">采购计划追溯</h3>
  </div>


  <!--order-orderlist-view start-->
  <div class="order-orderlist-view clearfix">

    <div class="pd-form form-label4em mb-20 fast-search-form">
      <div class="group-row">
         <div class="form-group">
          <!-- <label for="cn1" class="label">计划单号</label> -->
          <div class="control">
            <input type="text" maxlength="17" v-rule v-model="billno" title='计划单号' placeholder='计划单号'>
          </div>
        </div>
        <div class="form-group">
          <!-- <label for="cn1" class="label">商品</label> -->
          <div class="control">
            <input type="text" maxlength="50" v-rule v-model="goodsname" title='商品' placeholder='商品'>
          </div>
        </div>
      </div>
      <div class="group-row">
        <div class="form-group">
          <!-- <label class="label">单据类型</label> -->
          <div class="control select-style">
            <select v-model="billtype">
               <option value="" style='display:none;' selected>单据类型</option>
               <option :value="ite.item"  v-for="ite in type">{{ite.basedataname}}</option>
            </select>
          </div>
        </div>
         <div class="form-group">
          <!-- <label for="cn1" class="label">制单日期</label> -->
          <div class="control control-date" style="height:34px;overflow: inherit;">
              <div style="width: 42%;float: left">
                <datepicker :target.sync='gtinputdate' :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="ltinputdate" :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">
          <!-- <label for="cn1" class="label">要货科室</label> -->
          <div class="control">
            <input type="text" maxlength="20" v-rule v-model="meddeptname" title='要货科室' placeholder='要货科室'>
          </div>
        </div>
        <div class="form-group">
          <!-- <label for="cn1" class="label">要货库房</label> -->
          <div class="control">
            <input type="text"  maxlength="20" v-rule v-model="medstorename" title='要货库房' placeholder='要货库房'>
          </div>
        </div>
      </div>
        <div class="group-row">
         <div class="form-group">
          <!-- <label for="cn1" class="label label-6em">供应商出库单</label> -->
          <div class="control">
            <input type="text" maxlength="17" v-rule v-model="dobillno" title='供应商出库单' placeholder='供应商出库单'>
          </div>
        </div>
        <div class="form-group">
          <!-- <label for="cn1" class="label">医院入库单</label> -->
          <div class="control">
            <input type="text" maxlength="17" v-rule v-model="wvbillno" title='医院入库单' placeholder='医院入库单'>
          </div>
        </div>
      </div>
       <div class="group-row">
         <div class="form-group">
          <!-- <label for="cn1" class="label">供应商</label> -->
          <div class="control">
            <input type="text" class="w700" maxlength="50" v-rule v-model="suppliername" title='供应商' placeholder='供应商'>
          </div>
        </div>
      </div>
       <div class="group-row">
          <div class="form-group">
          <!-- <label for="cn1" class="label">总金额</label> -->
          <div class="control control-date">
            <input type="number" v-model="gtdetailmoneysum" title='总金额' placeholder='总金额' style='height:32px;'>
            <span class="text-and">—</span>
            <input type="number" v-model="ltdetailmoneysum" style='height:32px;'>
          </div>
        </div>
      </div>
      <div class="group-row">
        <div class="form-group ">
          <label for="cn3" class="label">单据状态</label>
          <div class="control control-filtering control-filtering-green" style='width:870px;'>
            <a class="all active" href="javascript:;" :class="{'all active':billstate==''}"  @click="billstate=''">全部</a>
            <a class="option" href="javascript:;" :class="{'all active':billstate==1}"  @click="billstate=1">待提交</a>
            <a class="option" href="javascript:;" :class="{'all active':billstate==2}"  @click="billstate=2">待确认</a>
            <a class="option" href="javascript:;" :class="{'all active':billstate==3}"  @click="billstate=3">待出库</a>
            <a class="option" href="javascript:;" :class="{'all active':billstate==4}"  @click="billstate=4">部分出库</a>
            <a class="option" href="javascript:;" :class="{'all active':billstate==5}"  @click="billstate=5">全部出库</a>
            <a class="option" href="javascript:;" :class="{'all active':billstate==6}"  @click="billstate=6">部分入库</a>
            <a class="option" href="javascript:;" :class="{'all active':billstate==7}"  @click="billstate=7">已完结</a>
          </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-td-long-text">
      <thead id='t_header'>
        <tr>
          <th class="w50">序号</th>
          <th class="w100">计划单号</th>
          <th class="w100">制单日期</th>
          <th class="w100">期望到货日期</th>
          <th class="w70">品规数</th>
          <th class="w100">订单类型</th>
          <th class="w100">总金额(元)</th>
          <th class="w70">操作人</th>
          <th class="w100">备注</th>
          <th class="w130">操作</th>
        </tr>
      </thead>
      <tbody class="txt_v">
        <tr v-for="item in list">
          <td class="w30">{{$index+1}}</td>
          <td class="t-left pr10">{{item.billno}}</td>
          <td>{{item.inputdate|getYMD}} <br>{{item.inputdate|getHMS}} </td>
          <td>{{item.planenddate|getYMD}} <br> {{item.planenddate|getHMS}}</td>
          <td>{{item.detailrecordsum}}条</td>
          <td>{{item.dataintroduction}}</td>
          <td class="t-right pr10">{{item.detailmoneysum | numDigit 2 }}</td>
          <td>{{item.operatername}}</td>
          <td class="t-left pr10">{{item.memo}}</td>
          <td>
            <div class="from-button">
                 <a href="javascript:;" class="green-button p-lr-10" v-link="{path:'/excelQueryOrderList/'+item.guid+'/'+item.billno}">明细<i>|</i></a>
                 <a href="javascript:;" class="green-button p-lr-10" v-link="{path:'/planTrack/'+item.guid}">单据跟踪</a>
             </div>
  <!--             <a class="btn-d btn-d-activate" v-link="{path:'/excelQueryOrderList/'+item.guid+'/'+item.billno}">明细</a>
              <a class="btn-d btn-d-activate" v-link="{path:'/planTrack/'+item.guid}">单据跟踪</a> -->
          </td>
        </tr>
      </tbody>
    </table>

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


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

</div>
</template>
<script>
module.exports={
  data: function(){
    return {
      list:{},
      datalist:{},
      billtype:'',
      billno:'',
      goodsname:'',
      gtinputdate:'',
      ltinputdate:'',
      meddeptname:'',
      medstorename:'',
      dobillno:'',
      wvbillno:'',
      suppliername:'',
      gtdetailmoneysum:'',
      ltdetailmoneysum:'',
      billstate:'',
      search:{
          pageNo: '1',
          totalPages: '1',
          pageSize:'50'
      },
      type:{}
    };
  },
  methods: {
    getData: function(){
      var self = this;
      //单据类型
      Ajax.post('/hospitalReport/getBillTypelist').
          then(function(response){
            var res=response.data.data;
            self.type=res;
        })

      Ajax.post('/hospitalReport/getMedPlanList',
        {'page':self.search.pageNo,'pageSize':self.search.pageSize,'billtype':self.billtype,'billno':self.billno,
        'goodsname':self.goodsname,'gtinputdate':self.gtinputdate,'ltinputdate':self.ltinputdate,
        'meddeptname':self.meddeptname,'medstorename':self.medstorename,'dobillno':self.dobillno,
        'wvbillno':self.wvbillno,'suppliername':self.suppliername,'gtdetailmoneysum':self.gtdetailmoneysum,
        'ltdetailmoneysum':self.ltdetailmoneysum,'billstate':self.billstate
       }).
          then(function(response){
            var res=response.data.data;
            self.list=res.list;
            self.search.totalPages=res.totalPages;
            self.search.pageNo=res.pageNo;
        })
    },
   },
  route:{
    activate : function(){
      this.getData();
    }
  }
};
</script>