<!--医院对账单 - 列表-->
<template>
    <div class="container resource close-left-menu">
        <div class="pop-banner clearfix">
            <div class="operate-btns">
                <a class="fbtn fb-create" v-link="{path : '/createApplyBills'}">制定科室申领单</a>
                <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-40 fast-search-form">
                <div class="group-row">
                    <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 class="form-group form-label">
                        <div class="control">
                            <input type="text" maxlength="50" v-rule v-model="search.goodsinfo" title='商品名称、编号、厂商、注册证号'
                                   placeholder="商品名称、编号、厂商、注册证号"></div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group form-label">
                        <div class="control control-hint" >
                            <input type="text" id="cn1" maxlength="10" v-rule v-model="search.deptname" @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 depList" @click="selectSupplier(ite)"><span>{{ ite.meddeptname }}</span></li>
                                <li v-if="depList.length == 0"><span>暂无数据!</span></li>
                            </ul>
                        </div>
                    </div>
                    <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>
                <div class="group-row">
                    <div class="form-group form_group_state" style='width:700px;'>
                        <label for="cn5" class="label w80">单据状态</label>
                        <div class="control control-filtering control-filtering-green" style='width:600px;'>
                            <a class="option" href="javascript:void(0)" :class="{'all active':search.billstate==''}" @click="search.billstate=''">全部</a>
                            <a class="option" href="javascript:void(0)" :class="{'all active':search.billstate=='A01'}" @click="search.billstate='A01'">已保存</a>
                            <a class="option" href="javascript:void(0)" :class="{'all active':search.billstate=='A02'}" @click="search.billstate='A02'">已提交</a>
                            <a class="option" href="javascript:void(0)" :class="{'all active':search.billstate=='A03'}" @click="search.billstate='A03'">分配中</a>
                            <a class="option" href="javascript:void(0)" :class="{'all active':search.billstate=='A05'}" @click="search.billstate='A05'">配货中</a>
                            <a class="option" href="javascript:void(0)" :class="{'all active':search.billstate=='A06'}" @click="search.billstate='A06'">已完成</a>
                        </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 id="t_header">
                <tr>
                    <th class="w40">序号</th>
                    <th class="w130">单据编号</th>
                    <th class="w80">出库库房</th>
                    <th class="w80">申领科室</th>
                    <th class="w80">申领日期</th>
                    <th class="w80">品规数</th>
                    <th class="w80">制单人</th>
                    <th class="w100">单据状态</th>
                    <th class="w80">备注</th>
                    <th class="w80">操作</th>
                </tr>
                </thead>
                <tbody class="txt_v">
                <tr v-if="list.length==0">
                    <td colspan="10" >
                        暂无符合条件的记录
                    </td>
                </tr>
                <tr v-else v-for='item in list'>
                    <td>{{$index+1}}</td>
                    <td class="t-left pr10">{{item.billno}}</td>
                    <td>{{item.depotname}}</td>
                    <td>{{item.meddeptname}}</td>
                    <td>{{item.applydate | getYMD}} <br>{{item.applydate | getHMS}}</td>
                    <td class="pr10">{{item.detailrecordsum}}</td>
                    <td>{{item.operatername}}</td>
                    <td>{{item.billstate | applyState}}</td>
                    <td class="t-left pr10">{{item.memo}}</td>
                    <td>
                        <a  v-on:click="goDetail(item.guid)" class="btn button-green" >明细</a>
                    </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 {
                list:[],
                depList:[],
                // 明细数据
                mxList: [],
                // 查询条件
                search: {
                    pageSize: 50,
                    page: 1,
                    totalPages: 0,
                    total: 0,
                    billno: '',
                    billstate: '',
                    goodsinfo:'',
                    state: '',
                    startdate: '',
                    enddate: '',
                    meddeptguid:'',
                },
                readonlyFlag:false,
                supList:[],
                stategoods:false,
                over:0,
            };
        },
        methods: {
            blur:function(){
                if(this.over==false){
                    this.stategoods=false;
                }
            },
            onStateGoods:function(){
                var self = this;
                self.getDeptList();
                self.stategoods =true;
            },
            // 导出查询的数据结果出来
            selectSupplier:function(data){
                var self = this;
                self.search.meddeptguid = data.meddeptguid;
                self.search.deptname = data.meddeptname;
                self.stategoods =false;
            },
            getDeptList: function () {
                var self = this;
                Ajax.post('/billType/getDeptList',{'deptname':self.search.deptname})
                    .then(function (response){
                        var data = response.data.data;
                        if(response.data.errorCode==0){
                            self.$set('depList',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;
                }
                Ajax.post('/billType/findApplyByStaff', self.search)
                    .then(function (response){
                        var data = response.data.data;
                        if(response.data.errorCode==0){
                            self.$set('list',data.list);
                            self.search.totalPages = data.totalPages;
                            self.search.total = data.total;
                        }

                    })
            },
            // 跳转到明细页面
            goDetail:function(guid){
                var self = this;
                self.$route.router.go('/applyBillsList/'+guid);
            },
            // 导出
            download:function(){
                var self = this;
                Ajax.post('/billType/exportApplyDetail', self.search)
                    .then(function (response){
                        var res = response.data;

                        // if(response.data.errorCode==0){

                        window.open(res);
                        // }

                    })
                //
            }
        },
        route: {
            activate: function () {
                this.Date();
                this.getData(false);
                this.getDeptList();
            }
        },
        watch:{
            'search.billstate':function(){
                this.getData(true);
            },
            'search.deptname':function(){
                var self = this;
                self.getDeptList();
                if(self.search.deptname == null || self.search.deptname == ''){
                    self.search.meddeptguid = '';
                }
            },
        }
    };
</script>