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

        <div class="pop-banner clearfix">
            <div class="operate-btns">
                <a @click="exportOvertimeBillAll()" class="fbtn fb-upload">导出</a>
            </div>
            <h3 class="current-module">异常超时订单汇总</h3>
        </div>

        <nav class="authstr-nav clearfix">
            <li>
                <a class="time-out to1 " href="javascript:;" v-link='{"path":"/anomalyOver"}'></a>
            </li>
            <li>
                <a class="time-out to2 active" href="javascript:;" v-link='{"path":"/anomalyOverAll"}'></a>
            </li>
        </nav>

        <!-- start-->
        <div class="pd-form fast-search-form mt-15">
            <div class="group-row">

                <div class="form-group">
                    <!--<label for="in3" class="label">供应商</label>-->
                    <div class="control">
                        <input type="text" value="" id="in3" v-rule placeholder='供应商' maxlength="20"
                               v-model="search.search_LIKE_suppliername">
                    </div>
                </div>
                <div class="form-group form-label">
                    <label  class="label">超时大于</label>
                    <div class="control">
                        <input class="w100" type="number" style="margin-left: 70px;text-align: right" v-model="search.search_EQ_overtime">
                        <span>小时</span>
                    </div>
                </div>
            </div>

            <div class="group-row">
                <div class="form-group">
                    <label for="cn1" class="label" style="width:70px;">异常类型</label>
                    <div class="control control-filtering control-filtering-green" style="width:410px;">
                        <a class="option" :class="{'all active':showTag == '1'}"
                           href="javascript:void(0)" @click="showTag = '1'">接单超时</a>
                        <a class="option" :class="{'all active':showTag == '2'}"
                           href="javascript:void(0)" @click="showTag = '2'">签收超时</a>
                        <a class="option" :class="{'all active':showTag == '3'}"
                           href="javascript:void(0)" @click="showTag = '3'">出库超时</a>
                    </div>
                </div>
                <div class="form-group">
                    <label for="cn2" class="label" style="width:70px;">展现形式</label>
                    <div class="control control-filtering control-filtering-green" style="width:388px;">
                        <a class="option" :class="{'all active':showType}"
                           href="javascript:void(0)" @click="showType=true">明细模式</a>
                        <a class="option" :class="{'all active':!showType}"
                           href="javascript:void(0)" @click="showType=false">汇总模式</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="getDataLsit()">
                    查 询
                </button>
            </div>
        </div>

        <div class="ctable ct-parent mt-20">
            <!--接单超时-->

            <!--接单超时-->
            <section v-if="showTag=='1' && showType">
                <div class="ctable ct-parent mt-20">
                    <div class="ct-head">
                        <span class="ct-col w80">序号</span>


                        <span class="ct-col w120">供应商</span>
                        <span class="ct-col w120">采购计划</span>
                        <span class="ct-col w160">采购单号</span>
                        <!-- <span class="ct-col w150">计划单号</span> -->
                        <span class="ct-col w150">采购时间</span>
                        <span class="ct-col w120">采购商品品项数</span>
                        <span class="ct-col w120">采购商品总数量</span>
                        <span class="ct-col w120">含税金额（元）</span>
                    </div>
                    <div class="ct-row mt-0" id="warp{{$index}}" v-for="li in list">
                        <div class="row-line">
                            <span class="ct-col w80">{{ $index + 1 }}</span>


                            <span class="ct-col w120 ">
                                  {{li.suppliername}}
                            </span>
                            <span class="ct-col w120 t-left ">
                                单号: {{li.planbillno}} <br>
                                时间: {{li.plandate}}<br>
                                <!-- 数量: {{li.plandetailsum}}<br> -->
                            </span>

                            <span class="ct-col w160  activate isFocus">
                                <div><a style="color: #49a3ac"
                                        @click="slidedown($index,li.pobillno)">{{li.pobillno}}</a></div>

                            </span>
                            <!-- <span class="ct-col w150">{{li.planbillno}}</span> -->


                            <span class="ct-col w150">{{li.plandate}}  </span>
                            <span class="ct-col w120">{{li.plancountsum}}</span>
                            <span class="ct-col w120">{{li.plandetailsum}}</span>
                             <span class="ct-col w120">{{li.dmsum| numDigit 2}}</span>
                        </div>
                        <!--style="display: none;"-->
                        <div class="row-launch" style="display: none;">
                            <table class="itable mb-30 table_pd">
                                <thead>
                                <tr>
                                    <th class="w40">序号</th>
                                    <th class="w200">商品</th>
                                    <th class="w200">订货数</th>
                                    <th class="w200">订货单位</th>
                                    <th class="w200">单价(元)</th>
                                    <th class="w200">含税金额(元)</th>
                                    <th class="w200">备注</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-if="li.mxList==null || li.mxList==0">
                                    <td colspan="12">暂无符合条件的记录</td>
                                </tr>
                                <tr v-for="item in li.mxList">
                                    <td class="pt7">
                                        {{$index + 1}}
                                    </td>
                                    <td class="t-left pl10">
                                        {{item.purchaserGoodscode}}<br>
                                        <span class=text-color-green>{{item.purchaserGoodsname}}</span><br>
                                        {{item.purchaserGoodsspec}}<br>

                                    </td>
                                    <td>{{item.purchaserPoqty}} </td>
                                    <td>{{item.purchaserUnit}} </td>
                                    <td>{{item.purchaserPrice| numDigit 2}} </td>
                                    <td>{{item.amount| numDigit 2}}</td>
                                    <td>{{item.memo}}</td>

                                </tr>
                                </tbody>
                            </table>

                            <div class="zip" @click="slideup($index)"></div>
                        </div>

                    </div>
                    <div class="mt-20 pb20" style="text-align: center;border-bottom: 1px solid #c8c8c8;" v-if="list.length==0">
                        未查询到相关数据！
                    </div>
                    <div class="pagination" style="margin: 20px 0">
                        <pagination @page-change="getData" :class="['m-20-0']" :page-no.sync="search.page"
                                    :total-pages.sync="search.totalPages"></pagination>
                    </div>
                </div>
            </section>


            <!-- 签收超时 -->
            <section v-if="showTag=='2' && showType">
                <div class="ctable ct-parent mt-20">
                    <div class="ct-head">
                        <span class="ct-col w60">序号</span>
                        <span class="ct-col w150">供应商</span>
                        <span class="ct-col w160 t-left">采购计划</span>
                        <span class="ct-col w160 t-left">采购受理</span>
                        <span class="ct-col w160 t-left">采购出库</span>
                        <span class="ct-col w100">出库数量</span>
                        <span class="ct-col w100">缺货数量</span>
                        <span class="ct-col w100">含税金额（元）</span>
                    </div>
                    <div class="ct-row mt-0" id="warp{{$index}}" v-for="li in list">
                        <div class="row-line">
                            <span class="ct-col w60">{{ $index + 1 }}</span>
                            <span class="ct-col w150 pr10">{{li.suppliername}}</span>
                            <span class="ct-col w160 t-left pr10">
                                单号: {{li.planbillno}} <br>
                                时间: {{li.plandate}}<br>
                                数量: {{li.plandetailsum}}<br>
                                </span>

                            <span class="ct-col w160 t-left pr10">
                                {{li.pobillno}} <br>
                            {{li.podate}}<br>
                            <!-- {{li.podetailsum}} <br> -->
                            </span>
                            <span class="ct-col w160 t-left  activate isFocus pr10">
                                <div><a style="color: #49a3ac"
                                        @click="slidedown($index,li.dobillno)">{{li.dobillno}}</a></div>
                                {{li.dodate}}<br>
                                <!-- {{li.dosum}} -->
                            </span>
                            <span class="ct-col w100 ">{{li.dosum?li.dosum:0}}</span>
                            <span class="ct-col w100 ">{{li.ossum?li.ossum:0}}</span>
                            <span class="ct-col w100 ">{{li.dmsum| numDigit 2}}</span>
                        </div>
                        <div class="row-launch" style="display: none;">
                            <table class="itable mb-30 table_pd">
                                <thead>
                                <tr>
                                    <th class="w40">序号</th>
                                    <th class="w200 t-left pl10">商品</th>
                                    <th class="w100">出库数</th>
                                    <th class="w100">出库单位</th>
                                    <th class="w100">单价(元)</th>
                                    <th class="w100">含税金额(元)</th>
                                    <th class="w100">批号</th>
                                    <th class="w100">有效期</th>

                                </tr>
                                </thead>
                                <tbody>
                                <tr v-if="li.mxList==null || li.mxList==0">
                                    <td colspan="12">暂无符合条件的记录</td>
                                </tr>
                                <tr v-for="item in li.mxList">
                                    <td>
                                        {{$index + 1}}
                                    </td>
                                    <td class="t-left pl10">
                                        {{item.purchaserGoodscode}}<br>
                                        <span class=text-color-green>{{item.purchaserGoodsname}}</span><br>
                                        {{item.purchaserGoodsspec}}<br>
                                        {{item.purchaserUnit}}

                                    </td>
                                    <td class="t-center">
                                        {{item.purchaserPesentqty}}
                                    </td>
                                    <td>
                                         {{item.purchaserUnit}}
                                    </td>
                                    <td>{{item.purchaserPrice| numDigit 2}}</td>
                                    <td>{{item.amount| numDigit 2}}</td>
                                    <td>{{item.lot}}</td>
                                    <td>{{item.expiredate | getYMD}}</td>

                                </tr>
                                </tbody>
                            </table>
                            <div class="zip" @click="slideup($index)"></div>
                        </div>

                    </div>
                    <div class="mt-20 pb20" style="text-align: center;border-bottom: 1px solid #c8c8c8;" v-if="list.length==0">
                        未查询到相关数据！
                    </div>
                    <div class="pagination" style="margin: 20px 0">
                        <pagination @page-change="getData" :class="['m-20-0']" :page-no.sync="search.page"
                                    :total-pages.sync="search.totalPages"></pagination>
                    </div>
                </div>
            </section>



              <!-- 出库超时 -->
            <section v-if="showTag == '3' && showType">
                <div class="ctable ct-parent mt-20">
                    <div class="ct-head">
                        <span class="ct-col w60">序号</span>
                        <span class="ct-col w170">供应商</span>
                        <span class="ct-col w170 t-left">采购计划</span>
                        <span class="ct-col w160 t-left">采购订单</span>
                        <span class="ct-col w120">采购商品品项数</span>
                        <span class="ct-col w120">采购商品总数量</span>
                        <span class="ct-col w120">含税金额（元）</span>
                        <span class="ct-col w80">受理时间</span>


   <!--                      <span class="ct-col w200 t-left">采购受理</span>
                        <span class="ct-col w200 t-left">采购出库</span>
                        <span class="ct-col w50">缺货数量</span> -->
                    </div>
                    <div class="ct-row mt-0" id="warp{{$index}}" v-for="li in list">
                        <div class="row-line">
                            <span class="ct-col w60">{{ $index + 1 }}</span>
                            <span class="ct-col w170 pr10">{{li.suppliername}}
                            </span>
                            <span class="ct-col w170 t-left pr10">
                                单号: {{li.planbillno}} <br>
                                时间: {{li.plandate}}<br>
                            </span>
                            <span class="ct-col w160 t-left  activate isFocus pr10">
                                <div><a style="color: #49a3ac"
                                        @click="slidedown($index,li.pobillno)">{{li.pobillno}}</a></div>
                                {{li.podate}}<br>
                            </span>
                            <span class="ct-col w120">{{li.podetailsum}}</span>
                            <span class="ct-col w120">{{li.plandetailsum}}</span>
                             <span class="ct-col w120">{{li.detailsum}}</span>
                            <span class="ct-col w80">{{li.accdate}}</span>
                        </div>
                        <div class="row-launch" style="display: none;">
                            <table class="itable mb-30 table_pd">
                                <thead>
                                <tr>
                                    <th class="w40">序号</th>
                                    <th class="w200 t-left pl10">商品</th>
                                     <th class="w100">订货数</th>
                                    <th class="w100">订货单位</th>
                                    <th class="w100">单价(元)</th>
                                    <th class="w100">含税金额(元)</th>
                                    <th class="w100">备注</th>

                                </tr>
                                </thead>
                                <tbody>
                                <tr v-if="li.mxList==null || li.mxList==0">
                                    <td colspan="12">暂无符合条件的记录</td>
                                </tr>
                                <tr v-for="item in li.mxList">
                                    <td>
                                        {{$index + 1}}
                                    </td>
                                    <td class="t-left pl10">
                                        {{item.purchaserGoodscode}}<br>
                                        <span class=text-color-green>{{item.purchaserGoodsname}}</span><br>
                                        {{item.purchaserGoodsspec}}<br>
                                        {{item.purchaserUnit}}

                                    </td>
                                    <td class="t-center">
                                        {{item.purchaserPoqty}}
                                    </td>
                                    <td class="t-center">
                                        {{item.purchaserUnit}}
                                    </td>
                                    <td>{{item.purchaserPrice| numDigit 2}}</td>
                                    <td>{{item.amount| numDigit 2}}</td>
                                    <td>{{item.memo}}</td>

                                </tr>
                                </tbody>
                            </table>
                            <div class="zip" @click="slideup($index)"></div>
                        </div>

                    </div>
                    <div class="mt-20 pb20" style="text-align: center;border-bottom: 1px solid #c8c8c8;" v-if="list.length==0">
                        未查询到相关数据！
                    </div>
                    <div class="pagination" style="margin: 20px 0">
                        <pagination @page-change="getData" :class="['m-20-0']" :page-no.sync="search.page"
                                    :total-pages.sync="search.totalPages"></pagination>
                    </div>
                </div>
            </section>

  <!--           <section v-if="showTag == '1' && !showType">
                <div v-if="charts" id='echart1' style='width:100%;height:400px;'></div>
                <div v-else class="chartsBox">
                    <span class="chartsItem">暂无数据展现</span>
                </div>
            </section>

            <section v-if="showTag == '2' && !showType">
                <div v-if="charts" id='echart2' style='width:100%;height:400px;'></div>
                <div v-else class="chartsBox">
                    <span class="chartsItem">暂无数据展现</span>
                </div>
            </section>

            <section v-if="showTag == '3' && !showType">
                <div v-if="charts" id='echart3' style='width:100%;height:400px;'></div>
                <div v-else class="chartsBox">
                    <span class="chartsItem">暂无数据展现</span>
                </div>
            </section> -->



            <section v-if="!showFirst && !showType">
               <!--  <div v-if="charts" id='echart2' style='width:100%;height:400px;'></div>
                <div v-else class="chartsBox">
                    <span class="chartsItem">暂无数据展现</span>
                </div> -->
                <table class="itable user-info-list">
                    <thead id="t_header">
                      <tr>
                        <th class="w60">序号</th>
                        <th class="w100">供应商</th>
                        <th class="w110">超时订单总金额</th>
                        <th class="w100">超时订单金额占比</th>
                        <th class="w130">超时订单数</th>
                        <th class="w100">超时订单数占比</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="item in collectLits">
                        <td>{{$index + 1}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.tpodetailsum}}</td>
                        <td>
                          {{item.tpodetailsumpercentage}}
                        </td>
                        <td>{{item.value}}</td>
                        <td>
                          {{item.valuepercentage}}
                        </td>
                      </tr>
                      <tr v-if="collectLits==null || collectLits.length==0">
                            <td colspan="10">暂无符合条件的记录</td>
                    </tr>
                    </tbody>
                  </table>
                  <pagination
                   @page-change="getChartDatas"
                   :class="['m-20-0']"
                   :page-no.sync="search2.page"
                   :total-pages.sync="search2.totalPages"></pagination>
            </section>
        </div>


    </div>

