<template>
    <div>

    <div class="container resource close-left-menu contaNEW">
        <div class="pop-banner clearfix ">
            <h3 class="current-module">高值送货单汇总</h3>
        </div>
        <div class="order-orderlist-view clearfix">

        <div class="pd-form fast-search-form">
            <div class="group-row">
                <div class="form-group">
                    <div class="control">
                        <input type="text" v-model="search.search_LIKE_billno" placeholder="送货单号" title="送货单号" maxlength="26" v-rule></div>
                </div>
                <div class="form-group form-label">
                    <label class="label" for='cn25'>要货单位</label>
                    <div class="control">
                        <select-ui :list="hosList" v-model='selectMed' class='inp4' id='cn25'></select-ui>
                        <!--
                        <div class="div-select before-none" style="width:100%;">
                            <ul  style="z-index:999;top:0px;width:100%;">
                              <li class="div-select-item pl10" v-for="hos in hosList">
                                  <span style="width:100%;" @click="getMedListRelation()">{{hos.name}}</span>
                              </li>
                              <li class="div-select-item pl10" v-if="hosList.length==0">
                                  <span style="width:100%;">未查询的结果！</span>
                                  <span style="width:100%;">&nbsp;</span>
                                  <span style="width:100%;">&nbsp;</span>
                              </li>
                            </ul>
                        </div>
                        -->
                    </div>
                </div>
            </div>
            <div class="group-row">
                <div class="form-group">
                    <label for="cn3" class="label"><!-- 出库日期 --></label>
                    <div class="control control-date" style="height:34px;overflow: inherit;">
                        <div style="width:44%;float:left;">
                            <datepicker :target.sync="search.search_GTE_dodate" :readonly="readonlyFlag" title='送货开始日期'
                                        placeholder='送货开始日期'
                                        styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
                        </div>
                        <span class="text-and">-</span>
                        <div style="width:48%;float:left;">
                            <datepicker :target.sync="search.search_LTE_dodate" :readonly="readonlyFlag" title='送货结束日期'
                                        placeholder='送货结束日期'
                                        styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;"></datepicker>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="cn1" class="label">业务状态</label>
                    <div class="control control-filtering control-filtering-green"
                         style="float:left;width:300px;">

                        <a id="all" class="all active" href="javascript:;"
                           @click="state('','all')">全部</a>
                        <a id="wating" class="option" href="javascript:;"
                           @click="state('D01','wating')">待提交</a>
                        <a id="submit" class="option" href="javascript:;"
                           @click="state('D02','submit')">已提交</a>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group">
                        <!-- <label for="cn1" class="label">要货单号</label> -->
                        <div class="control">
                            <input type="text" v-model="search.search_LIKE_supplierpobillno" title='要货单号'
                                   placeholder='要货单号' maxlength="26" v-rule></div>
                    </div>
                </div>
            </div>
            <div class="group-row t-right">
                <button v-on:click="getData()" class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle">查
                    询
                </button>
            </div>
        </div>
        <!--     <div class="from-button t-left">
                 <a class="green-button p-lr-10" href="https://obs.myhwclouds.com/csylcloud-file/templet/%E4%BE%9B%E5%BA%94%E5%95%86%E5%87%BA%E5%BA%93%E5%8D%95%E5%AF%BC%E5%85%A5%E6%A8%A1%E7%89%88.xls">下载模板<i>|</i></a>
                <upload-excel-plan :class="['green-button p-lr-10']"
                         :tag="tagType"
                         :type="fileType"
                         :label="fileLabel"
                         :exceltype="med"
                         v-on:file-change="getTipsPlan"
                         ></upload-excel-plan>
             </div> -->
        <table class=" itable itable-thead-13px ">
            <thead id="t_header">
            <tr>
                <th class="w50">序号</th>
                <th class="w120">要货单位</th>
                <th class="w100">送货单号</th>
                <th class="w80">单据类型</th>
                <th class="w80">业务状态</th>
                <th class="w70">明细条目数</th>
                <th class="w100">送货金额(元)</th>
                <th class="w100">要货单号</th>
                <th class="w80">送货日期</th>
                <th class="w80">备注</th>
                <th class="w120">操作</th>
            </tr>
            </thead>
            <tbody class="txt_v">
            <tr>
                <td colspan="10" v-if="mxList.length==0">
                    暂无符合条件的记录
                </td>
            </tr>
            <tr v-for="trdo in mxList">
                <td class="v-top">{{$index+1}}</td>
                <td class="t-left pr10 v-top">
                    <div class="p-lr-10">{{trdo.medname}}</div>
                </td>
                <td class="t-left pr10 v-top">{{trdo.billno}}</td>
                <td class="t-center v-top">{{trdo.billtype | HvBillType}}</td>
                <td class="v-top" :class="trdo.billstate=='D01'?'text-color-yellow':''">{{trdo.billstate | billstate_trdo}}
                </td>
                <td class="pr10 v-top">{{trdo.detailrecordsum}}条</td>
                <td class="t-right pr10 v-top">{{trdo.detailmoneysum | numDigit 2 | numFmt}}</td>
                <td class="t-left pr10 v-top">{{trdo.supplierpobillno}}</td>
                <td class="v-top">{{trdo.dodate | getYMD}}
                    <br>
                    {{trdo.dodate | getHMS}}
                </td>
                <td class="v-top t-left pr10">{{trdo.memo}}</td>
                <td class="pt7">
                    <a href="javascript:;" class="btn button-green"
                       v-on:click="goTRDoDetail(trdo.billstate,trdo.supplierpobillno,trdo.billno,trdo.billstate)">明细</a>
                    <!-- <a class="btn-d btn-d-activate"
                      v-on:click="goTRDoDetail(trdo.billtype,trdo.supplierpobillno,trdo.billno,trdo.billstate)">明细</a>
                    <a class="btn-d btn-d-activate" v-link="{ path: '/orderOutall3-1/' + trdo.guid}">单据跟踪</a> -->
                    <!--            <div class="from-button">
                                  <a href="javascript:;" class="green-button p-lr-10"
                                  v-on:click="goTRDoDetail(trdo.billtype,trdo.supplierpobillno,trdo.billno,trdo.billstate)">明细<i>|</i></a>
                                  <a href="javascript:;" class="green-button p-lr-10"
                                  v-link="{ path: '/orderOutall3-1/' + trdo.guid}">单据跟踪</a>
                             </div> -->
                </td>
            </tr>
            </tbody>
        </table>
        <div class="pagination m-20-0">
            <pagination
                    @page-change="getData"
                    :page-no.sync="search.page"
                    :total-pages.sync="search.totalPages">
            </pagination>
        </div>
    </div>
    </div>
    <!--star 9-9 弹出导入提示信息-->
    <div class="modal " :class="backMessage.showDialog=='Y'?'':'hide'">
        <div class=" resource">
            <div class="audit-detail" style="width:540px; margin-left: 250px; padding-right: 10px;">
                <span class="close-win" v-on:click="closeDialog()"></span>
                <div class="sdiv-9-9b" style="">
                    <a class="btn-d btn-d-activate btn-d-lg" href="javascript:;">错误信息提示</a>
                </div>
                <div class="status-process wbe-0 clearfix pd20"
                     style="padding-top:0px; max-height: 400px; overflow-y: auto;">
                    <p style="color:#606f7a;font-size:14px;">
                    </p>
                    <div class="sp-head sp-headb mb-0" v-for="m in backMessage.mList">
                  <span class="sp-col ml-0">
                    <span class="control radio-control "> 
                      <p class="w30 fl">{{m.errorRowNo}}</p>
                      <p class="fl t-center text-color-yellow mr-20">{{m.errorType}}</p>
                      <p class="fl t-center mr-20">{{m.errorGoodCode}}</p>
                      <p class="fl t-center mr-20">{{m.errorGoodName}}</p>
                    </span>
                  </span>
                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>

    <!--star 9-9 受理弹出-->
