<%@ page import="java.util.List" %>
<%@ page import="pojo.ParkingRecord" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ 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="<%=request.getContextPath()%>/static/js/echarts.js"></script>
</head>

<%
    request.setCharacterEncoding("UTF-8");
    List<ParkingRecord> parkingRecords = (List<ParkingRecord>) request.getAttribute("parkingRecords");
%>
<script>
    function toggleContent(content) {
        event.preventDefault(); // Prevent the default anchor behavior

        // Define the content sections and buttons
        const allRecords = document.getElementById('all-records'); // Assuming you have an element for all records
        const data = document.getElementById('data-section'); // Assuming you have an element for data or stats
        const allButton = document.getElementById('all'); // Button for all records
        const dataButton = document.getElementById('data'); // Button for data

        // Toggle visibility and styles based on the content argument
        if (content === 'all') {
            // Set styles for buttons
            allButton.style.backgroundColor = '#087DCE';
            allButton.style.color = 'white';
            dataButton.style.backgroundColor = 'white';
            dataButton.style.color = 'black';

            // Set display for content sections
            allRecords.style.display = 'block'; // Show all records
            data.style.display = 'none'; // Hide data
        } else if (content === 'data') {
            // Set styles for buttons
            allButton.style.backgroundColor = 'white';
            allButton.style.color = 'black';
            dataButton.style.backgroundColor = '#087DCE';
            dataButton.style.color = 'white';

            // Set display for content sections
            allRecords.style.display = 'none'; // Hide all records
            data.style.display = 'flex'; // Show data
        }
    }
</script>
<body>
<div class="top-bar">
    <div class="top-bar-logo">
        <a  href="#"><img id="logo" src="<%=request.getContextPath()%>/static/images/logo.jpg" alt="" ></a>
        <a id="logo-text" href="<%=request.getContextPath()%>">山东科技大学 作为小组停车场管理系统 <span style="font-size: 20px;">管理员端</span></a>
    </div>
    <div class="top-bar-btn">
<%--        <a class="top-bar-tag" href="<%=request.getContextPath()%>/mall/AllTask">任务广场</a>--%>
    </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="choose-area">
            <a id="all" href="#" onclick="toggleContent('all')">所有记录</a>
            <a id="data" href="#" onclick="toggleContent('data')">统计信息</a>
        </div>
        <div id="all-records">
            <form id="vehicle-form" action="<%=request.getContextPath()%>/main/admin/Records" method="post">
                <input type="text" name="car_license" placeholder="请输入车牌号">
                <input type="text" name="location" placeholder="请输入停车位置">
                <input type="date" name="start_time" placeholder="起始时间">
                <input type="date" name="end_time" placeholder="结束时间">
                <input type="submit" value="搜索">
            </form>
            <table class="vehicle-table">
                <tr style="color:#087DCE;">
                    <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;">结束时间</th>
                    <th style="font-weight: bold;">停车费用</th>
                </tr>
                <%
                    for(ParkingRecord record: parkingRecords) {
                %>
                <tr>
                    <th><%=record.getSpot_id()%></th>
                    <th><%=record.getLocation()%></th>
                    <th><%=record.getCar_license()%></th>
                    <th><%=record.getStart_time()%></th>
                    <th><%=record.getEnd_time()==null?'-':record.getEnd_time()%></th>
                    <th><%=(Double)record.getParking_fee() == null?'-':record.getParking_fee()%></th>
                </tr>
                <%
                    }
                %>
            </table>
        </div>
        <div id="data-section" style="display: none">
           <div class="data-row">
               <div id="top"></div>
                <div id="chart1"></div>
           </div>
            <div class="data-row">
                <div id="line-chart"></div>
                <div id="user-pic"></div>
            </div>
        </div>

    </div>
</div>
</body>
</html>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var topChart = echarts.init(document.getElementById('top'));
        var userNames = [];
        var parkingFees = [];
        <%
           Map<String, Double> userParkingInfo = (Map<String, Double>) request.getAttribute("topCost");
           for (Map.Entry<String, Double> entry : userParkingInfo.entrySet()) {
               String userName = entry.getKey();
               Double totalParkingFees = entry.getValue();
       %>
        userNames.push('<%= userName %>'); // 将用户名添加到数组
        parkingFees.push('<%= totalParkingFees %>'); // 将停车费用添加到数组
        <%}%>
        topChart.setOption({
            title: {
                text: '停车费总额最高前5名',
                left: 'center'
            },
            tooltip: {},
            xAxis: {
                data: userNames
            },
            yAxis: {},
            series: [
                {
                    name: '消费',
                    type: 'bar',
                    data: parkingFees
                }
            ]
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var chartDom = document.getElementById('line-chart');
        var myChart = echarts.init(chartDom);
        var option;

        let dates = [];
        let data = [];

        <%
        Map<Date, Double> monthIncome = (Map<Date, Double>) request.getAttribute("monthIncome");
        for (Map.Entry<Date, Double> entry : monthIncome.entrySet()) {
            Date date = entry.getKey();
            Double Fees = entry.getValue();
        %>
        var formattedDate = new Date('<%= date %>').toLocaleDateString();
        console.log("date: " + formattedDate);
        console.log("fee: " + <%= Fees %>);
        dates.push(formattedDate); // 将格式化后的日期字符串添加到数组
        data.push(<%= Fees %>);

        <%
        }
        %>

        option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                left: 'center',
                text: '近一个月停车费收入情况'
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dates
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 10
                },
                {
                    start: 0,
                    end: 10
                }
            ],
            series: [
                {
                    name: '消费总额',
                    type: 'line',
                    symbol: 'none',
                    sampling: 'lttb',
                    itemStyle: {
                        color: '#087DCE'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#6da0cc'
                            },
                            {
                                offset: 1,
                                color: '#087DCE'
                            }
                        ])
                    },
                    data: data
                }
            ]
        };

        option && myChart.setOption(option);
    });
</script>
<script>
    <%
    int peopleBusy = (int) request.getAttribute("peopleBusy");
    int peopleSum = (int) request.getAttribute("peopleSum");
    %>
    var chartDom = document.getElementById('user-pic');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '业主画像',
            subtext: '根据停车时间推断业主的工作压力',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '业主',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: <%=peopleBusy%>, name: '压力较大' },
                    { value: <%=peopleSum - peopleBusy%>, name: '正常业主' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
</script>
<script>
    var chartDom = document.getElementById('chart1');
    var myChart = echarts.init(chartDom);
    var option;
    var xAxisData = [];
    var data1 = [];
    <%
    Map<Integer, Double> hm = (Map<Integer, Double>) request.getAttribute("hourMins");
    for (Map.Entry<Integer, Double> entry : hm.entrySet()) {
            Integer hour = entry.getKey();
            Double mins = entry.getValue();
    %>
    xAxisData.push(<%=hour%>);
    data1.push(<%=mins%>);
    <%
    }
    %>
    option = {
        title: {
            text: '不同时段的平均停车时间',
            left: 'center'
        },
        xAxis: {
            data: xAxisData
        },
        yAxis: {},
        series: [
            {
                name: '分钟',
                type: 'bar',
                data: data1
            }
        ]
    }

    option && myChart.setOption(option);
</script>