<!--医院对账单 - 列表-->
<template>
  <div class="container resource close-left-menu contaNEW">
    <div class="pop-banner clearfix">
     <div class="operate-btns">
      <a class="fbtn fb-download" @click='download'>导出</a>
    </div>
    <h3 class="current-module">高值使用追溯</h3>
  </div>
  <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 form-label">
         <label for="cn1" class="label">医院</label>
          <div class="control">
            <select v-model="search.medguid" id='cn1' class="inp2"  @change="getdepname(search.medguid)">
              <option value="">请选择</option>
              <option v-for='item in getMedList' :value="item.guid">{{item.name}}</option>
            </select>
          </div>
        </div>
      <div class="form-group form-label">
         <label for="cn2" class="label">科室</label>
          <div class="control">
            <select v-model="search.deptguid" id='cn2' class="inp2">
              <option value="">请选择</option>
              <option v-for='item in getdepartmentList' :value="item.guid">{{item.hdeptname}}</option>
            </select>
          </div>
        </div> 
      </div> 
      <div class="group-row"> 
        <div class="form-group form-label">
          <div class="control">
            <input type="text" v-model="search.inhospitalnumber" title='住院号' placeholder="住院号"></div>
        </div>
        <div class="form-group form-label">
          <div class="control">
            <input type="text" v-model="search.patientname" title='患者姓名' placeholder="患者姓名"></div>
        </div> 
      </div>
      <div class="group-row"> 
      <div class="form-group form-label">
          <div class="control">
            <input type="text" v-model="search.billno" title='单据编号' placeholder="单据编号"></div>
      </div>
      <div class="form-group form-label">
          <div class="control">
            <input type="text" v-model="search.barcode" title='条码号' placeholder="条码号"></div>
      </div>
      </div>
      <div class="group-row"> 
      <div class="form-group form-label">
          <div class="control">
            <input type="text" v-model="search.goodsname" title='输入商品名称、编码、厂商、注册证号' placeholder="输入商品名称、编码、厂商、注册证号">
            </div>
      </div> 
      <div class="form-group form-label"> 
          <div class="control control-date" style="height:34px;overflow: inherit;">
            <div style="width:44%;float:left;">
              <datepicker :target.sync="search.begindate" :readonly="readonlyFlag" placeholder="开始日期" title='开始日期' styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
            </div>
            <div class="text-and">—</div>
            <div style="width:48%;float:left;">
              <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" style='width: 460px;'>
            <label for="cn3" class="label w60">单据状态</label>
            <div class="control control-filtering control-filtering-green fl ml-10" style='width:380px;'>
              <a class="option" href="javascript:;" :class="{'all active':search.state==''}" v-on:click="search.state=''">全部</a>
              <a class="option" href="javascript:;" style='margin: 4px 14px;' @click="search.state='N'" :class="{'all active':search.state=='N'}">未使用</a>
              <a class="option" href="javascript:;" style='margin: 4px 14px;' @click="search.state='Y'" :class="{'all active':search.state=='Y'}">已使用</a>
            </div>
          </div>
      </div>

      <div class="group-row t-right">
        <button  v-on:click="gettrsupplierhvdo(false)" class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle">查 询</button>
      </div>
    </div>

    <div class="ctable ct-parent mt-20 mb-30">
            <div class="ct-head"> 
                <span class="ct-col w50">序号</span> 
                <span class="ct-col w150">单据编号</span>   
                <span class="ct-col w150">手术信息</span> 
                <span class="ct-col w80">住院号</span>
                <span class="ct-col w80">病床号</span>
                <span class="ct-col w100">患者姓名</span>
                <span class="ct-col w80">明细数</span>
                <span class="ct-col w100">单据状态</span>
                <span class="ct-col w120">备注</span>
                <span class="ct-col w80">操作</span>
            </div>
            <div class="ct-row mt-0 pt10" id="warp{{$index}}" v-for="cus in inVoiceList" track-by="$index">  
                    <div class="row-line">  
                    <span class="ct-col w50"><span class="table-detail-text">{{$index+1}}</span></span>
                    <span class="ct-col w150 pr10"><span class="table-detail-text">{{cus.billno}}</span> </span> 
                    <span class="ct-col w150 t-left "><span class="table-detail-text">{{cus.deptname}}<br>{{cus.surgerydate | getYMD}}<br>{{cus.doctorname}}<br>{{cus.surgerybillno}}</span></span>
                    <span class="ct-col w80"><span class="table-detail-text">{{cus.inhospitalnumber}}</span></span>
                    <span class="ct-col w80"><span class="table-detail-text">{{cus.bednumber}}</span></span>
                    <span class="ct-col w100"><span class="table-detail-text">{{cus.patientname}}</span></span>
                    <span class="ct-col w80  activate isFocus">
                    <span class="table-detail-text">
                        <a href="javascript:void(0);" @click="slidedown($index,cus.guid)" class="txt_underline  status-switch text-color-blue" style="display: inline-block;">{{cus.detailrecordsum}}</a>
                    </span> 
                    </span>    
                    <span class="ct-col w100" > 
                        <span class="table-detail-text">{{cus.state =='Y'?'已使用':'未使用'}}</span>
                    </span> 
                    <span class="ct-col w120" > 
                        <span class="table-detail-text">{{cus.memo}}</span>
                    </span>  
                    <span class="ct-col w80" >
                            <span class="table-detail-text"> 
                            <a  href="javascript:;" class="btn button-green" v-link="{path:'/cost/costUseRegistrationDetails/'+cus.guid}">明细</a>
                            </span>
                    </span> 
                </div>
                <div class="row-launch mb-30" style="display: none;"> 
                    <table class="itable">
                        <thead>
                        <tr>
                            <th class="w50">序号</th>
                            <th class="w100">商品编号</th>
                            <th class="w120">商品</th>
                            <th class="w80">规格</th>
                            <th class="w120">生产厂商</th>
                            <th class="w150">注册证号/批准文号</th>
                            <th class="w100">批号</th> 
                            <th class="w80">条码</th> 
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-if="inVoiceList[$index].mxList==null || inVoiceList[$index].mxList==0">
                            <td colspan="8">暂无符合条件的记录</td>
                        </tr>
                        <tr v-for="(inx,variation) in cus.mxList">
                            <td class="v-top">
                                    {{ $index + 1 }}
                            </td>
                            <td class='t-left v-top pr10'>{{variation.goodscode}}</td>
                            <td class='t-left v-top pr10'>{{variation.goodsname}}</td>
                            <td class='t-left v-top pr10'>{{variation.goodsspec}}</td>
                            <td class='t-left v-top pr10'>{{variation.producer}}</td>
                            <td class='t-left v-top pr10'>{{variation.register}}</td>
                            <td class='t-left v-top'> {{variation.lot}}<br>{{variation.productiondate | getYMD}}<br>{{variation.expiredate | getYMD}}</td> 
                            <td class='t-left v-top'>{{variation.barcode}}</td> 
                        </tr>
                        </tbody>
                    </table>
                    <div class="pagination" style="margin: 20px 0">
                        <pagination @page-change="gettrmedhvurs($index,cus.guid)" :class="['m-20-0']"
                                    :page-no.sync="inVoiceList[$index].search.page"
                                    :total-pages.sync="inVoiceList[$index].search.totalPages"></pagination>
                    </div>
                    <div class="zip" @click="slideup($index)"></div>
                </div>

            </div>
             
            <div class="mt-20" style="text-align: center" v-if="inVoiceList.length==0">
                未查询到相关数据！
            </div>
            <div class="pagination" style="margin: 20px 0">
                <pagination @page-change="gettrsupplierhvdo(true)" :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 {  
        getdepartmentList:[],
        gettrmedhvurList:[],
        goodscateList:[],
        // 查询条件
        search: {
          pageSize: 50,
          page: 1,
          totalPages: 0,
          total: 0, 
          deptguid: '',
          begindate: '',
          enddate:'',
          inhospitalnumber:'',
          billno: '',
          patientname: '',
          barcode:'',
          goodsname:'',
          state:''
        }, 
      };
    },
    watch: { 
      'search.state': function(val) {
        this.gettrsupplierhvdo(false); 
      },  
    },
    methods: {
      getmedlist: function () {
        var self = this; 
        Ajax.post('/cost/getmedlist',{})
          .then(function (response){
            var data = response.data.data;
            if(response.data.errorCode==0){
              self.$set('getMedList',data); 
            } 
        })          
      }, 
      getdepname: function (guid) {
                var self = this; 
                self.getdepartmentLists(guid);
      },
      getdepartmentLists: function (guid) {
        var self = this; 
        Ajax.post('/cost/getdepartmentlist',{'medguid':guid})
          .then(function (response){
            var data = response.data.data;
            if(response.data.errorCode==0){
              self.$set('getdepartmentList',data); 
            } 
        })          
      }, 
      // 获取当前时间和之前一个月时间
      Date:function(){
        var self = this;
        // 结束日趋
        var nowdate = new Date();
        var y = nowdate.getFullYear();
        var m = nowdate.getMonth()+1;
        m=m<10?'0'+m:m;
        var d = nowdate.getDate();
        d=d<10?'0'+d:d;
        self.search.enddate = y+'-'+m+'-'+d;

        // 开始日期
        nowdate.setMonth(nowdate.getMonth()-1);
        var yn = nowdate.getFullYear();
        var mn = nowdate.getMonth()+1;

        mn=mn<10?'0'+mn:mn;

        var dn= nowdate.getDate();
        dn=dn<10?'0'+dn:dn;
        self.search.begindate = yn+'-'+mn+'-'+dn;
      },
      slideup: function(index) { 
          $('#warp' + index).find(".row-launch").slideUp(400, function() {
              $('#warp' + index).removeClass('active');
              $('#warp' + index).find(".isFocus").removeClass("focus");
          })
      },
      slidedown: function(index,guid) { 
        var clss = $("#warp" + index).attr("class");
          if (clss.indexOf("active") != -1) {
              this.slideup(index);
              return;
          }
          this.gettrmedhvurs(index,guid);
          $('#warp' + index).addClass("active");
          $('#warp' + index).find(".row-launch").slideDown(400, function() {
              $('#warp' + index).find(".isFocus").addClass("focus active");
          })
      },
       //选择送货单 查询列表 
        gettrsupplierhvdo: function(falg) {
            var self = this; 
            if(!falg){
              self.search.page=1;
            }
            Ajax.post('/cost/gettrmedhvur', self.search)
                .then(function(response) {
                    var data = response.data.data; 
                    if(response.data.errorCode == 0) {
                        self.$set('inVoiceList', data.list);  
                        self.search.pageNo = data.pageNo;
                        self.search.totalPages = data.totalPages;
                        self.search.total = data.total;   
                    } else {
                      layer.msg(response.data.message)
                    } 
                }) 
        }, 
        // 品规格数目（手风琴效果）
        gettrmedhvurs: function(index,guid) {
            var self = this; 
               var dpoObj = self.inVoiceList[index];
                    if(dpoObj.search==null){
                      // 设置每组的查询条件
                      dpoObj.search = {
                        pageSize:5,
                        page: 1,
                        pageNo: 1,
                        totalPages: 0,
                        guid:guid
                      };
                    }
                    dpoObj.search.page = dpoObj.search.pageNo; 
            Ajax.post('/cost/gettrmedhvurs', dpoObj.search)
                .then(function(response) {
                    var data = response.data.data;
                    self.$set('inVoiceList[' + index + '].mxList', data.list); 
                             dpoObj.search.pageNo = data.pageNo;
                             dpoObj.search.totalPages = data.totalPages;
                             dpoObj.search.total = data.total;
                             self.$set('inVoiceList['+index+'].search',dpoObj.search); 
                });
        },
      liststmedsupplies: function (falg) {
        var self = this; 
        Ajax.post('/cost/liststmedsupplies',{})
          .then(function (response){
            var data = response.data.data;
            if(response.data.errorCode==0){
              self.$set('goodscateList',data); 
            }
            
        })          
      },
      // 导出
      download:function(){
        var self = this;
         Ajax.post('/cost/exporttrmedhvurdetails', self.search)
          .then(function (response){
            var res = response.data; 
              window.open(res);  
        })      
      }
    },
    route: {
      activate: function () {
        this.Date();
        this.gettrsupplierhvdo(false); 
        this.getmedlist();
      }
    },
  };
</script>