</template>
<!--出库单汇总-->
<script>

    module.exports = {
        data: function () {
            return {
                fileType: 'file',
                tagType: 'a',
                med: 'cdk',
                fileLabel: '选择文件',
                // 导入之后信息提示
                backMessage: {
                    showDialog: 'N',
                    mList: [],// 提示信息
                },
                // 医院
                hosList: [],
                // 明细数据
                mxList: [],
                // 订单总数量
                totalNum: 0,
                // 查询条件
                search: {
                    pageSize: 50,
                    page: 1,
                    totalPages: 0,
                    //total: 0,
                    search_LIKE_billno: '',// 出库单号
                    search_GTE_dodate: '',// 出库日期 起
                    search_LTE_dodate: '',// 出库日期 止
                    search_EQ_billState: '',// 业务状态
                    serach_EQ_medguid: '',// 要货单位
                    search_LIKE_supplierpobillno: '',// 要货单号

                },
                // 日期控件
                readonlyFlag: false,
            };
        },
        methods: {
            // 获取数据
            getData: function () {
                var self = this;
                Ajax.get('/cost/listCommonTrsupplierdo', this.search)
                    .then(function (response) {
                        var data = response.data.data;
                        self.$set('mxList', data.list);

                        self.search.pageno = data.pageno;
                        self.search.totalPages = data.totalPages;
                        self.search.total = data.total;
                    })
            },
            // 跳转到订单受理详情页面
            goTRDoDetail: function (billtype, trpo_billno, trdo_billno, billstate) {
                var self = this;
                // 根据执行状态跳转不同的页面 立继武
                if (billstate == self.ctns.dobillstated03 || billstate == self.ctns.dobillstated02) {
                    //已提交 已完结 跳转已完结、已提交页面 立继武
                    self.$route.router.go('/cost/costOrderOutallView/' + trdo_billno);
                } else {// 未提交

                    // 未提交   没有要货单 未提交的
                    if (billstate == 'D01' && !trpo_billno) {

                        self.$route.router.go('/cost/costOrderOutallView3/' + trdo_billno);
                    } else {
                        // 未提交   有要货单 未提交的
                        self.$route.router.go('/cost/costOrderOutallView2/' + ((trpo_billno || '') + "@" + (trdo_billno || '')));
                    }
                }
                // /cost/costOrderOutallView
            },
            // 获得供应商的高值耗材的供应关系中的医院
            getMedListRelation: function () {
                var self = this;
                Ajax.get('/trhv/getMedListRelation')
                    .then(function (response) {
                        var data = response.data;
                        if (data.errorCode == 0) {
                            self.hosList = _.map(data.data, function (item) {
                                return {
                                    label: item.name,
                                    value: item.guid
                                };
                            });
                        } else {
                            layer.msg('数据获取异常!');
                        }
                    })
            },
            // 批量导入订单
            // getTipsPlan:function(data){
            //     var self = this;
            //     if(data.errorCode==0){
            //             // 返回信息
            //             self.MessageBox({title:'提示', message:'导入商品成功！', type: 'alert'},function(action){
            //               window.location.reload();
            //             });

            //     }else{
            //           self.$set('backMessage.showDialog','Y');
            //           var myobj=eval(data.message);
            //           this.$set('backMessage.mList',myobj);
            //     }
            // },
            // 关闭信息提示弹出框
            closeDialog: function () {
                var self = this;
                this.$set('backMessage.showDialog', 'N');
                this.$set('backMessage.mList', []);
                self.sh = true;
            },
            // 查询条件选择项
            state: function (billstate, objId) {
                $(".form-group a").each(function () {
                    // alert($(this).text());
                    $(this).attr("class", "option");
                });
                $("#" + objId).attr("class", "all active");
                // 设置查询的条件
                this.search.search_EQ_billstate = billstate;
                this.getData();
            },
        },
        route: {
            activate: function () {
                this.getData();
                this.getMedListRelation();
            }
        },
        watch: {
            // 实时监听复选框勾选变化
            'selectMed': function (val) {
                this.search.search_EQ_medguid = val;
            }
        },
    };
</script>