<template>
    <div>
        <div class="container resource close-left-menu">

            <div class="pop-banner clearfix">
                <div class="operate-btns">
                    <a @click="updTrmeddeptdoList" class="fbtn fb-submit ml-10 mr-10">批量出库确认</a>
                    <a href="javascript:;" class="fbtn fb-Print2 ml-10 mr-10" @click='printCkd'>批量打印单据</a>
                    <a href="javascript:;" class="fbtn fb-Print2 ml-10 mr-10" @click='needlePrintCkd'>针式打印</a>
                    <a href="javascript:;" class="fbtn fb-upload" @click='listApplyDetaiExport'>导出</a>
                </div>
                <h3 class="current-module">拣货确认</h3>
            </div>

            <!--order-orderlist-view start-->
            <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">
                            <div class="control">
                                <input type="text" maxlength="17" v-rule v-model="search.slbillno" title='单据编号' placeholder="单据编号">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="control select-style">
                                <select v-model="search.depotname">
                                    <option value="" style='display:none;' selected>请选择 出库库房 </option>
                                    <option :value="ite.hdeptname" v-for="ite in getDeptList">{{ite.hdeptname}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="group-row">
                        <div class="form-group">
                            <div class="control select-style">
                                <input type="text" maxlength="17" v-rule v-model='search.ckbillno' title='出库编号' placeholder="出库编号">
                            </div>
                        </div>
                        <!--<div class="form-group">
                            <div class="control select-style">
                                <select v-model="search.meddeptname">
                                    <option value="" style='display:none;' selected>请选择 申领科室 </option>
                                    <option :value="ite.hdeptname" v-for="ite in getDepartmentList">{{ite.hdeptname}}</option>
                                </select>
                            </div>
                        </div>-->

                        <div class="form-group">
                            <div class="control control-hint" >
                                <input type="text" id="cn1" maxlength="10" v-rule v-model="search.meddeptname" @click='onStateGoods'  title='申领科室' placeholder="申领科室"  v-on:blur="blur">
                                <ul class="hint-list" v-show="stategoods" v-on:mouseover="over=1" v-on:mouseout="over=0" style="overflow-y: auto;max-height: 400px;">
                                    <li v-for="ite in getDepartmentList" @click="selectDepartment(ite)"><span>{{ite.hdeptname}}</span></li>
                                    <li v-if="getDepartmentList.length == 0"><span>暂无数据!</span></li>
                                </ul>
                            </div>
                        </div>

                    </div>
                    <div class="group-row">
                        <div class="form-group">
                            <!-- <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.begindate' :readonly="readonlyFlag" title='退货开始日期' placeholder="拣货开始日期" styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
                                </div>
                                <span class="text-and" style="width: 45px">至</span>
                                <div style="width: 46%;float: right;">
                                    <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:560px;'>
                            <label class="label">单据状态</label>
                            <div class="control control-filtering control-filtering-green fl w450">
                                <a class="option" href="javascript:;" :class="{'all active':search.billstate==''}" v-on:click="search.billstate=''">全部</a>
                                <a class="option" href="javascript:;" :class="{'all active':search.billstate=='YC1'}" v-on:click="search.billstate='YC1'">已分配</a>
                                <a class="option" href="javascript:;" :class="{'all active':search.billstate=='YC2'}" v-on:click="search.billstate='YC2'">已出库</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="getData">查 询</button>
                    </div>
                </div>

                <table class="itable itable-td-long-text">
                    <thead>
                    <tr>
                        <th class="w70">
                            <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="w130">单据编号</th>
                        <th class="w130">出库库房</th>
                        <th class="w100">申领科室</th>
                        <th class="w80">品规数</th>
                        <th class="w100">申领日期</th>
                        <th class="w80">申领人</th>
                        <th class="w80">单据状态</th>
                        <th class="w100">金额(元)</th>
                        <th class="w100">备注</th>
                        <th class="w100">操作</th>
                    </tr>
                    </thead>
                    <tbody class="txt_v">
                    <tr v-if="getDeptApplyList==null || getDeptApplyList.length==0">
                        <td colspan="11">暂无符合条件的记录</td>
                    </tr>
                    <tr v-for="item in getDeptApplyList" v-else>
                        <td class="w30">
                            <div class="checkbox-control">
                                <input type="checkbox" :id="item.guid" v-model="checkArr" :value="item.guid+'/'+item.ckbillno+'/'+item.slbillno+'/'+item.slguid+'/'+item.billstate">
                                <label class="checkbox" :for="item.guid">{{ $index + 1 }}</label>
                            </div>
                        </td>
                        <td>{{item.slbillno}}</td>
                        <td>{{item.medstorename}}</td>
                        <td>{{item.meddeptname}}</td>
                        <td>{{item.detailrecordsum}}</td>
                        <td>{{item.applydate|getYMD}}</td>
                        <td>{{item.operatername}}</td>
                        <td>{{item.billstate|ckstate}}</td>
                        <td class="t-right">{{item.amount | numDigit 2 | numFmt}}</td>
                        <td>{{item.memo}}</td>
                        <td>
                            <a class="btn button-green" v-link="{path : 'pickingConfirmDetail/'+item.guid+'/'+item.ckbillno}">明细</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <pagination @page-change="getData" :class="['m-20-0']" :page-no.sync="search.page" :total-pages.sync="search.totalPages">
                </pagination>

            </div>
            <!--order-orderlist-view end-->

        </div>
        <!--新加提示信息 start -->
        <div class="roll-bg" v-show='requestS'>
            <div class="w60" style="margin:0 auto;">
                <img src="/images/roll.gif">
            </div>
            <div class="container resource t-center text-color-red">
                正在处理中，请勿关闭！
            </div>
        </div>
        <!--新加提示信息 end-->
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                requestS:false,
                search: {
                    page: 1,
                    totalPages: 1,
                    pageSize: 50,
                    pageNo: 0,
                    slbillno: '',
                    ckbillno: '',
                    depotname: '',
                    meddeptname: '',
                    begindate: this.GetDate().begindate,
                    enddate: this.GetDate().enddate,
                    billstate: '',
                },
                getDeptList: '', // 库房list
                getDepartmentList: '', // 科室list
                stategoods:false,
                over:0,
                getDeptApplyList: '',
                checkArr: [], //导出
                checkArrList: '',
                selectAllList: false,
                objP: [],
            };
        },
        methods: {
            blur:function(){
                if(this.over==false){
                    this.stategoods=false;
                }
            },
            onStateGoods:function(){
                var self = this;
                self.getDepartmentLists(true);
                self.stategoods =true;
            },
            // 选择科室
            selectDepartment:function(data){
                var self = this;
                self.search.meddeptname = data.hdeptname;
                self.stategoods =false;
            },
            getDepartmentLists: function (flag) {
                var self = this;
                var params = {'hdeptname':self.search.meddeptname};
                if(flag){
                    params = {'hdeptname':''};
                }
                Ajax.post('/procurment/getDepartmentList',params).
                then(function(response) {
                    var res = response.data.data;
                    if(response.data.errorCode == 0) {
                        self.$set('getDepartmentList', res);
                    } else {
                        self.MessageBox({
                            title: '提示',
                            message: response.data.message,
                            type: 'alert'
                        }, function(action) {});
                    }
                })
            },
            init: function() {
                var self = this;
                Ajax.post('/procurment/getDeptListOut').
                then(function(response) {
                    var data = response.data.data;
                    if(response.data.errorCode == 0) {
                        self.$set('getDeptList', data);
                    } else {
                        self.MessageBox({
                            title: '提示',
                            message: response.data.message,
                            type: 'alert'
                        }, function(action) {});
                    }

                })
            },
            getData: function() {
                var self = this;
                self.checkArr = [];
                self.selectAllList = [];
                Ajax.post('/procurment/getDeptApplyList', self.search).
                then(function(response) {
                    var res = response.data.data;
                    if(response.data.errorCode == 0) {
                        self.$set('getDeptApplyList', res.list);
                        self.search.pageNo = res.pageNo;
                        self.search.totalPages = res.totalPages;

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

                })
            },
            listApplyDetaiExport: function() {
                var self = this;
                if(self.checkArrList.length == 0) {
                    self.MessageBox({
                        title: '提示',
                        message: '请勾选要出库的单据',
                        type: 'alert'
                    }, function(action) {});
                    return;
                }
                self.objP = [];
                for(var i = 0; i < self.getDeptApplyList.length; i++) {

                    var oList = {
                        'guid': self.getDeptApplyList[i].guid,
                        'ckbillno': self.getDeptApplyList[i].ckbillno,
                        'slbillno': self.getDeptApplyList[i].slbillno,
                        'slguid': self.getDeptApplyList[i].slguid,
                        'billstate': self.getDeptApplyList[i].billstate
                    }
                    self.objP.push(oList)

                }
                //Ajax.post('/procurment/listApplyDetaiExport',{list:self.objP}).
                Ajax.post('/procurment/listApplyDetaiExport',{list:self.checkArrList}).
                then(function(response) {
                    window.open(response.data);
                })
            },
            updTrmeddeptdoList: function() {
                var self = this;
                if(self.checkArrList.length == 0) {
                    self.MessageBox({
                        title: '提示',
                        message: '请勾选要出库的单据',
                        type: 'alert'
                    }, function(action) {});
                    return;
                }
                self.requestS = true;

                Ajax.post('/procurment/updTrmeddeptdoList', {
                    list: self.checkArrList
                }).
                then(function(response) {
                    var res = response.data.data;
                    self.requestS = false;

                    if(response.data.errorCode == 0) {
                        self.MessageBox({
                            title: '提示',
                            message: '操作成功',
                            type: 'alert'
                        }, function(action) {});
                        self.getData();
                    } else {
                        self.MessageBox({
                            title: '提示',
                            message: response.data.message,
                            type: 'alert'
                        }, function(action) {});
                    }

                })
            },
            printCkd: function() {
                var self = this;
                if(self.checkArrList.length == 0) {
                    self.MessageBox({
                        title: '提示',
                        message: '请勾选需要打印的单据',
                        type: 'alert'
                    }, function(action) {});
                    return;
                }
                Ajax.post('/procurment/printCkd', {
                    list: self.checkArrList
                }).then(function(response) {
                    var res = response.data.data;
                    if(response.data.errorCode == 0) {
                        res.forEach(function(item, i) {

                            window.open(item);
                        });

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

                })
            },
            needlePrintCkd: function() {
                var self = this;
                if(self.checkArrList.length == 0) {
                    self.MessageBox({
                        title: '提示',
                        message: '请勾选需要打印的单据',
                        type: 'alert'
                    }, function(action) {});
                    return;
                }
                Ajax.post('/procurment/printCkdZS', {
                    list: self.checkArrList
                }).then(function(response) {
                    var res = response.data.data;
                    if(response.data.errorCode == 0) {
                        res.forEach(function(item, i) {

                            window.open(item);
                        });

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

                })
            },
            selectAllsum: function(flag) {
                var self = this;
                self.checkArr = [];
                if(!flag) {
                    self.getDeptApplyList.forEach(function(item, i) {
                        var data = item.guid + '/' + item.ckbillno + '/' + item.slbillno + '/' + item.slguid + '/' + item.billstate;
                        self.checkArr.push(data);
                    });
                } else {
                    self.$set('checkArr', []);
                    self.getDeptApplyList.forEach(function(item, i) {

                    });
                }
            },
        },
        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],
                        'ckbillno': arr[1],
                        'slbillno': arr[2],
                        'slguid': arr[3],
                        'billstate': arr[4]
                    }
                    self.checkArrList.push(oList)
                }
                if(self.checkArrList.length == 0){
                    self.selectAllList = false;
                }
            },
            'search.billstate': function(val) {
                this.getData();
            },
            'search.meddeptname':function(){
                var self = this;
                self.getDepartmentLists();
            },
        },
        route: {
            activate: function() {
                this.init();
                this.getData();
            }
        }
    };
</script>