<template>
    <div class="container resource close-left-menu contaNEW">
        <div class="pop-banner clearfix">
            <!-- <div class="operate-btns">
                </div> -->
            <h3 class="current-module">采购计划查询</h3>
        </div>
        <!--purchase-plan start-->
        <div class="purchase-plan">
            <div class="pd-form fast-search-form">
                <div class="group-row">
                    <div class="form-group">
                        <!-- <label for="cn1" class="label">计划单号</label> -->
                        <div class="control select-style">
                            <input type="text" id="cn1" maxlength="17" v-rule v-model='search.search_LIKE_billno' placeholder="计划单号"></div>
                    </div>
                    <div class="form-group">
                        <!-- <label class="label" for='cn2'>商品</label> -->
                        <div class="control select-style">
                            <input type="text" id="cn2" maxlength="50" v-rule v-model="search.search_LIKE_goodsname" placeholder="商品"></div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group form-label">
                        <!-- <label for="cn3" class="label">制单日期</label> -->
                        <div class="control control-date" style="height:34px;overflow: inherit;">
                            <div style="width: 42%;float: left">
                                <datepicker :target.sync="search.search_GTE_startDate " :readonly="readonlyFlag" styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;" placeholder="制单开始日期"></datepicker>
                            </div>
                            <span class="text-and" style="width: 45.7px;height:32px;">至</span>
                            <div style="width: 48%;float: right;">
                                <datepicker :target.sync="search.search_LTE_endDate" :readonly="readonlyFlag" styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;" placeholder="制单结束日期"></datepicker>
                            </div>
                        </div>
                    </div>
                    <div class="form-group form-label">
                        <label for="cn1" class="label">单据类型</label>
                        <div class="control select-style">
                            <!-- <select-ui :list="$billType" v-model="search.search_EQ_billtype" v-bind:disabled="disabled"
                                               class='inp4'></select-ui> -->
                            <select v-model="search.search_EQ_billtype" class="inp4">
                                                     <option value="">--请选择--</option>
                                            <option v-for="type in $store.state.$billType" v-bind:value="type.catenumber">
                                                {{type.catename}}
                                            </option>
                                        </select>
                        </div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group">
                        <label class="label w80">业务状态</label>
                        <div class="control control-filtering control-filtering-green fl" style='width:390px;'>
                            <a class="option" :class="{'all active':search.search_EQ_billstate==''}" href="javascript:void(0)" @click="search.search_EQ_billstate=''">全部</a>
                            <a class="option" :class="{'all active':search.search_EQ_billstate=='Y'}" href="javascript:void(0)" @click="search.search_EQ_billstate='Y'">已提交</a>
                            <a class="option" :class="{'all active':search.search_EQ_billstate=='N'}" href="javascript:void(0)" @click="search.search_EQ_billstate='N'">未提交</a>
                            <!--
                        <a class="{{ state3 }} option" href="javascript:void(0)" @click="state('3')">待出库</a>
                        <a class="{{ state4 }} option" href="javascript:void(0)" @click="state('4')">部分出库</a>
                        <a class="{{ state5 }} option" href="javascript:void(0)" @click="state('5')">全部出库</a>
                        <a class="{{ state6 }} option" href="javascript:void(0)" @click="state('6')">部分入库</a>
                        <a class="{{ state7 }} option" href="javascript:void(0)" @click="state('7')">已完结</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>
            <div class="m-20-0">
                <button class="btn button-green" v-link="{path:'/purchaseAddPlan'}">新增医院采购计划</button>
            </div>
            <table class="itable itable-thead-13px">
                <thead id='t_header'>
                    <tr>
                        <th class="w50">序号</th>
                        <th class="w100">计划单号</th>
                        <th class="w100">制单日期</th>
                        <th class="w100">期望到货日期</th>
                        <th class="w50">品规数</th>
                        <th class="w80">订单类型</th>
                        <th class="w80">单据状态</th>
                        <th class="w70">操作人</th>
                        <th class="w80">备注</th>
                        <th class="w180">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="trmedplan in trmedplanList">
                        <td>{{$index + 1}}</td>
                        <td class="t-left">{{trmedplan.billno}}</td>
                        <td>{{trmedplan.inputdate | getYMD}} </br>{{trmedplan.inputdate | getHMS}}</td>
                        <td>{{trmedplan.planenddate | getYMD}}</br>{{trmedplan.planenddate | getHMS}}
                        </td>
                        <td>{{trmedplan.varchar1}}</td>
                         <td>{{trmedplan.billtype | billtype }}</td>
                        <td>{{trmedplan.billstate | billstate_trdoo }}</td>
                        <td>{{trmedplan.operatername}}</td>
                        <td>{{trmedplan.memo}}</td>
                        <td class="pt9">
                            <div class="from-button">
                                <a href="javascript:;" class="green-button p-lr-10" v-link="{path:'/trPlan/purchasePlanView/' + trmedplan.guid}">明细<i>|</i>
                                    </a>
                                <a href="javascript:;" class="green-button p-lr-10" v-link="{ path: '/planTrack/' + trmedplan.guid} ">单据跟踪<i>|</i></a>
                                <a href="javascript:;" class="green-button p-lr-10" v-on:click="exportTrmedplan(trmedplan.billno)">导出</a>
                            </div>
                            <!-- <a class="btn-d btn-d-activate" >明细</a>
                                <a class="btn-d btn-d-activate" >单据跟踪</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>
        <!--purchase-plan end-->
    </div>
