@{
    Layout = null;
}

<!DOCTYPE html>
<html style="overflow: auto;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BLW日志</title>
    <!-- Vue.js -->
    <script src="~/js/vue2.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- jQuery -->
    <script src="~/js/jquery.min.js"></script>

    <!-- 引入第三方库 -->
    <script src="~/js/xlsx.mini.min.js"></script>


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .el-table__empty-block {
            height: auto !important;
        }

        .el-dialog__footer {
            text-align: left;
        }

        .headbox {
            /*margin: 10px;*/
        }

        .seachbox {
            margin: 10px;
            display: inline-block;
        }

        .bodybox {
            margin: 10px;
            text-align: center;
        }

        .dialogbox .el-table .el-table__cell {
            padding: 2px;
        }

        .el-table .el-table__cell {
            padding: 6px 0;
        }

        .iconClass {
            font-size: 20px; /* 加大图标大小 */
            font-weight: bold;
        }

        .el-table-filter {
            position: absolute;
        }

        /* 日志列css */
        .cell .logdata {
            /*  white-space: nowrap; 不换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 显示省略号 */
            cursor: pointer;
            font-size: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1;
        }

        /* 表格行颜色设置 */
        .el-table .up-row {
            background: #ECF5FF;
        }

        .el-table .down-row {
            background: #FEF0F0;
        }

        .el-table .error-row {
            background: #F78989;
        }

        /* 折叠面板 */
        .collapse-title {
            font-weight: bold;
            letter-spacing: 0.5px;
        }

        .data-details {
            margin: 10px 0;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 4px;
        }

        .el-collapse-item__header {
            line-height: 16px;
        }

        .el-collapse-item__content div {
            margin: 0 !important;
            word-break: break-all !important;
        }

        /* 日志列css */
        .cell .logdata {
            /*  white-space: nowrap; 不换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 显示省略号 */
            cursor: pointer;
            font-size: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1;
        }


        .cards-container {
            display: flex; /* 使用flex布局 */
            flex-wrap: wrap; /* 允许换行 */
            margin-right: -5px; /* 用负边距抵消最后一行的右边距 */
            margin-bottom: -3px; /* 用负边距抵消最后一行的下边距 */
        }

        .card-item {
            width: 468px; /* 卡片宽度固定为500px */
            margin-right: 5px; /* 卡片之间的左右间隔 */
            margin-bottom: 3px; /* 卡片之间的上下间隔 */
        }

        /* 清除浮动，如果需要的话 */
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        .tables-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        /* .table {
                    flex: 1 1 48%;
                    margin-bottom: 20px;
                } */
        /* 原有.table样式修改 */
        .table {
            width: 100%;
            margin-bottom: 0; /* 用gap替代margin */
        }

        /* 当屏幕宽度小于某个值时，让表格堆叠显示 */
        /* @@media (max-width: 800px) {
                    .table {
                        flex: 0 0 100%;
                    }
                }
         */

        /* 新增样式 */
        .tables-container {
            display: flex;
            gap: 20px; /* 左右列间距 */
            flex-wrap: wrap;
        }

        .left-column {
            flex: 1;
            min-width: 300px; /* 防止过度挤压 */
            display: flex;
            flex-direction: column;
            gap: 20px; /* 内部表格间距 */
        }

        .right-column {
            flex: 1;
            min-width: 300px;
        }


        .tables-container .table {
            flex: none !important;
            width: 100% !important;
        }
        /* 响应式适配 */
        @@media (max-width: 800px) {
            .left-column, .right-column {
                flex: 0 0 100%; /* 强制占满宽度 */
                min-width: auto;
            }
        }

    </style>
