<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>游戏详情表</title>
    <link href="/static/css/styles.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"
            crossorigin="anonymous"></script>
</head>
<style>
    .nav-item:hover .dropdown-menu {
        display: block;
    }
</style>
<body class="sb-nav-fixed">
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
    <a class="navbar-brand ps-3" href="index.html">游戏评分系统</a>
    <!--<button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i
            class="fas fa-bars"></i></button>-->
    <form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
    </form>
    <ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown"
               aria-expanded="false">
                <i class="fas fa-user fa-fw"></i>
                {{ email }}
            </a>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="/login">退出登录</a></li>
            </ul>
        </li>
    </ul>
</nav>

<div id="layoutSidenav">
    <div id="layoutSidenav_nav">
        <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
            <div class="sb-sidenav-menu">
                <div class="nav">
                    <div class="sb-sidenav-menu-heading">首页</div>
                    <a class="nav-link active" href="/home">
                        <div class="sb-nav-link-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-display" viewBox="0 0 16 16">
                              <path d="M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4c0 .667.083 1.167.25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75c.167-.333.25-.833.25-1.5H2s-2 0-2-2V4zm1.398-.855a.758.758 0 0 0-.254.302A1.46 1.46 0 0 0 1 4.01V10c0 .325.078.502.145.602.07.105.17.188.302.254a1.464 1.464 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.758.758 0 0 0 .254-.302 1.464 1.464 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.757.757 0 0 0-.302-.254A1.46 1.46 0 0 0 13.99 3H2c-.325 0-.502.078-.602.145z"/>
                            </svg>
                        </div>
                        首页
                    </a>
                    <div class="sb-sidenav-menu-heading">分支列表</div>
                   <a class="nav-link " href="/single_community/{{ task_number }}">
                        <div class="sb-nav-link-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pie-chart" viewBox="0 0 16 16">
                                <path d="M7.5 1.5A7.5 7.5 0 0 0 1 9.5a1 1 0 0 1 1-1H7a1 1 0 0 1 1-1H9a1 1 0 0 1 1 1H15a1 1 0 0 1 1 1A7.5 7.5 0 0 0 7.5 1.5zM3 9a1 1 0 0 1 1-1H6v1H3zm1 3.49V10h1.5a.5.5 0 0 1 0 1H4zM7 13h1.5a.5.5 0 0 1 0 1H7a1 1 0 0 1-1-1V9.5a.5.5 0 0 1 1 0V12zm6.5-2.5a.5.5 0 0 1 0 1H10a.5.5 0 0 1 0-1h4.5zm2-3A1.5 1.5 0 0 0 13 6.5V8H3V6.5a1.5 1.5 0 0 0-1.5-1.5h-1A1.5 1.5 0 0 0 0 6.5v1.5A1.5 1.5 0 0 0 1.5 9H13a1.5 1.5 0 0 0 1.5-1.5V6.5z"/>
                            </svg>
                        </div>
                        游戏详情
                    </a>
                    <div class="collapse" id="collapsePages" aria-labelledby="headingTwo"
                         data-bs-parent="#sidenavAccordion">
                        <nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">
                            <a class="nav-link collapsed" href="#" data-bs-toggle="collapse"
                               data-bs-target="#pagesCollapseAuth" aria-expanded="false"
                               aria-controls="pagesCollapseAuth">
                                Authentication
                                <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                            </a>
                            <div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne"
                                 data-bs-parent="#sidenavAccordionPages">
                                <nav class="sb-sidenav-menu-nested nav">
                                    <a class="nav-link" href="login.html">Login</a>
                                    <a class="nav-link" href="register.html">Register</a>
                                    <a class="nav-link" href="password.html">Forgot Password</a>
                                </nav>
                            </div>
                            <a class="nav-link collapsed" href="#" data-bs-toggle="collapse"
                               data-bs-target="#pagesCollapseError" aria-expanded="false"
                               aria-controls="pagesCollapseError">
                                Error
                                <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                            </a>
                            <div class="collapse" id="pagesCollapseError" aria-labelledby="headingOne"
                                 data-bs-parent="#sidenavAccordionPages">
                                <nav class="sb-sidenav-menu-nested nav">
                                    <a class="nav-link" href="401.html">401 Page</a>
                                    <a class="nav-link" href="404.html">404 Page</a>
                                    <a class="nav-link" href="500.html">500 Page</a>
                                </nav>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="sb-sidenav-footer">
                Game Ratings
            </div>
        </nav>
    </div>



    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h5 class="mt-2">游戏详情</h5>
                <ol class="breadcrumb mb-2">
                    <li class="breadcrumb-item"><a href="index.html"></a></li>
                </ol>
                <div class="card mb-4">
                    <div class="card-body">
                        <h3>游戏名称：{{ game_name }}</h3>
                        <p>游戏描述：{{ game_description }}</p>
                    </div>
                </div>
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-chart-area me-1"></i>
                        游戏评分分析
                    </div>
                    <div class="card-body">
                        <div id="mainOne" style="width: 100%;height: 400px"></div>
                    </div>
                    <div class="card-body">
                        <div id="mainTwo" style="width: 100%;height: 400px"></div>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-header d-flex align-items-center">
                        <i class="fas fa-list me-1"></i>
                        游戏评分与评论
                        <label class="form-check-label mx-2">
                            <input type="checkbox" class="form-check-input" id="lowRatings"> 查看低分评论
                        </label>
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" id="highRatings"> 查看高分评论
                        </label>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered table-striped table-hover">
                            <thead class="thead-dark">
                            <tr>
                                <th scope="col">评分</th>
                                <th scope="col">评论</th>
                            </tr>
                            </thead>
                            <tbody id="ratingsTableBody">
                            {% for rating in ratings %}
                            <tr data-rating="{{ rating[0] }}">
                                <td>{{ rating[0] }}</td>
                                <td>{{ rating[1] }}</td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                

            </div>
        </main>
        <footer class="py-4 bg-light mt-auto">
            <div class="container-fluid px-4">
                <div class="d-flex align-items-center justify-content-between small">
                    <div class="text-muted">Copyright &copy; 游戏评分管理平台 2024</div>
                </div>
            </div>
        </footer>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>
