<%@ page import="java.util.List" %>
<%@ page import="pojo.User" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>管理员</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/mainTemplate.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/vehicleStyle.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- 引入 Chart.js -->
    <style>
        .pageConfig{
            margin-top: 1%;
            width: 100%;
            display: flex;
            cursor: pointer;
            /*border: 2px solid #126bff;*/
        }

        .pageConfigUp{
            width: 100%;
            cursor: pointer;
            /*border: 2px solid #126bff;*/
            /*margin-bottom: 1%;*/
            /*margin-top: 1%;*/
            /*box-shadow: 0 0 0 2px #f0f0f0;*/
            border-radius: 8px;
            text-align: center; /* 让内容水平居中 */
            font-family: Arial, sans-serif;
        }

        .publishButton {

            font-size: 24px; /* 设置字体大小 */
            display: inline-block; /* 让按钮元素作为块级元素显示 */
            padding: 10px 20px; /* 设定按钮内边距 */
            border: 2px solid #fff; /* 按钮边框 */
            border-radius: 5px; /* 圆角 */
            text-decoration: none; /* 去除链接下划线 */
            /*color: #333; !* 文字颜色 *!*/
            margin-top: 1%; /* 上边距约为页面高度的 30% */
            margin-bottom: 1%; /* 下边距约为页面高度的 30% */
            background-color: #3fb643;
            color: #fff; /* 设置文字颜色为白色 */.
        }

        .publishButton:hover {
            background-color: #333; /* 鼠标悬停时背景颜色 */
            color: #fff; /* 鼠标悬停时文字颜色 */
        }



    </style>
</head>
<%
    request.setCharacterEncoding("UTF-8");
    Map<String, Integer> dataMap=null;
    List<User> userList=null;
    if(request.getParameter("count")!=null){
        dataMap= (Map<String, Integer>) request.getAttribute("mp");
    }
    else{
        userList = (List<User>) request.getAttribute("users");
    }
%>
<body>
<div class="top-bar">
    <div class="top-bar-logo">
        <a  href="<%=request.getContextPath()%>/mall/AllTask"><img id="logo" src="<%=request.getContextPath()%>/static/images/logo.jpg" alt="" ></a>
        <a id="logo-text" href="#">山东科技大学 作为小组停车场管理系统 <span style="font-size: 20px;">管理员端</span></a>
    </div>
    <div class="top-bar-btn">
    </div>
    <div class="top-bar-right">
        <div class="drop-menu">
            <div class="top-bar-account">
                <span><%=request.getSession().getAttribute("username")%></span>
                <div class="drop"><a href="<%=request.getContextPath()%>/account/exit">退出账户</a></div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="side-bar">
        <a class="side-bar-button" href="<%=request.getContextPath()%>/main/admin/User">用户信息</a>
        <a class="side-bar-button" href="<%=request.getContextPath()%>/main/admin/Spots">车位情况</a>
        <a class="side-bar-button" href="<%=request.getContextPath()%>/main/admin/Records">停车记录</a>
        <a class="side-bar-button" href="<%=request.getContextPath()%>/main/admin/Vehicles">车辆信息</a>
    </div>
    <div class="tasks-content">