</template>

<script>
    module.exports = {
        data: function() {
            return {
                billtype: [{
                        value: "01",
                        label: "普耗"
                    }, {
                        value: "02",
                        label: "跟台高值"
                    },
                    {
                        value: "03",
                        label: "备货高值"
                    },
                    {
                        value: "04",
                        label: "药品"
                    },
                    {
                        value: "05",
                        label: "后勤物资"
                    },
                    {
                        value: "06",
                        label: "消毒用品"
                    },
                    {
                        value: "07",
                        label: "洗涤用品"
                    },
                    {
                        value: "08",
                        label: "中药材"
                    },
                    {
                        value: "09",
                        label: "设施设备"
                    }
                ],
                trmedplanList: [],
                stateAll: 'all active',
                state1: 'option',
                state2: 'option',
                // state3 : 'option',
                // state4 : 'option',
                // state5 : 'option',
                // state6 : 'option',
                // state7 : 'option',
                search: {
                    pageSize: 50,
                    page: 1,
                    totalPages: 0,
                    search_LIKE_billno: '',
                    search_EQ_billtype: '',
                    search_EQ_billstate: '',
                    search_LTE_endDate: '',
                    search_GTE_startDate: '',
                    search_LIKE_goodsname: '',
                    search_EQ_medguid: '',
                    billno: ''
                },
                authoritySetting: {
                    oneSearchFlag: false,
                    oneMakeMonthPlanFlag: true,
                    twoDetailFlag: true,
                    twoTraceFlag: true,
                },
            };
        },
        methods: {
            billTypefn: function(val) {
                let ret = '';
                this.$store.state.$billType.forEach(ele => {
                    if (val == ele.catenumber) {
                        ret = ele.catename;
                    }
                });
                return ret
            },
            exportTrmedplan: function(billno) {
                var self = this;
                self.search.billno = billno;
                Ajax.get('/hospitalTrmedplan/exportTrmedplan', this.search)
                    .then(function(response) {
                        var data = response.data;
                        window.open(data);
                    })
            },
            getData: function(isRefresh) {
                var self = this;
                if (isRefresh) {
                    this.search.page = 1;
                }
                Ajax.get('/hospitalTrmedplan/trmedplanList', this.search)
                    .then(function(response) {
                        var data = response.data.data;
                        self.$set("trmedplanList", data.list);
                        self.search.totalPages = data.totalPages;
                    })
            }
        },
        route: {
            data: function() {
                this.search.search_LIKE_billno = window.sessionStorage.getItem('billno');
                window.sessionStorage.setItem('billno', '');
                if (window.sessionStorage.getItem('value')) {
                    this.search.search_EQ_billstate = window.sessionStorage.getItem('value');
                    window.sessionStorage.removeItem('value');
                }
                this.getData();
            }
        },
        watch: {
            'search.search_EQ_billstate': function() {
                this.getData();
            }
        }
    };
</script>