<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:74:"/home/wwwroot/juliang/fa/public/../application/index/view/index/index.html";i:1736564792;}*/ ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $gongsi; ?></title>
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.css">-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #444; /* 调整字体颜色 */
            background: linear-gradient(to bottom, #b2ebf2, #f0f2f5);
            background-attachment: fixed;
	        background-repeat: no-repeat;
	        background-size: cover;
        }

        h2 {
            text-align: center;
            color: #333;
            font-weight: 500;
            margin-bottom: 30px;
        }

        .container {
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 调整阴影，提升立体感 */
            max-width: 1500px;
            width: 100%;
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 15px; /* 改用 gap 属性调整间距 */
        }

        label {
            margin-right: 10px;
            font-weight: 400;
            color: #666; /* 调整字体颜色 */
        }

        input[type="text"],
        select,
        button {
            padding: 10px;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 6px;
            background-color: #f7f7f7; /* 调整背景色 */
            color: #333;
            transition: all 0.3s ease; /* 增加过渡效果 */
        }

        input[type="text"]:focus,
        select:focus,
        button:hover {
            border-color: #999; /* 焦点状态样式 */
            background-color: #e6e6e6; /* 调整背景色 */
        }

        button {
            background-color: #333;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
            padding: 10px 20px;
            border-radius: 6px; /* 增加圆角 */
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
        }

        button:hover {
            background-color: #555;
        }

        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        .summary-group {
            display: flex;
            align-items: center;
            margin-top: 10px;
            gap: 20px; /* 控制组件间的间距 */
        }

        #totalCost,
        #ecpmValue {
            font-family: 'Arial', sans-serif;
            font-size: 16px;
            color: #444; /* 调整字体颜色 */
            padding: 5px 15px;
            display: inline-block;
            background-color: #f9f9f9; /* 背景颜色 */
            border: 1px solid #ddd; /* 边框 */
            border-radius: 6px; /* 圆角 */
        }

        #result {
            width: 100%;
            margin-top: 20px;
            overflow-x: auto;
            max-height: 600px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        th,
        td {
            padding: 12px;
            border: 1px solid #eee;
            text-align: left;
        }

        th {
            background-color: #f4f4f4; /* 更浅的背景色 */
            font-weight: 500;
            color: #555;
            position: relative;
            cursor: pointer; /* 鼠标样式 */
        }

        th .sort-arrow {
            display: inline-block;
            margin-left: 5px;
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            opacity: 0.7;
        }

        th[data-order="asc"] .sort-arrow {
            border-bottom: 6px solid #000;
        }

        th[data-order="desc"] .sort-arrow {
            border-top: 6px solid #000;
        }

        tr:nth-child(even) {
            background-color: #fafafa; /* 调整隔行背景颜色 */
        }

        tr:hover {
            background-color: #f0f0f0; /* 调整行高亮颜色 */
        }

        .pagination {
            justify-content: space-between;
            margin-top: 20px;
            display: flex;
            align-items: center;
            color: #555;
            padding: var(--spacing);
        }

        .pagination button {
            padding: 10px 15px; /* 增加按钮的内边距 */
            margin: 0 5px; /* 增加按钮之间的间距 */
        }

        #result {
            overflow-y: auto; /* 只在 y 轴上滚动 */
        }

        #result::-webkit-scrollbar {
            width: 8px;
        }

        #result::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 4px;
        }

        #result::-webkit-scrollbar-thumb:hover {
            background: #aaa;
        }

        .loader-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            display: none;
        }

        .loader {
            border: 5px solid #f3f3f3;
            border-top: 5px solid #999;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 1.5s linear infinite;
        }

        .loader-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 12px;
            color: #333;
        }

        .error-message {
            display: none;
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px;
            background-color: #e74c3c;
            color: white;
            border-radius: 5px;
            z-index: 1000;
        }

        /* 自定义 showModal 样式 */
        .modal {
            display: none;
            /*opacity: 0;*/
            transition: opacity 0.3s ease; /* 添加渐变效果 */
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center; /* 垂直居中 */
        }

        .custom-showModal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
            z-index: 1001;
            display: none;
        }

        .modal-content {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            max-width: 400px; /* 设置最大宽度 */
            width: 80%; /* 设置宽度为 80% */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            position: relative;
            transform: translateY(-50px);
            transition: transform 0.3s ease; /* 添加滑动效果 */
        }

        .custom-showModal h3 {
            margin-top: 0;
            color: #333;
        }

        .custom-showModal p {
            font-size: 14px;
            margin: 10px 0;
            color: #666;
        }

        .custom-showModal button {
            background-color: #333;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .custom-showModal button:hover {
            background-color: #555;
        }

        /* 模态框样式 */

        .modal-content p {
            font-size: 16px;
            color: #333;
            margin-bottom: 20px;
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            background-color: #007bff; /* 蓝色背景 */
            color: white; /* 字体颜色 */
            height: 30px; /* 设置高度 */
            width: 30px; /* 设置宽度 */
            border-radius: 50%; /* 圆形 */
            font-size: 16px; /* 增大字体大小 */
            display: flex; /* 使用 flexbox 居中内容 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            border: none; /* 去掉边框 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 增加阴影 */
            transition: background-color 0.3s; /* 添加过渡效果 */
        }

        .close-btn:hover {
            background-color: #0056b3; /* 悬停时稍微变暗 */
        }

        th .sort-arrow {
            display: inline-block;
            margin-left: 5px;
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            opacity: 0.5;
        }

        th[data-order="asc"] .sort-arrow {
            border-bottom: 6px solid #000; /* 向下箭头 */
        }

        th[data-order="desc"] .sort-arrow {
            border-top: 6px solid #000; /* 向上箭头 */
        }
        th {
            background-color: #4a90e2; /* 中性蓝色表头 */
            color: white; /* 字体颜色为白色 */
            font-weight: bold; /* 加粗字体 */
            padding: 12px; /* 表头内边距 */
        }

        td {
            padding: 12px; /* 单元格内边距 */
            border: 1px solid #ddd; /* 边框颜色为灰色 */
            background-color: #f9f9f9; /* 单元格背景颜色 */
        }

        tr:nth-child(even) {
            background-color: #f2f2f2; /* 偶数行背景颜色 */
        }

        tr:hover {
            background-color: #e0f7fa; /* 悬停行高亮颜色 */
        }

        .container {
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 更柔和的阴影 */
        }

        /* 表格整体样式 */
        table {
            border-collapse: collapse; /* 边框合并 */
            width: 100%; /* 全宽 */
            border-radius: 10px; /* 圆角 */
            overflow: hidden; /* 内容不溢出 */
        }

        /* 按钮样式 */
        button {
            background-color: #4a90e2; /* 与表头相同的蓝色 */
            color: white; /* 字体颜色 */
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
            padding: 10px 20px;
            border-radius: 6px; /* 增加圆角 */
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
        }

        button:hover {
            background-color: #357ab8; /* 悬停时变为稍暗的蓝色 */
        }
        h1 {
            text-align: center; /* 居中对齐 */
            color: #333; /* 深色字体 */
            font-weight: 600; /* 加粗 */
            font-size: 24px; /* 字体大小 */
            margin-bottom: 30px; /* 下边距 */
            padding: 10px; /* 内边距 */
            background-color: #e0f7fa; /* 浅蓝色背景 */
            border-radius: 8px; /* 圆角 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
            transition: transform 0.3s; /* 动画效果 */
        }

        h1:hover {
            transform: scale(1.05); /* 悬停时放大效果 */
        }
        .copy-btn {
            font-size: 12px; /* 设置字体大小 */
            padding: 4px 8px; /* 内边距 */
            background-color: #4a90e2;; /* 浅蓝色背景 */
            color: white; /* 字体颜色 */
            border: none; /* 去掉边框 */
            border-radius: 4px; /* 圆角 */
            cursor: pointer; /* 鼠标样式 */
            transition: background-color 0.3s; /* 过渡效果 */
        }

        .copy-btn:hover {
            background-color: #3385cc; /* 悬停时稍微变暗 */
        }

        .summary-group {
            display: flex;
            align-items: center;
            margin-top: 10px;
            gap: 20px; /* 控制组件间的间距 */
        }
        #totalCost,
        #ecpmValue {
            font-family: 'Arial', sans-serif;
            font-size: 16px;
            color: #fff; /* 字体颜色为白色 */
            padding: 5px 15px;
            display: inline-block;
            background-color: #2980b9; /* 深绿色背景 */
            border: 1px solid #ddd;
            border-radius: 6px;
        }
        #newContainer {
            padding: 30px;
            background: #f9f9f9; /* 设置浅灰色背景 */
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            max-width: 1500px;
            width: 100%;
            margin-bottom: 20px;
        }
        .summary-group {
            display: flex;
            align-items: center;
            margin-top: 10px;
            gap: 20px;
            background-color: #80deea; /* 更深的蓝绿色 */
            padding: 10px;
            border-radius: 8px;
        }

    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>