</head>
<body>

    <div id="app" v-show="isReady" v-cloak style="width:100%;height:100%;">
        <div style="align-content: center; text-align: center; font-size: 22px; margin: 10px;">
            <el-button type="primary" v-on:click="logHome" plain circle style="float: left" icon="el-icon-s-home"></el-button>
            API调用日志系统
            <span style="font-size:12px;color:gray"> --v1.3.0</span>
        </div>
        <!-- 顶部导航栏以及弹窗 -->
        <div class="headbox">
            <div class="seachbox">
                <span v-if="dialogw != '100%'">
                    <el-date-picker v-model="pickerDate"
                                    type="datetimerange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions"
                                    style="width: 388px;">
                    </el-date-picker>
                </span>
                <span v-else>
                    <span>
                        <br />
                        <span class="demonstration" style="margin: 0 26px 0 27px;font-size:13px;"> 开始日期 </span>
                        <el-date-picker v-model="pickerDate[0]"
                                        type="datetime" style="width: 217px;"
                                        placeholder="开始日期">
                        </el-date-picker>
                        <br />
                        <span class="demonstration" style="margin: 0 26px 0 27px;font-size:13px;"> 结束日期 </span>
                        <el-date-picker v-model="pickerDate[1]"
                                        type="datetime" style="width: 217px;"
                                        placeholder="结束日期">
                        </el-date-picker>
                    </span>

                    <br />
                    <span>
                        <span style="margin: 0 0 0 16px;"></span>
                        <el-button type="text" v-on:click="dateMobile(1)">1小时内</el-button>
                        <el-button type="text" v-on:click="dateMobile(3)">3小时内</el-button>
                        <el-button type="text" v-on:click="dateMobile(12)">12小时内</el-button>
                        <el-button type="text" v-on:click="dateMobile(24)">24小时内</el-button>
                        <el-button type="text" v-on:click="dateMobile(72)">72小时内</el-button>
                    </span>
                    <br />

                </span>

                <el-button type="info" class="el-icon-refresh" v-on:click="showSelectedLogs(1)" :disabled="multipleBtn"
                           :size="40" circle plain></el-button>

            </div>

        </div>
        <!-- 主体内容 -->
        <div class="" style="height: 100%;">
            <div class="cards-container">
                <el-card v-for="(item, index) in logs"
                         :key="index"
                         class="card-item"
                         v-on:click.native="cardOpenDialog(item)">
                    <div slot="header" class="clearfix">
                        <span>{{ item.methodName }}</span>
                    </div>
                    <div>
                        时段总调用：{{ item.totalInvokeCount}} 次
                    </div>
                </el-card>

            </div>
            <el-dialog :width="dialogw" :visible.sync="elcarddialogVisible" title="调用详情">
                <div class="tables-container">
                    <!-- 左列容器 -->
                    <div class="left-column">
                        <!-- 根据小时区分调用数据表格 -->
                        <el-table :data="selectedTime" border class="table">
                            <!-- 注意这里数据源改为hourlyInvokeData -->
                            <el-table-column prop="hour" label="时间段" width="188"></el-table-column>
                            <el-table-column prop="totalEveryHour_InvokeCount" label="调用数量" width="95"></el-table-column>
                        </el-table>
                        <!-- IP 调用数据表格 -->
                        <el-table :data="selectedItem.ipInvokeData" border class="table">
                            <el-table-column prop="ip" label="IP" width="188"></el-table-column>
                            <el-table-column prop="totalIP_InvokeCount" label="调用数量" width="95"></el-table-column>
                            <el-table-column label="操作" width="66">
                                <template slot-scope="scope">
                                    <el-button type="info" :size="40" v-on:click="viewIPRowData(scope.row)" icon="el-icon-search" circle plain></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <!-- 右列容器 -->
                    <div class="right-column">
                        <!-- 酒店代码调用数据表格 -->
                        <el-table :data="selectedItem.codeInvokeData" border class="table">
                            <el-table-column prop="hotelNameAndCode" label="酒店" width="188"></el-table-column>
                            <el-table-column prop="totalHotelCode_InvokeCount" label="调用数量" width="95"></el-table-column>
                            <el-table-column label="操作" width="66">
                                <template slot-scope="scope">
                                    <el-button type="info" :size="40" v-on:click="viewCodeRowData(scope.row)" icon="el-icon-search" circle plain></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-dialog>
            @* <el-dialog :width="dialogw" :visible.sync="elcarddialogVisible" title="调用详情">
                <div class="tables-container">
                    <!-- IP 调用数据表格 -->
                    <el-table :data="selectedItem.ipInvokeData" border class="table">
                        <el-table-column prop="ip" label="IP" width="188"></el-table-column>
                        <el-table-column prop="totalIP_InvokeCount" label="调用数量" width="95"></el-table-column>
                        <el-table-column label="操作" width="66">
                            <template slot-scope="scope">
                                <el-button type="info" :size="40" v-on:click="viewIPRowData(scope.row)" icon="el-icon-search" circle plain></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 根据小时区分调用数据表格 -->
                    <el-table :data="selectedItem.codeInvokeData" border class="table">
                        <el-table-column prop="timeInterval" label="时间段" width="188"></el-table-column>
                        <el-table-column prop="totalHotelCode_InvokeCount" label="调用数量" width="95"></el-table-column>
                    </el-table>
                    <!-- 酒店代码调用数据表格 -->
                    <el-table :data="selectedItem.codeInvokeData" border class="table">
                        <el-table-column prop="hotelNameAndCode" label="酒店" width="188"></el-table-column>
                        <el-table-column prop="totalHotelCode_InvokeCount" label="调用数量" width="95"></el-table-column>
                        <el-table-column label="操作" width="66">
                            <template slot-scope="scope">
                                <el-button type="info" :size="40" v-on:click="viewCodeRowData(scope.row)" icon="el-icon-search" circle plain></el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>
            </el-dialog> *@

            <el-dialog :width="dialogw" :visible.sync="openRowDialog">
                <template v-slot:title>
                    <span>{{ selectedItem.methodName }}&nbsp;</span>
                    <el-button type="success" class="el-icon-document" v-on:click="exportExcel"
                               :size="40" circle plain></el-button>
                </template>
                <el-table :data="nowMethodValue" style="width: 100%" border ref="logsTable">
                    <el-table-column prop="methodName" label="接口名称" width="120"></el-table-column>
                    <el-table-column label="时间差" width="75">
                        <template slot-scope="scope">
                            {{ calculateTimeDifference(scope.row.invokStartTime, scope.row.invokEndTime) + 'ms' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="hotelNameAndCode" label="酒店" width="125"></el-table-column>
                    <el-table-column prop="roomNumber" label="房间号" width="75"></el-table-column>
                    <el-table-column label="开始时间" width="100">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 13px">
                                {{ scope.row.invokStartTime }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="结束时间" width="100">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 13px">
                                {{ scope.row.invokEndTime }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="参数" width="120">
                        <template slot-scope="scope">
                            <el-popover trigger="click"
                                        placement="right"
                                        width="250">
                                <div style="font-size: 11px; ">
                                    {{ scope.row.parameters }}
                                </div>
                                <div class="logdata" title="" style="color:#ADADAD"
                                     slot="reference">
                                    {{ scope.row.parameters }}
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remoteIp" label="IP" width="120"></el-table-column>


                </el-table>
            </el-dialog>

        </div>
    </div>


    <!-- JavaScript引入 -->
    <script src="~/js/LogJs/ApiLogIndex.js"></script>
</body>
</html>
