<template>
    <div class="container resource close-left-menu">
        <div class="pop-banner clearfix">
            <div class="operate-btns">
                <a href="javascript:;" class="fbtn fb-upload" @click="export()">导出</a>
                <a href="javascript:;" class="fbtn fb-upload" @click="exportAll()">全部导出</a>
            </div>
            <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" maxlength="50" v-rule v-model="search.goodsinfo" placeholder='商品编号、名称、生产厂商、注册证号' title='商品编号、名称、生产厂商、注册证号'></div>
                </div>
                <div class="form-group" >
                    <label class="label w80 fl">商品大类</label>
                    <div class="control control-filtering control-filtering-green fl w350">
                        <a class="option" href="javascript:;" :class="{'all active':search.goodscate==''}" v-on:click="search.goodscate=''">全部</a>
                        <a class="option" href="javascript:;" :class="{'all active':search.goodscate=='1'}" v-on:click="search.goodscate='1'">药品</a>
                        <a class="option" href="javascript:;" :class="{'all active':search.goodscate=='2'}" v-on:click="search.goodscate='2'">器械</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="getDate">查 询</button>
            </div>
        </div>
        <div class="statistics">
            药品金额合计<em>{{sumMoney.YaoCount | numDigit 2 | numFmt}}</em>元，合计（大写）<em>{{sumMoney.YaoCount | numDigit 2 | numUpper}}</em>
            <br>
            器械金额合计<em>{{sumMoney.QiCount | numDigit 2 | numFmt}}</em>元，合计（大写）<em>{{sumMoney.QiCount | numDigit 2 | numUpper}}</em>
        </div>
        <div class="line-footer"></div>
        <div class="ctable ct-parent mt-20">
            <div class="ct-head">
				<span class="ct-col w80">
				<div class="checkbox-control">
			             <input type="checkbox" :id="1" @click="selectAllsum(selectAllList)" v-model="selectAllList" :value="1">
			             <label class="checkbox" style="line-height: 19px;" :for="1">序号</label>
			             </div>
			             </span>
                <span class="ct-col w120">商品编号</span>
                <span class="ct-col w120">商品名称</span>
                <span class="ct-col w120">生产厂商</span>
                <span class="ct-col w100">规格</span>
                <span class="ct-col w120">注册证号</span>
                <span class="ct-col w100">库存数量</span>
                <span class="ct-col w120">总金额(元)</span>
                <span class="ct-col w120">操作</span>

            </div>
            <!--     -->
            <div class="ct-row mt-0" id="warp{{$index}}" v-for="cus in inVoiceList">
                <div class="row-line">
					<span class="ct-col w80 v-top" style="padding-top:3px;">
					<div class="checkbox-control">
				              <input type="checkbox" :id="cus.guid" v-model="checkArr" :value="cus.guid">
				              <label class="checkbox" :for="cus.guid">{{ $index + 1 }}</label>
				            </div>
				            </span>
                    <span class="ct-col w120 t-left  v-top">{{cus.goodscode}}</span>
                    <span class="ct-col w120 t-left  v-top pr10">{{cus.goodsname}}</span>
                    <span class="ct-col w120 t-left v-top">{{cus.producer}}</span>
                    <span class="ct-col w100 v-top">{{cus.goodsspec}}</span>
                    <span class="ct-col w120  t-left v-top">{{cus.registkey}}</span>
                    <span class="ct-col w100 t-right v-top"> {{cus.stocknumber  | numDigit 2| numFmt}}{{cus.unit}}</span>
                    <span class="ct-col w120  t-right v-top">{{cus.count | numDigit 2 | numFmt}}</span>
                    <span class="ct-col w120 activate isFocus v-top"><div><a  class="btn button-green" @click="slidedown($index,cus.guid)">明细</a></div></span>
                </div>
                <div class="row-launch" style="display: none;">
                    <table class="itable mb-30">
                        <thead>
                        <tr>
                            <th class="w40">序号</th>
                            <th class="w200">批号</th>
                            <th class="w200">批次号</th>
                            <th class="w200">生产日期</th>
                            <th class="w200">有效期</th>
                            <th class="w200">库存数量</th>
                            <th class="w200">单价(元)</th>
                            <th class="w200">金额(元)</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-if="inVoiceList[$index].mxList==null || inVoiceList[$index].mxList==0">
                            <td colspan="8">暂无符合条件的记录</td>
                        </tr>
                        <tr v-for="variation in cus.mxList">
                            <td>
                                {{$index+1}}
                            </td>
                            <td class="t-center pr10">{{variation.lot}} </td>
                            <td class="t-center pr10">{{variation.stockbatch}} </td>
                            <td class="t-center">{{variation.productiondate|getYMD}}</td>
                            <td class="t-center">
                                <span class="text-color-yellow" v-if="sh[$index]">{{variation.expiredate|getYMD}}</span>
                                <span v-else>{{variation.expiredate|getYMD}}</span>
                            </td>
                            <td class="t-right">{{variation.number | numDigitLimit 2| numFmt}}{{cus.unit}}</td>
                            <td class="t-right">{{variation.price | numDigit 2 | numFmt}}</td>
                            <td class="t-right">{{variation.count | numDigit 2 | numFmt}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="pagination" style="margin: 20px 0">
                        <pagination @page-change="getApplyDetailList($index,cus.guid)" :class="['m-20-0']" :page-no.sync="cus.search.pageNo" :total-pages.sync="cus.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="getDate" :class="['m-20-0']" :page-no.sync="search.page" :total-pages.sync="search.totalPages"></pagination>
            </div>
        </div>
</template>

<script>
    module.exports = {
        data: function() {
            return {
                search: {
                    goodsinfo: '',
                    goodscate:'',
                    pageSize: 50,
                    page: 1,
                    totalPages: 0,
                    total: 0,
                    pageNo:0
                },
                search1: {
                    mvbillno: '',
                    pageSize: 5,
                    page: 1,
                    totalPages: 0,
                    total: 0,
                    pageNo:0
                },
                inVoiceList: '',
                sh:[],
                selectAllList: false,
                checkArr:[],
                checkArrList: '',
                excelList:[],
                sumMoney:{},
            };
        },
        methods: {
            getSumMoney: function() {
                var self = this;
                Ajax.post('/procurment/queryStockListAll', {})
                    .then(function(response) {
                        var data = response.data.data;
                        if(response.data.errorCode == 0) {
                            self.$set('sumMoney', data);
                        } else {
                            self.MessageBox({
                                title: '警告',
                                message: response.data.message,
                                type: 'alert'
                            }, function(action) {});
                        }
                    })
            },
            selectAllsum: function(flag) {
                var self = this;
                self.checkArr = [];
                if(!flag) {
                    self.inVoiceList.forEach(function(item, i) {
                        var data = item.guid;
                        self.checkArr.push(data);
                    });
                } else {
                    self.$set('checkArr', []);
                    self.inVoiceList.forEach(function(item, i) {
                    });
                }
            },
            export: function() {
                var self = this;
                if(self.checkArrList.length == 0) {
                    self.MessageBox({
                        title: '提示',
                        message: '请选择数据!',
                        type: 'alert'
                    }, function(action) {});
                    return;
                }
                Ajax.post('/procurment/exportStock', {
                    'guids': self.checkArrList
                }).
                then(function(response) {
                    var data = response.data;
                    window.open(data);
                })
            },
            exportAll: function() {
                var self = this;
                var goodscate = self.search.goodscate;
                var goodscateSet = '';
                if(!self.sumMoney.QiCount){
                    self.sumMoney.QiCount = 0;
                }
                if(!self.sumMoney.YaoCount){
                    self.sumMoney.YaoCount = 0;
                }
                if(!self.sumMoney.AllCount){
                    if(self.sumMoney.QiCount && self.sumMoney.YaoCount){
                        self.sumMoney.AllCount = (self.sumMoney.QiCount-0)+(self.sumMoney.YaoCount-0)
                    }else if(self.sumMoney.QiCount && !self.sumMoney.YaoCount){
                        self.sumMoney.AllCount = self.sumMoney.QiCount-0;
                    }else if(!self.sumMoney.QiCount && self.sumMoney.YaoCount){
                        self.sumMoney.AllCount = self.sumMoney.YaoCount-0;
                    }else{
                        self.sumMoney.AllCount = 0;
                    }
                }
                var allcount = self.sumMoney.AllCount;
                if(goodscate && goodscate == '1'){
                    goodscateSet = '02';
                    allcount = self.sumMoney.YaoCount;
                }else if(goodscate && goodscate == '2'){
                    goodscateSet = '01';
                    allcount = self.sumMoney.QiCount;
                }
                var params = {'goodsinfo':self.search.goodsinfo,'goodscate':goodscateSet,'allcount':allcount};
                Ajax.post('/procurment/exportStockAll',params).then(function(response) {
                    var data = response.data;
                    window.open(data);
                })
            },
            getDate: function() {
                var self = this;
                self.checkArr = [];
                self.selectAllList = [];
                Ajax.post('/procurment/queryStockList', 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;
                            for (var i = 0; i < self.inVoiceList.length; i++) {
                                self.$set('inVoiceList['+ i +'].checkboxid',false);
                            }

                        } else {
                            self.MessageBox({
                                title: '警告',
                                message: response.data.message,
                                type: 'alert'
                            }, function(action) {});
                        }

                    })
            },
            // 品规格数目（手风琴效果）
            getApplyDetailList: 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;
                // self.search1.mvbillno = billno;
                Ajax.post('/procurment/queryStockLotList', 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);
                        self.sh = [];
                        for(var a=0;a<data.list.length;a++){
                            self.sh.push(false);
                            var date1 = new Date();
                            var date2 = new Date(date1);
                            date2.setMonth(date1.getMonth()+6);
                            var times = date2.getFullYear()+"-"+(date2.getMonth()+1)+"-"+date2.getDate();

                            var mxListss = data.list[a];
                            //有效期
                            var mxLists = mxListss.expiredate;
                            if(mxLists != null && mxLists != ''){
                                var da1 = mxLists.replace(/\-/gi,"/");
                                var da2 = times.replace(/\-/gi,"/");
                            }
                            var time1 = new Date(da1).getTime();
                            var time2 = new Date(da2).getTime();
                            if(time1 <= time2){
                                self.sh.splice(a,1,true);
                            }
                        }
                    });
            },
            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) {
                this.getApplyDetailList(index,guid);
                $('#warp' + index).addClass("active").siblings().removeClass('active');

                this.inVoiceList.forEach(function(list, i) {
                    // self.$set('checkArr[' + i + ']', []);
                    $('#warp' + i).find(".row-launch").slideUp(400, function() {
                        $('#warp' + i).removeClass('active');
                        $('#warp' + i).find(".isFocus").removeClass("focus");
                    })
                })
                $('#warp' + index).find(".row-launch").slideDown(400, function() {
                    $('#warp' + index).find(".isFocus").addClass("focus active");
                })
            },

        },
        watch: {
            'checkArr': function(val) {
                var self = this;
                var arr, oList;
                self.checkArrList = [];
                for(let i = 0; i < val.length; i++) {
                    arr = val[i].split('/');
                    self.checkArrList.push(arr[0]);
                }
                if(self.checkArrList.length == 0){
                    self.selectAllList = false;
                }
            },
            'search.goodscate': function(val) {
                var self = this;
                self.getDate();
            }
        },
        route: {
            activate: function() {
                this.getDate();
                this.getSumMoney();
            }
        }
    };
</script>
<style scoped>
    .line-footer{
        color: #4aa8e5;
        overflow: hidden;
        line-height: 34px;
        border-bottom: 2px solid #4aa8e5;
        margin-bottom: 20px;
    }

</style>