</head>

<body>

<div class="container">
    <div id="chartsContainer" style="display: none; margin-top: 20px;">
        <button id="closeChartsBtn">关闭图表</button>
        <canvas id="openIdChart"></canvas>
        <canvas id="timeChart"></canvas>
    </div>
    <div id ="newContainer">
        <h1><?php echo $gongsi; ?></h1>
        <div class="form-group">
            <label for="dropdownList">游戏名称:</label>
            <select id="dropdownList">

            </select>

            <label for="inputOpenIdList">OpenID:</label>
            <input type="text" id="inputOpenIdList" placeholder="OpenID">

            <label for="datePicker">日期:</label>
            <input type="text" id="datePicker" autocomplete="off">

            <label for="itemsPerPage">每页条数:</label>
            <select id="itemsPerPage">
                <option value="500">500</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>

            <button id="submitBtn"><i class="fas fa-search"></i> 查询</button>
            <button id="toggleChartsBtn">查看图表</button>
        </div>

        <!-- 查询总收入和 ECPM 的内容 -->
        <div class="summary-group">
            <button id="extraRequestBtn">查询ECPM</button>
            <div id="totalCost">总收入: <span id="totalIncome">0</span></div>
            <div id="ecpmValue">ECPM: <span id="ecpm">0</span></div>
        </div>

        <div id="loader" class="loader-container">
            <div class="loader"></div>
            <div class="loader-text">加载中···</div>
        </div>
        
            <div class="pagination" id="pagination">
            <button id="prevPage" disabled>上一页</button>
            <button id="nextPage" disabled>下一页</button>
            <span id="pageInfo"></span>
            <span id="totalRows"></span> <!-- 显示总行数 -->
            <span id="totalCostOnPage"></span> <!-- 显示当前页总费用 -->

            <!-- 新增的页码跳转输入框 -->
            <label for="jumpToPage">跳转到第</label>
            <input type="number" id="jumpToPage" min="1" style="width: 50px;">
            <button id="jumpPageBtn">跳转</button>
            <button id="dy">开启强弹</button>
        </div>

        <div id="result">
            <table>
                <thead>
                <tr>
                    <th>Id</th>
                    <th id="sortCost" data-order="asc">广告单价  <span class="sort-arrow"></span></th>
                    <th id="sortEventTime" data-order="asc">日期时间<span class="sort-arrow"></span></th>
                    <th>OpenId</th>
                    <th>IP</th>
                    <th>地区</th>
                    <th>手机品牌</th>
                    <th>手机型号</th>
                    <th>系统版本</th>
                    <th>事件名称</th>

                    <!--                    <th>头像</th>-->
                    <!--                    <th>抖音名称</th>-->
                </tr>
                </thead>
                <tbody id="dataBody"></tbody>
            </table>
        </div>


        <div id="error-message" class="error-message"></div>


    </div>
