<template>
  <div class="container resource close-left-menu">
    <div class="pop-banner clearfix ">      
      <h3 class="current-module">变更单汇总</h3>
    </div>
    <div class="pd-form fast-search-form">
      <div class="group-row">
        <div class="form-group">
          <div class="control">
            <input type="text" v-model="search.search_LIKE_billno"
             placeholder="出库单号" title="出库单号" maxlength="26" v-rule></div>
        </div>
        <div class="form-group form-label">
          <label class="label" for='cn25'>采购单位</label>
          <div class="control">
            <select-ui :list="hosList" v-model='selectMed' class='inp4' id='cn25'></select-ui> 
          </div> 
        </div>
      </div> 
      <div class="group-row">
        <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;">
              <datepicker :target.sync="search.beginbilldate" :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;">
              <datepicker :target.sync="search.endbilldate" :readonly="readonlyFlag" title='出库结束日期' placeholder='出库结束日期'
               styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;"></datepicker>
            </div>
          </div>
        </div>
        <div class="form-group">
            <!-- <label for="cn1" class="label">采购单号</label> -->
            <div class="control">
              <input type="text" v-model="search.supplierpobillno" title='采购单号' placeholder='采购单号' maxlength="26" v-rule></div>
          </div> 
      </div>  
      <div class="group-row">
          <div class="form-group w800">
         <label for="cn1" class="label w80">业务状态</label>
          <div class="control control-filtering control-filtering-green"
           style="float:left;width:600px;">         
            <a id="all" class="all active" href="javascript:;" 
              @click="state('','all')">全部</a>
            <a id="wating" class="option" href="javascript:;" 
              @click="state('VD01','wating')">未提交</a>
            <a id="submit" class="option" href="javascript:;" 
              @click="state('VD02','submit')">已提交</a>
              <a id="submit2" class="option" href="javascript:;"
              @click="state('VD03','submit2')">已审核</a>
              <a id="submit3" class="option" href="javascript:;"
              @click="state('VD04','submit3')">已驳回</a>
          </div>
        </div>
        </div>
      <div class="group-row t-right">
       <button v-on:click="getData()" class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle">查 询</button>
      </div>
    </div> 
    <table class="itable itable-thead-13px">
      <thead id="t_header">
        <tr>
          <th class="w50">序号</th>
          <th class="w170">采购单位</th>
          <th class="w170">变更单号</th>
          <th class="w100">单据类型</th>
          <th class="w100">业务状态</th>
          <th class="w140">采购单号</th>
          <th class="w120">变更日期</th>
          <th class="w120">操作</th>
        </tr>
      </thead>
      <tbody class="txt_v">
        <tr>
          <td colspan="10" v-if="mxList.length==0">
          暂无符合条件的记录
          </td>
        </tr>
        <tr v-for="trdo in mxList">
          <td>{{$index+1}}</td>
          <td class="t-left pr10">
            <div class="p-lr-10">{{trdo.medname}}</div>
          </td>
          <td class="t-left pr10">{{trdo.billno}}</td>
          <td>{{trdo.billtype | billtype}}</td>
          <td>{{trdo.billstate | billstate_trdos}}</td>
          <td class="t-left pr10">{{trdo.supplierpobillno}}</td>
          <td>{{trdo.variationdate | getYMD}}</td>
          <td class="pt7">
            <!-- <a class="btn-d btn-d-activate" 
              v-on:click="goTRDoDetail(trdo.billtype,trdo.supplierpobillno,trdo.billno,trdo.billstate)">明细</a>
            <a class="btn-d btn-d-activate" v-link="{ path: '/orderOutall3-1/' + trdo.guid}">单据跟踪</a> --> 
            <a href="javascript:;" class="btn button-green" v-link="{path:'/trdo/orderOutallChangeDetail/'+trdo.guid}">明细</a> 
          </td>
        </tr>
      </tbody>
    </table>
    <div class="pagination m-20-0">
      <pagination
           @page-change="getData"
           :page-no.sync="search.page"
           :total-pages.sync="search.totalPages">          
      </pagination>
    </div>
  </div> 
</template>

<!--出库单汇总-->
<script>
  module.exports = {
    data: function () {
      return {  
        // 医院
        hosList: [],
        // 明细数据
        mxList: [],
        // 订单总数量
        totalNum:0,
        // 查询条件
          search: {
              pageSize: 50,
              page: 1,
              totalPages: 0,
              //total: 0,
              beginbilldate: this.GetDate().begindate,// 出库日期 起
              endbilldate: this.GetDate().enddate,// 出库日期 止
              billstate: '',// 业务状态
              medguid:'',// 采购单位
              supplierpobillno: '',// 采购单号
          },
        // 日期控件
        readonlyFlag:false, 
      };
    },
    methods: {
      // 获取数据
      getData:function(){
        var self = this;
        Ajax.post('/trdo/getTrvariationdoList', this.search)
          .then(function (response){
            var data = response.data.data;
            self.$set('mxList',data.list); 
            self.search.pageno = data.pageno;
            self.search.totalPages = data.totalPages;
            self.search.total = data.total;
        })
      },   
      // 查询条件选择项
      state: function(billstate,objId){
        $(".form-group a").each(function(){
          // alert($(this).text());
          $(this).attr("class", "option");
        });
        $("#"+objId).attr("class","all active");
        // 设置查询的条件
        this.search.billstate = billstate;
        this.getData(); 
      },
        getMedListRelation:function(){
            var self = this;
            Ajax.post('/trdo/gettrvariatMedList')
                .then(function (response){
                    var data = response.data;
                    if(data.errorCode == 0){
                        self.hosList = _.map(data.data, function (item) {
                            return {
                                label: item.medname,
                                value: item.medguid
                            };
                        });
                    }else{
                        self.MessageBox.alert('数据获取异常!');
                    }
                })
        }
    },
    route: {
      activate: function () {
        this.getData();
        this.getMedListRelation();
      }
    },
    watch:{
      // 实时监听复选框勾选变化
      'selectMed': function (val) {
        this.search.medguid = val;
      }
    },
      filters: {
          billstate_trdos:function (val) {
              if(val=='VD01') {
                  return "待提交";
              } else if(val=='VD02') {
                  return "已提交";
              } else if(val=='VD03') {
                  return "已审核";
              } else if(val=='VD04') {
                  return "已驳回";
              }
          }
      }
  };
</script>