<!--医院对账单 - 列表-->
<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>
            </div>
            <h3 class="current-module">缺货登记</h3>
        </div>
        <div class="order-orderlist-view clearfix">
            <div class="pd-form form-label4em mb-40 fast-search-form">
                <div class="group-row">
                    <div class="form-group form-label">
                        <div class="control">
                            <input type="text" v-rule maxlength="17" v-model="search.billno" title='申领单号' placeholder="申领单号"></div>
                    </div>
                    <div class="form-group form-label">
                        <div class="control">
                            <input maxlength="50" v-rule type="text" v-model="search.goodsinfo" title='商品名称、编号、厂商、注册证号'
                                   placeholder="商品名称、编号、厂商、注册证号"></div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group form-label">
                        <!-- <label for="cn1" class="label">结算日期</label> -->
                        <div class="control control-date" style="height:34px;overflow: inherit;">
                            <div style="width:44%;float:left;">
                                <datepicker :target.sync="search.startdate" :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">
                        <label for="cn4" class="label">科室</label>
                        <div class="control">
                            <select v-model="search.deptguid" id='cn4' class="inp2">
                                <option value="">请选择</option>
                                <option v-for='item in deptlist' :value="item.value">{{item.label}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="group-row t-right">
                    <button  v-on:click="getData(false)" class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle">查 询</button>
                </div>
            </div>
            <table class="itable itable-td-long-text">
                <thead>
                <tr>
                    <th class="w60">
                        <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>
                    </th>
                    <th class="w100">申领日期</th>
                    <th class="w100">单据编号</th>
                    <th class="w80">申领科室</th>
                    <!-- <th class="w100">供应商</th> -->
                    <th class="w80">商品编码</th>
                    <th class="w100">商品</th>
                    <th class="w80">单位</th>
                    <th class="w80">申领数</th>
                    <th class="w80">库存缺货数</th>
                    <th class="w80">缺货原因</th>
                    <th class="w80">采购数量</th>
                </tr>
                </thead>
                <tbody class="txt_v">
                <tr v-if="list.length==0">
                    <td colspan="15" >
                        暂无符合条件的记录
                    </td>
                </tr>
                <tr v-else v-for='item in list'>
                    <td>
                        <div class="checkbox-control">
                            <input type="checkbox" :id="item.guid+'/'+item.rowno" v-model="checkArr" :value="item.guid+'/'+item.rowno">
                            <label class="checkbox" :for="item.guid+'/'+item.rowno">{{ $index + 1 }}</label>
                        </div>
                    </td>
                    <td>{{item.applydate | getYMD}}</td>
                    <td class="t-left pr10">{{item.billno}}</td>
                    <td class="pr10">{{item.meddeptname}}</td>
                    <!-- <td class="t-left pr10">
                       {{item.suppliername}}
                    </td> -->
                    <td class='t-left pr10'>{{item.goodscode}}</td>
                    <td class="t-left pr10">{{item.goodsname}} <br> {{item.goodsspec}} <br>{{item.producer}}</td>
                    <td>{{item.unit}}</td>
                    <td>{{item.applyqty}}</td>
                    <td>{{item.osqty}}</td>
                    <td>{{item.varchar1}}</td>
                    <td>{{item.poqty}}</td>
                </tr>
                </tbody>
            </table>
            <pagination
                @page-change="getData(true)"
                :page-no.sync="search.page"
                :class="['m-20-0']"
                :total-pages.sync="search.totalPages">
            </pagination>

        </div>

    </div>
</template>
<script >
    module.exports = {
        data: function () {
            return {
                list:[],

                // 明细数据
                mxList: [],
                // 查询条件
                search: {
                    pageSize: 50,
                    page: 1,
                    totalPages: 0,
                    total: 0,
                    billno: '',
                    goodsinfo:'',
                    billstate:'',
                    startdate: '',
                    enddate: '',
                    deptguid:'',
                    goodscate:''
                },
                readonlyFlag:false,
                goodscateList: [],
                deptlist:[],
                selectAllList: false,
                checkArr:[],
                checkArrList: '',
                excelList:[],
            };
        },
        methods: {
            selectAllsum: function(flag) {
                var self = this;
                self.checkArr = [];
                if(!flag) {
                    self.list.forEach(function(item, i) {
                        var data = item.guid + '/' + item.rowno;
                        self.checkArr.push(data);
                    });
                } else {
                    self.$set('checkArr', []);
                    self.list.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('/billType/exportExcel', {
                    'guids': self.checkArrList
                }).
                then(function(response) {
                    var data = response.data;
                    window.open(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.startdate = yn+'-'+mn+'-'+dn;
            },
            getData: function (falg) {
                var self = this;
                self.list=[];
                if(!falg){
                    self.search.page=1;
                }
                self.checkArr = [];
                self.selectAllList = [];
                Ajax.post('/billType/findTrmeddeptdoos', self.search)
                    .then(function (response){
                        var res = response.data.data;
                        if(response.data.errorCode==0){

                            self.$set('list',res.list);
                            self.search.totalPages = res.totalPages;
                            self.search.total = res.total;
                        }

                    })
            },
            // 科室查询
            depart:function(state){
                var self = this;
                self.search.parameter_category=state;
                Ajax.get('/util/departmentsInfo',self.search)
                    .then(function (response){
                        var data = response.data.data;
                        if(response.data.errorCode==0){
                            self.$set('deptlist',response.data.data);

                        }
                    })
            }

        },
        watch: {
            'checkArr': function(val) {
                var self = this;
                var arr, oList;
                self.checkArrList = [];
                for(let i = 0; i < val.length; i++) {
                    arr = val[i].split('/');
                    oList = {
                        guid:arr[0],
                        rowno:arr[1]
                    }
                    self.checkArrList.push(oList);
                }
                console.log(self.checkArrList);
                if(self.checkArrList.length == 0){
                    self.selectAllList = false;
                }
            }

        },
        route: {
            activate: function () {
                this.Date();
                this.depart(2);
                this.getData(false);
            }
        },
    };
</script>