<script src="static/js/scripts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
<script src="/static/lib/echarts.js"></script>
<script src="static/assets/demo/chart-area-demo.js"></script>
<script src="static/assets/demo/chart-bar-demo.js"></script>
<script src="static/assets/demo/chart-pie-demo.js"></script>

<script>
    $(document).ready(function() {
        // 初始显示所有评论
        function displayAllRatings() {
            $('#ratingsTableBody tr').show();
        }

        // 显示低分评论
        function displayLowRatings() {
            $('#ratingsTableBody tr').each(function() {
                var rating = parseFloat($(this).data('rating'));
                if (rating < 4.0) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        }

        // 显示高分评论
        function displayHighRatings() {
            $('#ratingsTableBody tr').each(function() {
                var rating = parseFloat($(this).data('rating'));
                if (rating >= 4.0) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        }

        // 重置评论显示
        function resetRatingsDisplay() {
            $('#ratingsTableBody tr').hide();
        }

        // 监听勾选框变化
        $('#lowRatings, #highRatings').change(function() {
            var lowChecked = $('#lowRatings').is(':checked');
            var highChecked = $('#highRatings').is(':checked');

            if (lowChecked && highChecked) {
                displayAllRatings(); // 两个都选中时显示所有评论
            } else if (lowChecked) {
                displayLowRatings(); // 仅选中低分时显示低分评论
            } else if (highChecked) {
                displayHighRatings(); // 仅选中高分时显示高分评论
            } else {
                resetRatingsDisplay(); // 都不选中时重置
            }
        });

        // 初始显示所有评论
        displayAllRatings();
    });
</script>

<script>
    var chartDoms = document.getElementById('mainOne');
    var myCharts = echarts.init(chartDoms);
    var options;
    options = {
        title: {
            text: '游戏评分折线图',
            left: 'center'
        },

        tooltip: {
            trigger: 'item', // 触发类型：坐标轴触发
            axisPointer: { // 坐标轴指示器
                type: 'shadow'
            }
        },

        visualMap: [
            {
                show: false,
                type: 'continuous',
                seriesIndex: 1,
                dimension: 0,
                min: 0,
                max: 400
            }
        ],


        xAxis: {
            type: 'category'
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: {{ score | tojson}},
                type: 'line',

                areaStyle: {},

            }
        ]
    };

    options && myCharts.setOption(options);
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var chartDom = document.getElementById('mainTwo');
        var myChart = echarts.init(chartDom);
        var options;

        // 假设 ratingsData 是一个包含评分区间和对应个数的数组，例如：[{scoreRange: "0-1", count: 10}, {scoreRange: "1-2", count: 20}]
        var ratingsData = {{ ratings_data | tojson }};

        // 准备图表数据
        var seriesData = [];
        ratingsData.forEach(function(item) {
            seriesData.push({
                value: item.count,
                name: item.scoreRange
            });
        });

        options = {
            title: {
                text: '评分分布图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ratingsData.map(function(item) {
                    return item.scoreRange;
                })
            },
            series: [
                {
                    name: '评分分布',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: seriesData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        options && myChart.setOption(options);
    });
</script>

</body>
</html>
