<!-- app/templates/statistics/borrow_statistics.html -->
{% extends "base.html" %}

{% block title %}借阅趋势分析 - 统计分析{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/statistics.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/borrow_statistics.css') }}">
{% endblock %}

{% block content %}
<div class="statistics-container">
    <!-- 页面装饰元素 -->
    <div class="page-decoration left"></div>
    <div class="page-decoration right"></div>

    <div class="breadcrumb">
        <a href="{{ url_for('statistics.index') }}">统计分析</a> / <span class="current-page">借阅趋势分析</span>
    </div>

    <h1 class="page-title">借阅趋势分析</h1>

    <div class="intro-text">
        <p>探索读者的阅读习惯与喜好，发现图书流通的奥秘</p>
    </div>

    <div class="filter-section">
        <div class="filter-label">时间范围：</div>
        <select id="time-range" class="filter-select">
            <option value="week">最近7天</option>
            <option value="month" selected>最近30天</option>
            <option value="year">最近一年</option>
        </select>
    </div>

    <div class="chart-container trend-chart">
        <h3>借阅与归还趋势</h3>
        <div class="chart-decoration left floating"></div>
        <div class="chart-decoration right floating"></div>
        <div class="chart-wrapper">
            <canvas id="trend-chart"></canvas>
        </div>
    </div>

    <div class="chart-row">
        <div class="chart-container half">
            <h3>分类借阅分布</h3>
            <div class="chart-wrapper">
                <canvas id="category-chart"></canvas>
            </div>
        </div>

        <div class="stats-summary half">
            <h3>借阅概况</h3>
            <div class="stats-grid" id="borrow-summary">
                <!-- 数据将通过JS动态填充 -->
                <div class="loading">
                    <div class="loader"></div>
                    <span>数据加载中<span class="dot-animation">...</span></span>
                </div>
            </div>
        </div>
    </div>

    <div class="insights-container">
        <h3>阅读洞察</h3>
        <div class="insights-content">
            <p>根据当前数据分析，发现读者更喜欢在周末借阅图书，女性读者偏爱文学和艺术类书籍，而男性读者则更关注科技和历史类图书。</p>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{{ url_for('static', filename='js/borrow_statistics.js') }}"></script>
<script>
    // 添加动画效果
    document.addEventListener('DOMContentLoaded', function() {
        // 为统计项添加hover效果
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-fadeInUp');
                    observer.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.1
        });

        // 监听所有主要元素
        document.querySelectorAll('.chart-container, .stats-summary, .insights-container').forEach(el => {
            observer.observe(el);
        });

        // 统计卡片的交互效果
        document.addEventListener('mouseover', function(e) {
            if (e.target.closest('.stats-item')) {
                const item = e.target.closest('.stats-item');
                const items = document.querySelectorAll('.stats-item');

                items.forEach(i => {
                    if (i !== item) {
                        i.style.opacity = '0.7';
                    }
                });
            }
        });

        document.addEventListener('mouseout', function(e) {
            if (e.target.closest('.stats-item')) {
                document.querySelectorAll('.stats-item').forEach(i => {
                    i.style.opacity = '1';
                });
            }
        });
    });
</script>
{% endblock %}
