<!--医院对账单 - 列表-->
<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>
                <a v-on:click="printTag()" class="fbtn fb-print-highfollow">打印高值追溯标签</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">
                        <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 class="form-group form-label">
                        <div class="control">
                            <input type="text" maxlength="17" v-rule v-model="search.billno" title='预入库单号' placeholder="预入库单号"></div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group form-label">
                        <div class="control">
                            <input type="text" maxlength="17" v-rule v-model="search.medplanbillno" title='计划单号' placeholder="计划单号"></div>
                    </div>
                    <div class="form-group form-label">
                        <div class="control">
                            <input type="text" maxlength="20" v-rule v-model="search.suppliername" title='供应商' placeholder="供应商"></div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group form-label">
                        <div class="control">
                            <input type="text" maxlength="50" v-rule v-model="search.goodsname" title='商品' placeholder="商品"></div>
                    </div>
                    <div class="form-group form-label">
                        <label for="cn4" class="label">耗材包</label>
                        <div class="control">
                            <select v-model="search.parentpackageguid" id='cn4' class="inp4">
                                <option value="">请选择</option>
                                <option v-for='item in goodscateList' :value="item.guid">{{item.suppliesname}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group form-label">
                        <div class="control w650">
                            <input type="text" maxlength="50" v-rule v-model="search.barcode" title='高值条码' placeholder="高值条码"></div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group w650">
                        <label for="cn3" class="label w40">状态</label>
                        <div class="control control-filtering control-filtering-green fl ml-10">
                            <a class="option" href="javascript:;" :class="{'all active':search.goodstate==''}"
                               v-on:click="search.goodstate=''">全部</a>
                            <a class="option" href="javascript:;" style='margin: 4px 14px;'
                               @click="search.goodstate='Y01'" :class="{'all active':search.goodstate=='Y01'}">预入库</a>
                            <a class="option" href="javascript:;" style='margin: 4px 14px;'
                               @click="search.goodstate='Y02'" :class="{'all active':search.goodstate=='Y02'}">已使用</a>
                            <a class="option" href="javascript:;" style='margin: 4px 14px;'
                               @click="search.goodstate='Y03'" :class="{'all active':search.goodstate=='Y03'}">待还货</a>
                            <a class="option" href="javascript:;" style='margin: 4px 14px;'
                               @click="search.goodstate='Y04'" :class="{'all active':search.goodstate=='Y04'}">已还货</a>
                        </div>
                    </div>
                </div>
                <div class="group-row t-right">
                    <button v-if="loading" v-on:click="getData(false)"
                            class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle">查 询
                    </button>
                    <button v-else
                            class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle">查 询 中 ...
                    </button>
                </div>
            </div>
            <div class="purchase-add-plan hide">
                <div class="pap-tit">
                    <div style="height:30px;line-height:30px;">
                        共<em class="fW"> {{countsum}}</em>个商品，金额合计 <em class="fW"> {{numbersum| numDigit 2}}</em>元。
                    </div>
                </div>
            </div>


            <div class="ctable ct-parent mt-20 mb-30">
                <div class="ct-head" id='t_header'>
                    <span class="ct-col w50">
                         <div class="checkbox-control">
               <input type="checkbox" name="cb" id="asdas" v-model='allFlag' @click="checkAll">
               <label class="checkbox" for="asdas"></label>
             </div>
                    </span>
                    <span class="ct-col w50">序号</span>
                    <span class="ct-col w150">预入库信息</span>
                    <span class="ct-col w100">单价</span>
                    <span class="ct-col w100">批号</span>
                    <span class="ct-col w100">灭菌批号</span>
                    <span class="ct-col w50">数量</span>
                    <span class="ct-col w120">金额(元)</span>
                    <span class="ct-col w120">入库状态</span>
                    <span class="ct-col w120">高值条码</span>
                </div>
                <div class="ct-row mt-0 pt10" id="warpd{{$index}}" v-for="cus in list" track-by="$index">
                    <div class="row-line">
                    <span class="ct-col w50 v-top fix" :class="cus.goodscode=='耗材包'?'mt-5':''">
                       <div class="checkbox-control fl " :class="cus.goodscode=='耗材包'?'mt_-5':''">
                            <input type="checkbox" name="cb" v-if='cus.goodscode=="耗材包"' :id="cus.hvstockguid+$index"
                                   v-model="checkArr" :value="0+'/'+ cus.mvguid+'/'+$index+'/'+cus.parentpackageguid">
                            <input type="checkbox" name="cb" v-else :id="cus.hvstockguid+$index" v-model="checkArr"
                                   :value="1+'/'+ cus.hvstockguid+'/'+$index">
                            <label class="checkbox check-box" :for="cus.hvstockguid+$index"></label>
                       </div>
                       <span v-if='cus.goodscode=="耗材包"' class="table-detail-text fr"> <img src="/images/consumable.png"
                                                                                            alt=""
                                                                                            @click="slidedown2($index,cus.mvguid,cus.parentpackageguid)"></span>

                    </span>
                        <span class="ct-col w50 v-top">
                        <!--<input class="checkbox" type="checkbox" :id="cus.hvstockguid+$index" v-model="checkArr" :value="cus.hvstockguid+'/'+$index" v-if='cus.goodscode!="耗材包"'>-->
                        <span>{{$index+1 | getIndex}}</span>
                    </span>
                        <span class="ct-col w150 t-left pr10 v-top">{{cus.mvdate | getYMD}}<br>{{cus.goodscode != '耗材包'?'非耗材包':cus.goodscode}}<br>{{cus.billno}}<br>
                    <span style="padding-bottom: 15px;position: relative">
                        <span class="p-tit-green" style=' color: #4aa8e5;'>{{cus.goodsname}}</span><br>
                    </span>
                        {{cus.goodsspec}}<br>{{cus.producer}}<br>{{cus.register}}</span>
                        <span class="ct-col w100 v-top t-right pr10"><span class="table-detail-text">{{cus.price | numDigit 2 | numFmt}}<br>元</span></span>
                        <span class="ct-col w100 t-left v-top pl10" v-if='cus.goodscode!="耗材包"'>{{cus.lot}}<br>{{cus.productiondate | getYMD}}<br>{{cus.expiredate | getYMD}}</span>
                        <span class="ct-col w100 t-left v-top pl10" v-else></span>

                        <span class="ct-col w100 t-left pr10 v-top" v-if='cus.goodscode!="耗材包"'>{{cus.sterilantlot}}<br>{{cus.sterilantdate | getYMD}}<br>{{cus.sterilantexpdate | getYMD}}</span>
                        <span class="ct-col w100 t-left v-top pl10" v-else></span>
                        <span class="ct-col w50 activate isFocus v-top">
                    <span class="table-detail-text" v-if='cus.goodscode=="耗材包"'>
                    <a href="javascript:void(0);" @click="slidedown($index,cus.mvguid,cus.parentpackageguid)"
                       class="txt_underline  status-switch text-color-blue" style="display: inline-block;">1套</a>
                    </span>
                    <span v-else class="table-detail-text">1{{cus.unit}}</span>
                    </span>
                        <span class="ct-col w120 t-right v-top">
                                 {{cus.moneysum | numDigit 2 | numFmt}}
                    </span>
                        <span class="ct-col w120 v-top">
                                  <span v-if="cus.goodstate =='Y01'" class="text-color-yellow">{{cus.goodstate | barCodeState}}</span>
                                  <span v-if="cus.goodstate =='Y03'" class="text-color-red">{{cus.goodstate | barCodeState}}</span>
                                  <span v-if="cus.goodstate =='Y02'" class="text-color-blue">{{cus.goodstate | barCodeState}}</span>
                                  <span v-if="cus.goodstate =='Y04'">{{cus.goodstate | barCodeState}}</span>
                    </span>
                        <span class="ct-col w120 t-left v-top">
                                 {{cus.barcode}}
                    </span>
                    </div>
                    <div class="row-launch mb-30" style="display: none;">
                        <table class="itable">
                            <thead>
                            <tr>
                                <th class="w50">序号</th>
                                <th class="w150">商品信息</th>
                                <th class="w80">单价</th>
                                <th class="w100">批号</th>
                                <th class="w100">灭菌批号</th>
                                <th class="w80">单位</th>
                                <th class="w150">高值条码</th>
                                <th class="w70">状态</th>
                                <th class="w70">使用时间/还货时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-if="list[$index].mxList==null || list[$index].mxList==0">
                                <td colspan="12">暂无符合条件的记录</td>
                            </tr>
                            <tr v-for="(inx,variation) in cus.mxList">
                                <td class=" v-top">
                                    {{ $index + 1 | getIndex}}
                                </td>
                                <td class='t-left v-top pr10'>{{variation.goodscode}}<br>{{variation.goodsname}}<br>{{variation.goodsspec}}<br>{{variation.producer}}<br>{{variation.register}}
                                </td>
                                <td class="t-right v-top"> {{variation.detailmoneysum | numDigit 2 | numFmt}}<br>元</td>
                                <td>
                                    {{variation.lot}}
                                    <br>
                                    {{variation.productiondate | getYMD}}
                                    <br>
                                    {{variation.expiredate | getYMD}}
                                </td>
                                <td>
                                    {{variation.sterilantlot}}
                                    <br>
                                    {{variation.sterilantdate| getYMD}}
                                    <br>
                                    {{variation.sterilantexpdate| getYMD}}
                                </td>
                                <td class="t-center v-top">{{variation.unit}}</td>
                                <td class=" v-top">{{variation.barcode}}</td>
                                <td class=" v-top">
                                    <span v-if="variation.goodstate =='Y01'" class="text-color-yellow">{{variation.goodstate | barCodeState}}</span>
                                    <span v-if="variation.goodstate =='Y03'" class="text-color-red">{{variation.goodstate | barCodeState}}</span>
                                    <span v-if="variation.goodstate =='Y02'" class="text-color-blue">{{variation.goodstate | barCodeState}}</span>
                                    <span v-if="variation.goodstate =='Y04'">{{variation.goodstate | barCodeState}}</span>
                                </td>
                                <td class=" v-top">{{variation.billdate | getYMD}}</td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="pagination" style="margin: 20px 0">
                            <pagination @page-change="getTrMedHvWvBagdetails($index,cus.mvguid,cus.parentpackageguid)"
                                        :class="['m-20-0']"
                                        :page-no.sync="list[$index].search.page"
                                        :total-pages.sync="list[$index].search.totalPages"></pagination>
                        </div>
                        <div class="zip" @click="slideup($index)"></div>
                    </div>

                </div>
                <div class="ct-row" v-if="list.length==0">
                    <div class="row-line t-center">
                        <div class="ct-col">未查询到相关数据！</div>
                    </div>
                </div>
                <div class="pagination" style="margin: 20px 0">
                    <pagination @page-change="getData(true)" :class="['m-20-0']" :page-no.sync="search.page"
                                :total-pages.sync="search.totalPages"></pagination>
                </div>
            </div>

            <!-- <table class="itable itable-td-long-text">
            <thead id="t_header">
              <tr>
                <th class="w40">序号</th>
                <th class="w100"> 预入库信息</th>
                <th class="w80">耗材包</th>
                <th class="w150">商品信息</th>
                <th class="w80">批号</th>
                <th class="w80">金额(元)</th>
                <th class="w100">高值条码</th>
                <th class="w80">状态</th>
                <th class="w100">使用时间/还货时间</th>
              </tr>
            </thead>
            <tbody >
              <tr v-if="list.length==0">
                <td colspan="15" >
                暂无符合条件的记录
                </td>
              </tr>
              <tr v-else v-for='item in list'>
                <td class="v-top">{{$index+1}}</td>
                <td class="t-left pr10 v-top">{{item.mvdate | getYMD}}<br>{{item.suppliername}}<br>{{item.billno}} </td>
                <td class="t-left pr10 v-top">{{item.suppliesname == null?'非耗材包':item.suppliesname}}</td>
                <td class="t-left pr10 v-top">{{item.goodscode}} <br>{{item.goodsname}} <br> {{item.goodsspec}} <br>{{item.producer}} <br>{{item.registkey}}</td>
                <td class="t-left v-top">{{item.lot}}</td>
                <td class="t-right pr10 v-top">{{item.detailmoneysum | numDigit 2 | numFmt}}</td>
                <td class='t-left pr10 v-top'>{{item.barcode}}</td>
                <td class="v-top v-top">
                <span v-if="item.goodstate =='Y01'" class="text-color-yellow">{{item.goodstate | barCodeState}}</span>
                <span v-if="item.goodstate =='Y03'" class="text-color-red">{{item.goodstate | barCodeState}}</span>
                <span v-if="item.goodstate =='Y02'" class="text-color-blue">{{item.goodstate | barCodeState}}</span>
                <span v-if="item.goodstate =='Y04'">{{item.goodstate | barCodeState}}</span>
                </td>
                <td class="v-top v-top">{{item.billdate | getYMD}}</td>
              </tr>
            </tbody>
          </table>
            <pagination
                 @page-change="getData(true)" :class="['m-20-0']"
                 :page-no.sync="search.page"
                 :total-pages.sync="search.totalPages">
              </pagination> -->

        </div>

    </div>
</template>
<script>
    module.exports = {
        data: function () {
            return {
                loading:true,
                list: [],
                numbersum: 0.00,
                countsum: 0,
                goodscateList: [],
                // 查询条件
                search: {
                    pageSize: 50,
                    page: 1,
                    totalPages: 0,
                    total: 0,
                    begindate: '',
                    enddate: '',
                    billno: '',
                    medplanbillno: '',
                    suppliername: '',
                    goodsname: '',
                    barcode: '',
                    parentpackageguid: '',
                    parentpackagename: '',
                    goodstate: ''
                },
                search1: {
                    pageSize: 50,
                    page: 1,
                    totalPages: 0,
                    total: 0,
                    pageNo: 0,
                    mvguid: '',
                    parentpackageguid: '',
                    index: '',
                },
                checkArr: [], //导出
                checkArrList: [],
            };
        },
        watch: {
            'search.goodstate': function (val) {
                this.getData(false);
            },
            'search.parentpackageguid': function (val) {
                this.getData(false);
            },
            'checkArr': function (val) {
                if (val.length<this.list.length){
                    this.$set('allFlag','')
                }else {
                    this.$set('allFlag',true)
                }
                var self = this;
                var arr, oList;
                self.checkArrList = [];
                for (let i = 0; i < val.length; i++) {
                    arr = val[i].split('/');
                    if (arr[0] != '0') {
                        oList = {
                            'guid': arr[1],
                        }
                    } else {
                        oList = {
                            'mvguid': arr[1],
                            'parentpackageguid': arr[3],
                        }
                    }
                    self.checkArrList.push(oList)
                }

            },
            // 全选
            // 'allFlag': function (val) {
            //     console.log(val)
            //     var self = this;
            //     for (var a = 0; a < this.list.length; a++) {
            //         let str = '';
            //         let cus = this.list[a];
            //         if (cus.goodscode == "耗材包") {
            //             str = '0' + '/' + cus.mvguid + '/' + a + '/' + cus.parentpackageguid
            //         } else {
            //             str = '1' + '/' + cus.hvstockguid + '/' + a
            //         }
            //         if (val) {
            //             this.$set('checkArr[' + a + ']', str)
            //         } else  {
            //             this.$set('checkArr[' + a + ']', '')
            //         }
            //     }
            // }
        },
        methods: {
            checkAll(){
                var self = this;
                for (var a = 0; a < this.list.length; a++) {
                    let str = '';
                    let cus = this.list[a];
                    if (cus.goodscode == "耗材包") {
                        str = '0' + '/' + cus.mvguid + '/' + a + '/' + cus.parentpackageguid
                    } else {
                        str = '1' + '/' + cus.hvstockguid + '/' + a
                    }
                    if (!this.allFlag) {
                        this.$set('checkArr[' + a + ']', str)
                    } else  {
                        this.$set('checkArr[' + a + ']', '')
                    }
                }
                console.log(this.allFlag)
            },
            // 获取当前时间和之前一个月时间
            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;

                // 开始日期
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                var yn = start.getFullYear();
                var mn = start.getMonth() + 1;
                mn = mn < 10 ? '0' + mn : mn;
                var dn = start.getDate();
                dn = dn < 10 ? '0' + dn : dn;
                self.search.begindate = yn + '-' + mn + '-' + dn;
            },
            slideup: function (index) {
                $('#warpd' + index).find(".row-launch").slideUp(400, function () {
                    $('#warpd' + index).removeClass('active');
                    $('#warpd' + index).find(".isFocus").removeClass("focus");
                })
            },
            slidedown: function (index, mvguid, parentpackageguid) {
                var clss = $("#warpd" + index).attr("class");
                if (clss.indexOf("active") != -1) {
                    this.slideup(index);
                    return;
                }
                this.getTrMedHvWvBagdetails(index, mvguid, parentpackageguid);
                $('#warpd' + index).addClass("active");
                $('#warpd' + index).find(".row-launch").slideDown(400, function () {
                    $('#warpd' + index).find(".isFocus").addClass("focus active");
                })
            },
            // 品规格数目（手风琴效果）
            getTrMedHvWvBagdetails: function (index, mvguid, parentpackageguid) {
                var self = this;
                var dpoObj = self.list[index];
                if (dpoObj.search == null) {
                    // 设置每组的查询条件
                    dpoObj.search = {
                        pageSize: 5,
                        page: 1,
                        pageNo: 1,
                        totalPages: 0,
                        mvguid: mvguid,
                        parentpackageguid: parentpackageguid,
                    };
                }
                Ajax.post('/cost/getTrMedHvWvBagdetails', dpoObj.search)
                    .then(function (response) {
                        var data = response.data.data;
                        self.$set('list[' + index + '].mxList', data.list);
                        // dpoObj.search.page = dpoObj.search.pageNo;
                        dpoObj.search.total = data.total;
                        dpoObj.search.totalPages = data.totalPages;
                        self.$set('list[' + index + '].search', dpoObj.search);
                    });
            },
            getData: function (falg) {
                var self = this;
                self.list = [];
                if (!falg) {
                    self.search.page = 1;
                }
                self.search.parentpackagename = '';
                for (var j = 0; j < self.goodscateList.length; j++) {
                    if (self.search.parentpackageguid == self.goodscateList[j].guid) {
                        self.search.parentpackagename = self.goodscateList[j].suppliesname;
                    }
                }
                if (this.loading){
                    self.$set('loading',false)

                    Ajax.post('/cost/gettrmedhvwvdetails', self.search)
                    .then(function (response) {
                        var data = response.data.data;
                        self.$set('loading',true)

                        if (response.data.errorCode == 0) {
                            // self.$set('countsum',response.data.senData.countsum);
                            // self.$set('numbersum',response.data.senData.numbersum);
                            self.$set('list', data.list);
                            for (var i = 0; i < self.list.length; i++) {
                                self.list[i].lot = self.list[i].detailVo.lot;
                                self.list[i].productiondate = self.list[i].detailVo.productiondate;
                                self.list[i].expiredate = self.list[i].detailVo.expiredate;
                                self.list[i].sterilantlot = self.list[i].detailVo.sterilantlot;
                                self.list[i].sterilantexpdate = self.list[i].detailVo.sterilantexpdate;
                                self.list[i].sterilantdate = self.list[i].detailVo.sterilantdate;
                                self.list[i].unit = self.list[i].detailVo.unit;
                                self.list[i].billno = self.list[i].detailVo.billno;
                                self.list[i].mvdate = self.list[i].detailVo.mvdate;
                                if (self.list[i].isPackage == 'N' && self.list[i].goodscode == '耗材包') {
                                    self.list[i].goodsname = self.list[i].detailVo.suppliesname;
                                    self.list[i].price = self.list[i].moneysum;
                                } else {
                                    self.list[i].goodscode = self.list[i].detailVo.goodscode;
                                    self.list[i].goodsname = self.list[i].detailVo.goodsname;
                                    self.list[i].goodsspec = self.list[i].detailVo.goodsspec;
                                    self.list[i].producer = self.list[i].detailVo.producer;
                                    self.list[i].register = self.list[i].detailVo.register;
                                    self.list[i].price = self.list[i].detailVo.detailmoneysum;
                                    self.list[i].moneysum = self.list[i].detailVo.detailmoneysum;
                                    self.list[i].goodstate = self.list[i].detailVo.goodstate;
                                    self.list[i].barcode = self.list[i].detailVo.barcode;
                                }
                            }
                            self.search.totalPages = data.totalPages;
                            self.search.total = data.total;
                        }

                    })
                }

            },
            liststmedsupplies: function (falg) {
                var self = this;
                Ajax.post('/cost/listmedsupplies', self.search1)
                    .then(function (response) {
                        var data = response.data.data;
                        if (response.data.errorCode == 0) {
                            self.$set('goodscateList', data.list);
                        }

                    })
            },
            // 导出
            download: function () {
                var self = this;
                Ajax.post('/cost/exporttrmedhvwvdetails', self.search)
                    .then(function (response) {
                        var res = response.data;
                        window.open(res);
                    })
            },
            //打印
            printTag: function () {
                var self = this;
                if (self.checkArrList && Array.isArray(self.checkArrList) && self.checkArrList.length == 0) {
                    layer.msg('请选择要打印的预入库单');
                    return;
                }
                Ajax.post('/cost/printtrmedhvwvdetails', {trmedhvstocks: self.checkArrList}).then(function (response) {
                    var data = response.data;
                    if (data.errorCode == 0) {
                        window.open(data.data);
                    }
                })
            }
        },
        route: {
            data: function () {
                this.search.billno = window.sessionStorage.getItem('billno');
                window.sessionStorage.setItem('billno', '');
                this.Date();
                this.getData(false);
                this.liststmedsupplies();

            }
        },
    };
</script>
<style scoped>
    .check-box {
        margin: 0 !important;
        padding: 0 !important;
        height: 20px;
        line-height: 20px;
    }
</style>