</div>
<!-- 模态框 -->
<div id="modal" class="modal">
    <div class="modal-content">
        <span class="close-btn">&times;</span>
        <p id="modal-text"></p>
        <button id="modal-ok-btn" class="modal-ok-btn">确定</button>
    </div>
</div>



<script>
    $(document).ready(function () {
        // 清空下拉框
        $('#dropdownList').empty();

        var gameList = <?php echo $game_list; ?>;
        if(gameList.length != 0){
            // 遍历 gameList 对象，添加选项到下拉框
            $.each(gameList, function(key, value) {
                $('#dropdownList').append($('<option></option>').val(key).text(value));
            });
        }

        // 设置日期选择器为今天的日期
        const today = new Date();
        const formattedDate = today.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
        $('#datePicker').val(formattedDate);

        flatpickr("#datePicker", {
            dateFormat: "Y-m-d",
            locale: "zh" // 设置为中文
        });


        let currentPage = 1;
        let itemsPerPage = 500; // 默认每页条数
        let sortField = 'event_time'; // 默认排序字段
        let sortOrder = 'desc'; // 默认排序方向
        let openIdChart;
        let timeChart;
        function fetchData() {

            const game = $('#dropdownList').val();
            const open_id_list = $('#inputOpenIdList').val();
            const date = $('#datePicker').val();

            const pageSize = itemsPerPage;

            $('#loader').show();

            $.ajax({
                url: '/',  // 替换为你的 API 端点
                type: 'GET',
                data: {
                    game_list: game,
                    open_id_list: open_id_list,
                    time: date,
                    page: currentPage,
                    pageSize: pageSize,
                    sort: sortField,  // 添加 sort 字段
                    order: sortOrder,  // 添加 order 字段
                },
                success: function (data) {
                    // 假设 data 返回的格式是 { totalIncome: number, ecpm: number, items: Array }
                    if(data.code == 0){
                        showModal(data.err_msg)
                    }else{
                        renderTable(data.rows);
                        updatePagination(data.total); // 更新分页信息
                        const openIdData = JSON.parse(data.openIdData); // 解析 OpenID 数据
                        const timeData = JSON.parse(data.timeData); // 解析时间段数据
                        // 假设你的 API 返回 openIdData 和 timeData
                        drawCharts(openIdData,timeData);
                        
                        const button = document.getElementById('dy');
                        if(data.dy == 2){
                             //2是开启状态 显示关闭按钮
                                button.style.backgroundColor = '#f75444';
                                button.textContent = '关闭强弹';
                        }else if(data.dy == 1){
                              //1是关闭状态 显示开启按钮
                                button.style.backgroundColor = '#18bc9c';
                                button.textContent = '开启强弹';
                        }else if(data.dy == 0){
                            //1是关闭状态 显示开启按钮
                            $('#dy').hide();
                        }
                    }
                },
                error: function (error) {
                    showModal('数据加载失败');
                },
                complete: function () {
                    $('#loader').hide();
                }
            });
        }

        function fetchTotal() {
            const game = $('#dropdownList').val();
            const date = $('#datePicker').val();

            $('#loader').show();

            $.ajax({
                url: '/index/index/get_ecpm',  // 替换为你的 API 端点
                type: 'GET',
                data: {
                    game_list: game,
                    time: date,
                },
                success: function (data) {
                    if(data.arr.code == 1 ){
                        $('#totalIncome').text(data.arr.totalCost || 0);
                        $('#ecpm').text(data.arr.ecpm || 0);

                    }else{
                        showModal(data.arr.err_msg)
                    }
                },
                error: function (error) {
                    showModal('数据加载失败');
                },
                complete: function () {
                    $('#loader').hide();
                }
            });
        }
// 查询数据成功后绘制图表
        function drawCharts(openIdData, timeData) {
            const ctxOpenId = document.getElementById('openIdChart').getContext('2d');
            const ctxTime = document.getElementById('timeChart').getContext('2d');

            // 清除之前的图表
            if (openIdChart) openIdChart.destroy();
            if (timeChart) timeChart.destroy();

            // 创建 OpenID 总 Cost 图表
            openIdChart = new Chart(ctxOpenId, {
                type: 'bar',
                data: {
                    labels: Object.keys(openIdData),
                    datasets: [{
                        label: '总 Cost',
                        data: Object.values(openIdData),
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        title: {
                            display: true,
                            text: '图1：不同OPENID/COST总和',
                            font: {
                                size: 20 // 调整字体大小
                            }
                        }
                    }
                }
            });

            // 创建时间段总 Cost 图表
            timeChart = new Chart(ctxTime, {
                type: 'line',
                data: {
                    labels: Object.keys(timeData),
                    datasets: [{
                        label: '总 Cost',
                        data: Object.values(timeData),
                        fill: false,
                        borderColor: 'rgba(153, 102, 255, 1)',
                        tension: 0.1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        title: {
                            display: true,
                            text: '图2：各时间段COST总和',
                            font: {
                                size: 20 // 调整字体大小
                            }
                        }
                    }
                }
            });
        }
        
        
      function renderTable(items) {
            const dataBody = $('#dataBody'); // 获取表格体部分的 DOM 元素
            let totalCost = 0; // 初始化当前页的总费用
        
            dataBody.empty(); // 清空表格体部分
            items.forEach(item => {
                totalCost += parseFloat(item.cost); // 累加每一项的 cost
        
                // 根据 cost 的值设置不同的颜色
                let costColor = '';
                if (item.cost < 1) {
                    costColor = 'red'; // 小于 1 设置为红色
                } else if (item.cost >= 1 && item.cost < 10) {
                    costColor = 'orange'; // 大于等于 1 且小于 10 设置为橙色
                } else if (item.cost >= 10 && item.cost < 50) {
                    costColor = 'blue'; // 大于等于 10 且小于 50 设置为蓝色
                } else if (item.cost >= 50) {
                    costColor = 'purple'; // 大于等于 50 设置为紫色
                }
        
                // 渲染表格行，并在 cost 的 <td> 中直接设置颜色
                dataBody.append(`
                    <tr>
                        <td>${item.id}</td>
                        <td style="color: ${costColor}">${item.cost}</td>  <!-- 根据 cost 的值设置颜色 -->
                        <td>${item.event_time}</td>
                        <td>
                            ${item.open_id}
                            <button class="copy-btn" data-open-id="${item.open_id}">复制</button>
                        </td>
                        <td>${item.ip}</td>
                        <td>${item.location}</td>
                        <td>${item.brand}</td>
                        <td>${item.model}</td>
                        <td>${item.edition}</td>
                        <td>${item.event_name}</td>
                    </tr>
                `);
            });
        
            // 更新当前页总费用
            $('#totalCostOnPage').text(`当前表格数据总费用: ${totalCost.toFixed(2)}`); // 保留两位小数显示总费用
        
            // 绑定复制按钮事件
            $('.copy-btn').on('click', function() {
                const openId = $(this).data('open-id'); // 获取按钮绑定的 open_id
                const tempInput = document.createElement('input'); // 创建临时输入框
                tempInput.value = openId; // 将 open_id 设置为输入框的值
                document.body.appendChild(tempInput); // 将输入框添加到页面
                tempInput.select(); // 选中输入框中的内容
                document.execCommand('copy'); // 执行复制命令
                document.body.removeChild(tempInput); // 移除临时输入框
                showModal('复制成功: ' + openId); // 显示复制成功的提示
            });
}


        function showModal(message) {
            const modal = $('#modal');
            const modalText = $('#modal-text');
            const closeBtn = $('.close-btn');
            const okBtn = $('#modal-ok-btn');

            modalText.text(message);
            modal.css('display', 'flex'); // 显示模态框

            // 关闭按钮和 OK 按钮点击时隐藏模态框
            closeBtn.off().click(function () {
                modal.hide(); // 隐藏模态框
            });
            okBtn.off().click(function () {
                modal.hide(); // 隐藏模态框
            });

            // 点击模态框外部也隐藏模态框
            $(window).off('click').click(function (event) {
                if (event.target === modal[0]) {
                    modal.hide(); // 隐藏模态框
                }
            });
        }


        let totalPages = 0; // 定义总页数变量

        function updatePagination(totalItems) {
            totalPages = Math.ceil(totalItems / itemsPerPage); // 更新总页数
            $('#prevPage').prop('disabled', currentPage === 1);
            $('#nextPage').prop('disabled', currentPage === totalPages || totalPages === 0);
            $('#pageInfo').text(`第 ${currentPage} 页，共 ${totalPages} 页`);

            // 更新总行数
            $('#totalRows').text(`数据行数: ${totalItems}`);
        }
        $('#submitBtn').click(function () {
            currentPage = 1; // 重置到第一页
            itemsPerPage = $('#itemsPerPage').val(); // 获取用户选择的每页条数
            fetchData();
        });

        $('#nextPage').click(function () {
            currentPage++;
            fetchData();
        });

        $('#prevPage').click(function () {
            currentPage--;
            fetchData();
        });

        $('#extraRequestBtn').click(function () {
            fetchTotal();
        });

        $('#sortCost').click(function () {
            // 获取当前排序顺序
            const currentOrder = this.getAttribute('data-order');

            // 切换排序顺序
            const newOrder = currentOrder === 'asc' ? 'desc' : 'asc';
            this.setAttribute('data-order', newOrder);

            sortOrder = (sortOrder === 'asc') ? 'desc' : 'asc'; // 切换排序方向
            sortField = 'cost';
            fetchData(); // 重新请求数据
        });
        $('#sortEventTime').click(function () {
            // 获取当前排序顺序
            const currentOrder = this.getAttribute('data-order');

            // 切换排序顺序
            const newOrder = currentOrder === 'asc' ? 'desc' : 'asc';
            this.setAttribute('data-order', newOrder);

            sortOrder = (sortOrder === 'asc') ? 'desc' : 'asc'; // 切换排序方向
            sortField = 'event_time';

            // 重新请求数据并传递排序参数
            fetchData(newOrder); // 传递新的排序顺序
        });

        // 页码跳转功能
        $('#jumpPageBtn').click(function () {
            const jumpPage = parseInt($('#jumpToPage').val());
            if (!isNaN(jumpPage) && jumpPage > 0 && jumpPage <= totalPages) {
                currentPage = jumpPage;
                fetchData();
            } else if (jumpPage > totalPages) {
                showModal(`页码不能大于总页数: ${totalPages}`);
            } else {
                showModal("请输入有效的页码");
            }
        });

        // 事件：点击关闭图表按钮
        $('#closeChartsBtn').click(function () {
            $('#chartsContainer').hide(); // 隐藏图表
            $('#newContainer').show(); // 打开页面
        });
        function adjustChartHeight() {
            const containerHeight = $('#chartsContainer').height();
            const chartHeight = (containerHeight - 20) / 2; // 减去 gap 和 padding
            $('#openIdChart').attr('height', chartHeight);
            $('#timeChart').attr('height', chartHeight);
        }

        // 在显示图表时调整图表高度
        $('#toggleChartsBtn').click(function () {
            $('#chartsContainer').show(); // 显示图表
            adjustChartHeight(); // 调整图表高度
            $('#newContainer').hide(); // 打开页面
        });

        // 当窗口大小变化时重新调整图表高度
        $(window).resize(function() {
            if ($('#chartsContainer').is(':visible')) {
                adjustChartHeight();
            }
        });
        // 初始数据加载
        if(gameList.length != 0){
            fetchData();
        }else{
            $(".container").hide();
        }
        
        $('#dy').click(function () {
            const game = $('#dropdownList').val();
            $.ajax({
                url: '/index/index/qt',  // 替换为你的 API 端点
                type: 'GET',
                data: {
                    game_list: game,
                },
                success: function (data) {
                    // 假设 data 返回的格式是 { totalIncome: number, ecpm: number, items: Array }
                    if(data.code == 0){
                        showModal(data.msg)
                    }else{
                        showModal(data.msg);
                        const button = document.getElementById('dy');
                        if(data.msg == '开启强弹成功'){
                               button.style.backgroundColor = '#f75444';
                                button.textContent = '关闭强弹';
                        }else if(data.msg == '关闭强弹成功'){
                                button.style.backgroundColor = '#18bc9c';
                                button.textContent = '开启强弹';
                        }
                    }
                },
                error: function (error) {
                    showModal('数据加载失败');
                },
                complete: function () {
                    $('#loader').hide();
                }
            });
        });


    });
</script>
</body>
</html>
