{extend name="admin/layout" /}
{block name="title"}访问记录{/block}
{block name="main"}
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <div class="col-sm-8">
                <h4>访问记录列表</h4>
            </div>
            <div class="col-sm-4">
                <form submit="return searchSubmit()" class="input-group">
                    <input type="text" id="search-kw" class="form-control" placeholder="请输入IP或浏览器信息...">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button" onclick="searchData()">
                            <i class="fa fa-search"></i> 搜索
                        </button>
                        <button class="btn btn-default" type="button" onclick="resetSearch()">
                            <i class="fa fa-refresh"></i> 重置
                        </button>
                    </span>
                </form>
            </div>
        </div>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-12">
                <div id="visitChart" style="width: 100%; height: 400px; margin-bottom: 30px;"></div>
            </div>
        </div>
        <table id="listTable"></table>
    </div>
</div>
{/block}

{block name="script"}
<script src="https://s4.zstatic.net/ajax/libs/layer/3.1.1/layer.js"></script>
<script src="https://s4.zstatic.net/ajax/libs/bootstrap-table/1.21.4/bootstrap-table.min.js"></script>
<script src="https://s4.zstatic.net/ajax/libs/bootstrap-table/1.21.4/extensions/page-jump-to/bootstrap-table-page-jump-to.min.js"></script>
<script src="https://s4.zstatic.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<script src="/static/js/custom.js"></script>
<script>
const $table = $('#listTable');
const defaultPageSize = 15;
const pageNumber = typeof window.$_GET['pageNumber'] != 'undefined' ? parseInt(window.$_GET['pageNumber']) : 1;
const pageSize = typeof window.$_GET['pageSize'] != 'undefined' ? parseInt(window.$_GET['pageSize']) : defaultPageSize;

function initChart() {
    const chart = echarts.init(document.getElementById('visitChart'));
    $.ajax({
        url: '/admin/getChartData',
        type: 'get',
        success: function(res) {
            if (res.code === 200) {
                const option = {
                    title: {
                        text: '最近7天访问量统计',
                        left: 'center',
                        top: 20
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: res.data.dates,
                        axisLabel: {
                            interval: 0,
                            rotate: 30
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1
                    },
                    series: [{
                        name: '访问量',
                        data: res.data.counts,
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 8,
                        areaStyle: {
                            opacity: 0.3
                        },
                        itemStyle: {
                            color: '#409EFF'
                        },
                        emphasis: {
                            itemStyle: {
                                color: '#409EFF',
                                borderColor: '#fff',
                                borderWidth: 2
                            }
                        }
                    }]
                };
                chart.setOption(option);
            }
        }
    });
}

$(document).ready(function() {
    updateToolbar();
    $table.bootstrapTable({
        url: '/admin/getVisitList',
        method: 'post',
        pageNumber: pageNumber,
        pageSize: pageSize,
        classes: 'table table-striped table-hover table-bordered',
        columns: [
            {field: 'id', title: 'ID', align: 'center', width: '60px'},
            {field: 'ip', title: 'IP地址', align: 'center'},
            {field: 'user_agent', title: '浏览器信息', align: 'center'},
            {field: 'create_time', title: '访问时间', align: 'center'}
        ]
    });
});

function searchData() {
    $table.bootstrapTable('refresh', {
        query: {
            kw: $('#search-kw').val()
        }
    });
}

$(function() {
    initChart();
    
    window.addEventListener('resize', function() {
        const chart = echarts.getInstanceByDom(document.getElementById('visitChart'));
        if (chart) {
            chart.resize();
        }
    });
});
</script>
{/block}