</template>
<style scoped>
    .table_pd tbody td {
        padding: 10px 0;
        line-height: 1.8;
    }
    .chartsBox {
        width: 100%;
        height:300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .chartsItem{
        font-size: 20px;
        color: #FF0033;
    }
</style>
<script>
    module.exports = {
        data: function () {
            return {
                search: {
                    page: 1,
                    total: 0,
                    totalPages: 1,
                    pageSize: 50,
                    search_LIKE_suppliername: '',
                    search_EQ_medguid: '',
                    search_EQ_overtime: 48,
                    search_EQ_billtype: 1,
                },
                 search2: {
                    page: 1,
                    total: 0,
                    totalPages: 1,
                    pageSize: 50,

                },
                collectLits:[],
                showTag: '1',
                showType: true,//展现形式
                getDistributions: '', //医院下拉
                list: {},
                chartDatas:[],//图数据
                charts:true//图数据

            };
        },
        methods: {

            getData: function () {
                var self = this;
                if(!(/(^[1-9]\d*$)/.test(self.search.search_EQ_overtime*1))){
                    self.MessageBox.alert('请输入正整数');
                    return ;
                }
                if(!(/(^[1-9]\d*$)/.test(self.search.search_EQ_billtype*1))){
                    self.MessageBox.alert('请输入正整数');
                    return ;
                }
                Ajax.post('/hospitalReport/findOvertimeBillAll', 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;

                    } else {
                        self.MessageBox.alert(response.data.message);
                    }
                })
            },
            getChartDatas:function(typeId){
                var self = this;
                if(!(/(^[1-9]\d*$)/.test(self.search.search_EQ_overtime*1))){
                    self.MessageBox.alert('请输入正整数');
                    return ;
                }
                if(!(/(^[1-9]\d*$)/.test(self.search.search_EQ_billtype*1))){
                    self.MessageBox.alert('请输入正整数');
                    return ;
                }
                self.$set("charts",true);
                var params = {
                    search_LIKE_suppliername:self.search.search_LIKE_suppliername,
                    search_EQ_medguid: self.search.search_EQ_medguid,
                    search_EQ_overtime: self.search.search_EQ_overtime,
                    search_EQ_billtype: self.search.search_EQ_billtype,
                    page :self.search2.page,
                    pageSize :self.search2.pageSize,
                };
                Ajax.post('/hospitalReport/overtimeBillAllByCharts', params).then(function (response) {
                    var data = response.data.data;
                    if (response.data.errorCode == 0) {
                        self.collectLits = data.list;
                        self.search2.total = data.total;
                        // if(data.list.length == 0){
                        //     self.$set("charts",false);
                        // }else{
                        //     self.$set("chartDatas", data);
                        //     self.drawingChart(typeId);
                        // }
                    } else {
                        self.MessageBox.alert(response.data.message);
                    }
                })
            },
            // 绘制图表
            drawingChart:function(){
                var self = this;
                var eleId = self.showTag == '3'? "echart3" : (self.showTag == '1' ? "echart1" : "echart2");
                var myChart = echarts.init(document.getElementById(eleId));
                var datas = self.chartDatas.list;
                var _title = self.showTag == '3'? "出库超时" : (self.showTag=='1'?"接单超时":"签收超时");
                _title = "历史异常统计 - " + _title+" - 供应商汇总统计(共计："+self.chartDatas.total+"条订单)";
                var options = {
                    title: {
                        text: _title,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} \n {b} ({d}%)"
                    },
                    legend: {
                        orient: 'horizontal',
                        x: 'center',
                        y:'bottom',
                        data:[]
                    },
                    series: [
                        {
                            name: '统计',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: [0, '60%'],
                            label: {
                                normal: {
                                    formatter: ' {b}: {c} ({d}%)',
                                }
                            },
                            data: []
                        }]
                };
                if(datas && datas.length >0 ){
                    var names = [];
                    datas.forEach(function(item){
                        if(item.name){
                            names.push(item.name);
                        }
                    });
                }
                options.legend.data = names;
                options.series[0].data = datas;
                myChart.setOption(options);
            },
            getDataLsit: function () {
                var self = this;
                self.search.page = 1;
                if(self.showType){//显示表
                    self.getData();
                }else{//显示图
                    self.getChartDatas();
                }
            },

            slideup: function (index) {
                $('#warp' + index).find(".row-launch").slideUp(400, function () {
                    $('#warp' + index).removeClass('active');
                    $('#warp' + index).find(".isFocus").removeClass("focus");
                })
            },
            slidedown: function (index, no) {
                console.log(this.showTag)
                if (this.showTag == '1') {
                    this.findOvertimeBillByPoDetail(index, no);
                } else if(this.showTag == '2') {
                    this.findOvertimeBillByCkDetail(index, no);
                } else if(this.showTag == '3'){
                    this.findOvertimeBillByCkcsDetail(index, no);
                }
                $('#warp' + index).addClass("active");
                $('#warp' + index).find(".row-launch").slideDown(400, function () {
                    $('#warp' + index).find(".isFocus").addClass("focus active");
                })
            },
            // 品规格数目（手风琴效果）受理超时
            findOvertimeBillByPoDetail: function (index, no) {
                var self = this;
                Ajax.post('/hospitalReport/findOvertimeBillByPoDetail', {'search_EQ_pobillno': no})
                    .then(function (response) {
                        var data = response.data.data;
                        self.$set('list[' + index + '].mxList', data);
                    });
            },
            // 品规格数目（手风琴效果）签收超时
            findOvertimeBillByCkDetail: function (index, no) {
                var self = this;
                Ajax.post('/hospitalReport/findOvertimeBillByCkDetail', {'search_EQ_dobillno': no})
                    .then(function (response) {
                        var data = response.data.data;
                        self.$set('list[' + index + '].mxList', data);
                    });
            },
            // 品规格数目（手风琴效果）出库超时
            findOvertimeBillByCkcsDetail: function (index, no) {
                var self = this;
                Ajax.post('/hospitalReport/findOvertimeBillByPoDetail', {'search_EQ_pobillno': no})
                    .then(function (response) {
                        var data = response.data.data;
                        self.$set('list[' + index + '].mxList', data);
                    });
            },
            //导出
            exportOvertimeBillAll: function() {
                var self = this;
                if(self.list.length == 0) {
                    self.MessageBox.alert('暂无数据！');
                    return;
                }
                Ajax.post('/hospitalReport/exportOvertimeBillAll',self.search)
                    .then(function(response) {
                        var data = response.data;
                        window.open(data);
                    })
            },
        },
        route: {
            activate: function () {
                this.getData();
            }
        },
        watch: {
            'showTag': function (val) {
                var self = this;
                this.search.search_EQ_billtype = val == '3' ? 3 :(val == '1' ? 1 : 2);
                this.search.search_EQ_overtime = val == '2' ? 72 : 48;
                if(self.showType){
                    this.search.page=1;
                    this.getData();
                }else{
                    self.getChartDatas();
                }

            },
            'showType': function (val) {
                var self = this;
                if(!val){//图
                    self.getChartDatas();
                }else{
                    this.search.page=1;
                    this.getData();
                }
            }
        }
    };
</script>