<%--        <div class="pageConfigUp">--%>
<%--            <a href="publishTask.jsp" class="publishButton"> 添加新用户</a>--%>
<%--        </div>--%>

        <form id="vehicle-form1" action="<%=request.getContextPath()%>/main/admin/User" method="post">
            <input type="text" name="name" placeholder="请输入用户姓名">
            <input type="text" name="parking_spot_id" placeholder="车位号">
            <input type="text" name="address" placeholder="家庭地址">
            <input type="submit" value="搜索">
        </form>

        <form id="vehicle-form2" action="<%=request.getContextPath()%>/main/admin/UserOrder" method="post">
            <label for="sort">选择排序方式:</label>
            <select id="sort" name="sort">
                <option value="userId">按照用户ID排序</option>
                <option value="parking_spot_id">按照停车位ID排序</option>
                <option value="name">按照姓名排序</option>
            </select>
            <input type="submit" value="提交">
        </form>

        <form id="vehicle-form3" action="<%=request.getContextPath()%>/main/admin/UserOrder" method="get">
            <label for="statistic">选择统计信息:</label>
            <select id="statistic" name="statistic">
                <option value="totalUsers">用户总数</option>
                <option value="gender">按性别统计用户数量</option>
                <option value="userType">按类型统计用户数量</option>
            </select>
            <input type="submit" value="提交">
        </form>
        <%
            if (userList != null) {
        %>
        <table class="vehicle-table">
            <tr style="color:#087DCE;">
                <th style="font-weight: bold;">用户ID</th>
                <th style="font-weight: bold;">姓名</th>
                <th style="font-weight: bold;">手机号</th>
                <th style="font-weight: bold;">用户类型</th>
                <th style="font-weight: bold;">停车场ID</th>
                <th style="font-weight: bold;">家庭地址</th>
                <th style="font-weight: bold;">性别</th>
                <th style="font-weight: bold;">车辆详细信息</th>
                <th style="font-weight: bold;">车位详细信息</th>
                <th style="font-weight: bold;">IC卡详细信息</th>
                <th style="font-weight: bold;">修改用户信息</th>
                <th style="font-weight: bold;">删除用户</th>
            </tr>
        <%
            }
        %>
            <%
                if (userList != null) {
                    for(User u: userList) {
                %>
                <tr>
                    <th><%=u.getUser_id()%></th>
                    <th><%=u.getName()%></th>
                    <th><%=u.getTelephone()%></th>
                    <th><%=u.getUser_type()%></th>
                    <th><%=u.getSpot_id()%></th>
                    <th><%=u.getAddress()%></th>
                    <th><%=u.getGender()%></th>
                    <th><a href="<%=request.getContextPath()%>/main/admin/CarInfo?user_id=<%=u.getUser_id()%>">查看 <span style="font-size: 16px;font-weight: bold;"></span> </a></th>
                    <th><a href="<%=request.getContextPath()%>/main/admin/ParkInfo?parking_spot_id=<%=u.getSpot_id()%>">查看 <span style="font-size: 16px;font-weight: bold;"></span> </a></th>
                    <th><a href="<%=request.getContextPath()%>/main/admin/ICInfo?user_id=<%=u.getUser_id()%>">查看 <span style="font-size: 16px;font-weight: bold;"></span> </a></th>
                    <th><a href="<%=request.getContextPath()%>/main/UserToInfo/updateUser.jsp?user_id=<%=u.getUser_id()%>&parking_spot_id=<%=u.getSpot_id()%>">修改 <span style="font-size: 16px;font-weight: bold;"></span> </a></th>
                    <th><a href="<%=request.getContextPath()%>/main/admin/deleteServlet?user_id=<%=u.getUser_id()%>&parking_spot_id=<%=u.getSpot_id()%>">删除 <span style="font-size: 16px;font-weight: bold;"></span> </a></th>
                </tr>
                <%
                    }
                }
            %>

        </table>


        <canvas id="myChart" width="400" height="400"></canvas> <!-- 用于显示图表的 Canvas 元素 -->

        <%
            // 从 request 中获取 Map 数据
            if (dataMap != null) {
                List<String> labelsList = new ArrayList<>(dataMap.keySet());
                List<Integer> valuesList = new ArrayList<>(dataMap.values());

                // 生成 JavaScript 数组的字符串表示
                StringBuilder labelsArray = new StringBuilder("[");
                for (int i = 0; i < labelsList.size(); i++) {
                    labelsArray.append("\"").append(labelsList.get(i)).append("\"");
                    if (i != labelsList.size() - 1) {
                        labelsArray.append(",");
                    }
                }
                labelsArray.append("]");

                StringBuilder valuesArray = new StringBuilder("[");
                for (int i = 0; i < valuesList.size(); i++) {
                    valuesArray.append(valuesList.get(i));
                    if (i != valuesList.size() - 1) {
                        valuesArray.append(",");
                    }
                }
                valuesArray.append("]");
        %>
        <script>
            const labels = <%= labelsArray.toString() %>; // 将 labels 转换为 JavaScript 数组
            const values = <%= valuesArray.toString() %>; // 将 values 转换为 JavaScript 数组

            const ctx = document.getElementById('myChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '数据',
                        data: values,
                        backgroundColor: 'rgba(54, 162, 235, 0.5)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        </script>
        <%
            }
        %>




    </div>
</div>
</body>
</html>
