{include file="/shopro/common/script" /}

<script src="__CDN__/assets/addons/shopro/libs/echarts.min.js?v={$site.version|htmlentities}"></script>

<style>
    .stats-center {
        background: #ffffff;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    .stats-center-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .stats-center-title {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        display: flex;
        align-items: center;
    }
    .stats-center-title i {
        margin-right: 8px;
        color: #3b82f6;
    }
    .stats-center-time {
        font-size: 12px;
        color: #9ca3af;
        margin-top: 4px;
    }
    .header-right {
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .time-select-wrapper {
        position: relative;
    }
    .time-select {
        background: #ffffff;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 8px 24px 8px 12px;
        color: #374151;
        font-size: 13px;
        cursor: pointer;
        appearance: none;
        outline: none;
        min-width: 100px;
        transition: border-color 0.2s ease;
    }
    .time-select:hover {
        border-color: #3b82f6;
    }
    .time-select:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    .time-select-wrapper::after {
        content: '\f078';
        font-family: 'FontAwesome';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        pointer-events: none;
        font-size: 12px;
    }
    .refresh-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        border: none;
        border-radius: 8px;
        color: #ffffff;
        cursor: pointer;
        font-size: 13px;
        transition: all 0.2s ease;
    }
    .refresh-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }
    .refresh-btn:active {
        transform: translateY(0);
    }
    .refresh-btn i {
        font-size: 14px;
    }
    .stats-card-row {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }
    .stats-card {
        background: #f9fafb;
        border-radius: 12px;
        padding: 18px 20px;
        flex: 1;
        min-width: 140px;
        position: relative;
        overflow: hidden;
        border: 1px solid #e5e7eb;
        transition: all 0.2s ease;
    }
    .stats-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }
    .stats-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
    }
    .stats-card.card-1::before { background: linear-gradient(180deg, #667eea 0%, #764ba2 100%); }
    .stats-card.card-2::before { background: linear-gradient(180deg, #10b981 0%, #059669 100%); }
    .stats-card.card-3::before { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); }
    .stats-card.card-4::before { background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); }
    .stats-card.card-5::before { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%); }
    .stats-card.card-6::before { background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%); }
    .stats-card.card-7::before { background: linear-gradient(180deg, #ec4899 0%, #db2777 100%); }
    .stats-card.card-8::before { background: linear-gradient(180deg, #06b6d4 0%, #0891b2 100%); }
    .stats-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    .stats-card-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
    .card-1 .stats-card-icon { background: rgba(102, 126, 234, 0.15); color: #667eea; }
    .card-2 .stats-card-icon { background: rgba(16, 185, 129, 0.15); color: #10b981; }
    .card-3 .stats-card-icon { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
    .card-4 .stats-card-icon { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
    .card-5 .stats-card-icon { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
    .card-6 .stats-card-icon { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
    .card-7 .stats-card-icon { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
    .card-8 .stats-card-icon { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }
    .stats-card-label {
        font-size: 13px;
        color: #6b7280;
        font-weight: 500;
    }
    .stats-card-value {
        font-size: 26px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 6px;
        line-height: 1.2;
    }
    .stats-card-trend {
        display: flex;
        align-items: center;
        font-size: 12px;
    }
    .stats-card-trend.up {
        color: #10b981;
    }
    .stats-card-trend.down {
        color: #ef4444;
    }
    .stats-card-trend i {
        margin-right: 4px;
        font-size: 10px;
    }
    .chart-panel {
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        padding: 20px;
        margin-bottom: 20px;
    }
    .chart-panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }
    .chart-panel-title {
        font-size: 14px;
        font-weight: 600;
        color: #1f2937;
    }
    .chart-panel-subtitle {
        font-size: 12px;
        color: #9ca3af;
        margin-top: 2px;
    }
    .chart-tabs {
        display: flex;
        gap: 8px;
        background: #f3f4f6;
        padding: 4px;
        border-radius: 8px;
    }
    .chart-tab {
        padding: 6px 14px;
        border-radius: 6px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        color: #6b7280;
        background: transparent;
        border: none;
    }
    .chart-tab.active {
        background: #ffffff;
        color: #3b82f6;
        font-weight: 600;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .chart-container {
        height: 220px;
    }
    .funnel-item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
    }
    .funnel-label {
        width: 80px;
        font-size: 13px;
        color: #4b5563;
        flex-shrink: 0;
    }
    .funnel-bar-wrapper {
        flex: 1;
        height: 24px;
        background: #f3f4f6;
        border-radius: 12px;
        overflow: hidden;
    }
    .funnel-bar {
        height: 100%;
        border-radius: 12px;
        transition: width 0.5s ease;
        display: flex;
        align-items: center;
        padding-left: 12px;
        color: #1f2937;
        font-size: 12px;
        font-weight: 600;
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
    }
    .funnel-bar.color-1 { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
    .funnel-bar.color-2 { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
    .funnel-bar.color-3 { background: linear-gradient(90deg, #10b981, #34d399); }
    .funnel-bar.color-4 { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
    .funnel-bar.color-5 { background: linear-gradient(90deg, #ec4899, #f472b6); }
    .price-dist-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    .price-dist-label {
        width: 100px;
        font-size: 12px;
        color: #6b7280;
        flex-shrink: 0;
    }
    .price-dist-bar-wrapper {
        flex: 1;
        height: 16px;
        background: #f3f4f6;
        border-radius: 8px;
        overflow: hidden;
    }
    .price-dist-bar {
        height: 100%;
        border-radius: 8px;
        background: linear-gradient(90deg, #8b5cf6, #a78bfa);
    }
    .price-dist-percent {
        width: 40px;
        text-align: right;
        font-size: 12px;
        color: #9ca3af;
        margin-left: 10px;
    }
    .order-list {
        /* 移除内层滚动，让容器处理滚动 */
    }
    .order-list-container {
        max-height: 200px;
        overflow-y: auto;
    }
    .order-loading,
    .order-no-more,
    .order-load-more {
        text-align: center;
        padding: 10px;
        color: #9ca3af;
        font-size: 12px;
    }
    .order-load-more a {
        color: #4a90d9;
        text-decoration: none;
    }
    .order-load-more a:hover {
        color: #357abd;
        text-decoration: underline;
    }
    .order-item {
        display: flex;
        align-items: center;
        padding: 12px;
        background: #f9fafb;
        border-radius: 8px;
        margin-bottom: 10px;
        border: 1px solid #e5e7eb;
    }
    .order-status {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #10b981;
        margin-right: 12px;
    }
    .order-info {
        flex: 1;
    }
    .order-amount {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
    }
    .order-time {
        font-size: 11px;
        color: #9ca3af;
        margin-top: 2px;
    }
    .order-tag {
        padding: 4px 8px;
        background: #dcfce7;
        color: #166534;
        border-radius: 4px;
        font-size: 11px;
    }
    .growth-badge {
        background: linear-gradient(135deg, #10b981, #059669);
        color: #ffffff;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
    }
    .data-status {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #10b981;
    }
    .status-dot {
        width: 6px;
        height: 6px;
        background: #10b981;
        border-radius: 50%;
        animation: pulse 2s infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
</style>

<div id="index" class="dashboard-index panel panel-default panel-intro" v-cloak>
    <el-container class="panel-block">
        <el-main class="dashboard-index-main">
            <el-scrollbar height="100%">

                <div class="stats-center">
                    <div class="stats-center-header">
                        <div>
                            <div class="stats-center-title">
                                <i class="fa fa-bar-chart"></i>
                                数据统计中心
                            </div>
                            <div class="stats-center-time">实时业务数据监控 · 更新于 <span id="update-time"></span></div>
                        </div>
                        <div class="header-right">
                            <!-- <div class="data-status">
                                <span class="status-dot"></span>
                                <span>数据同步中</span>
                            </div> -->
                            <div class="time-select-wrapper">
                                <select id="time_range" class="time-select">
                                    <option value="7days">近7天</option>
                                    <option value="30days" selected>近30天</option>
                                    <option value="90days">近90天</option>
                                </select>
                            </div>
                            <button class="refresh-btn" id="refreshBtn">
                                <i class="fa fa-refresh"></i>
                                <span>刷新数据</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="stats-center">
                    <div class="stats-card-row">
                        <div class="stats-card card-1">
                            <div class="stats-card-header">
                                <span class="stats-card-label">成交总额</span>
                                <span class="stats-card-icon"><i class="fa fa-money"></i></span>
                            </div>
                            <div class="stats-card-value" id="stat-total-amount">¥0.00</div>
                            <div class="stats-card-trend up"><i class="fa fa-arrow-up"></i> <span id="stat-total-trend">+0%</span> 较上周期</div>
                        </div>
                        <div class="stats-card card-2">
                            <div class="stats-card-header">
                                <span class="stats-card-label">净利润率</span>
                                <span class="stats-card-icon"><i class="fa fa-percent"></i></span>
                            </div>
                            <div class="stats-card-value" id="stat-profit-rate">0%</div>
                            <div class="stats-card-trend up"><i class="fa fa-arrow-up"></i> <span id="stat-profit-trend">+0%</span> 较上周期</div>
                        </div>
                        <div class="stats-card card-3">
                            <div class="stats-card-header">
                                <span class="stats-card-label">客单价</span>
                                <span class="stats-card-icon"><i class="fa fa-shopping-cart"></i></span>
                            </div>
                            <div class="stats-card-value" id="stat-avg-amount">¥0.00</div>
                            <div class="stats-card-trend up"><i class="fa fa-arrow-up"></i> <span id="stat-avg-trend">+0%</span> 较上周期</div>
                        </div>
                        <div class="stats-card card-4">
                            <div class="stats-card-header">
                                <span class="stats-card-label">订单数</span>
                                <span class="stats-card-icon"><i class="fa fa-file-text"></i></span>
                            </div>
                            <div class="stats-card-value" id="stat-order-count">0</div>
                            <div class="stats-card-trend up"><i class="fa fa-arrow-up"></i> <span id="stat-order-trend">+0%</span> 较上周期</div>
                        </div>
                        <div class="stats-card card-5">
                            <div class="stats-card-header">
                                <span class="stats-card-label">访客数</span>
                                <span class="stats-card-icon"><i class="fa fa-users"></i></span>
                            </div>
                            <div class="stats-card-value" id="stat-visitor-count">0</div>
                            <div class="stats-card-trend up" id="stat-visitor-trend"><i class="fa fa-arrow-up"></i> <span>+0%</span> 较上周期</div>
                        </div>
                        <div class="stats-card card-6">
                            <div class="stats-card-header">
                                <span class="stats-card-label">转化率</span>
                                <span class="stats-card-icon"><i class="fa fa-line-chart"></i></span>
                            </div>
                            <div class="stats-card-value" id="stat-conversion-rate">0%</div>
                            <div class="stats-card-trend up"><i class="fa fa-arrow-up"></i> <span id="stat-conversion-trend">+0%</span> 较上周期</div>
                        </div>
                        <div class="stats-card card-8">
                            <div class="stats-card-header">
                                <span class="stats-card-label">注册用户</span>
                                <span class="stats-card-icon"><i class="fa fa-users"></i></span>
                            </div>
                            <div class="stats-card-value" id="stat-register-users">0</div>
                            <div class="stats-card-trend up"><i class="fa fa-arrow-up"></i> <span id="stat-register-trend">+0%</span> 较上周期</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6">
                        <div class="chart-panel">
                            <div class="chart-panel-header">
                                <div>
                                    <div class="chart-panel-title">成交总额趋势</div>
                                    <div class="chart-panel-subtitle" id="gmv-subtitle">近30天每日GMV走势</div>
                                </div>
                                <div class="chart-tabs">
                                    <button class="chart-tab active" id="gmv-day" data-chart="gmv" data-period="day">日</button>
                                    <button class="chart-tab" id="gmv-week" data-chart="gmv" data-period="week">周</button>
                                    <button class="chart-tab" id="gmv-month" data-chart="gmv" data-period="month">月</button>
                                </div>
                            </div>
                            <div id="gmv-chart" class="chart-container"></div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="chart-panel">
                            <div class="chart-panel-header">
                                <div>
                                    <div class="chart-panel-title">订单数趋势</div>
                                    <div class="chart-panel-subtitle" id="order-subtitle">近30天订单量走势</div>
                                </div>
                                <div class="chart-tabs">
                                    <button class="chart-tab active" id="order-day" data-chart="order" data-period="day">日</button>
                                    <button class="chart-tab" id="order-week" data-chart="order" data-period="week">周</button>
                                    <button class="chart-tab" id="order-month" data-chart="order" data-period="month">月</button>
                                </div>
                            </div>
                            <div id="order-chart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4">
                        <div class="chart-panel">
                            <div class="chart-panel-header">
                                <div>
                                    <div class="chart-panel-title">转化漏斗</div>
                                    <div class="chart-panel-subtitle">用户行为转化路径</div>
                                </div>
                            </div>
                            <div class="funnel-container" id="funnel-container">
                                <div class="funnel-item">
                                    <span class="funnel-label">访问</span>
                                    <div class="funnel-bar-wrapper">
                                        <div class="funnel-bar color-1" id="funnel-visit" style="width: 100%">0</div>
                                    </div>
                                </div>
                                <div class="funnel-item">
                                    <span class="funnel-label">浏览商品</span>
                                    <div class="funnel-bar-wrapper">
                                        <div class="funnel-bar color-2" id="funnel-browse" style="width: 50%">0</div>
                                    </div>
                                </div>
                                <div class="funnel-item">
                                    <span class="funnel-label">加入购物车</span>
                                    <div class="funnel-bar-wrapper">
                                        <div class="funnel-bar color-3" id="funnel-cart" style="width: 30%">0</div>
                                    </div>
                                </div>
                                <div class="funnel-item">
                                    <span class="funnel-label">提交订单</span>
                                    <div class="funnel-bar-wrapper">
                                        <div class="funnel-bar color-4" id="funnel-submit" style="width: 20%">0</div>
                                    </div>
                                </div>
                                <div class="funnel-item">
                                    <span class="funnel-label">完成支付</span>
                                    <div class="funnel-bar-wrapper">
                                        <div class="funnel-bar color-5" id="funnel-pay" style="width: 10%">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="chart-panel">
                            <div class="chart-panel-header">
                                <div>
                                    <div class="chart-panel-title">注册用户增长</div>
                                    <div class="chart-panel-subtitle">近30天新增用户趋势</div>
                                </div>
                                <div>
                                <span class="growth-badge" id="growth-badge">+0</span>
                                <p class="chart-panel-subtitle">累计注册用户</p>
                                </div>
                            </div>
                            <div id="user-growth-chart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4">
                        <div class="chart-panel">
                            <div class="chart-panel-header">
                                <div>
                                    <div class="chart-panel-title">客单价分布</div>
                                    <div class="chart-panel-subtitle">不同价格区间订单占比</div>
                                </div>
                            </div>
                            <div class="price-dist-container" id="price-dist-container">
                                <div class="price-dist-item">
                                    <span class="price-dist-label">0-100元</span>
                                    <div class="price-dist-bar-wrapper">
                                        <div class="price-dist-bar" id="price-0-100" style="width: 0%"></div>
                                    </div>
                                    <span class="price-dist-percent" id="price-0-100-percent">0%</span>
                                </div>
                                <div class="price-dist-item">
                                    <span class="price-dist-label">100-300元</span>
                                    <div class="price-dist-bar-wrapper">
                                        <div class="price-dist-bar" id="price-100-300" style="width: 0%"></div>
                                    </div>
                                    <span class="price-dist-percent" id="price-100-300-percent">0%</span>
                                </div>
                                <div class="price-dist-item">
                                    <span class="price-dist-label">300-500元</span>
                                    <div class="price-dist-bar-wrapper">
                                        <div class="price-dist-bar" id="price-300-500" style="width: 0%"></div>
                                    </div>
                                    <span class="price-dist-percent" id="price-300-500-percent">0%</span>
                                </div>
                                <div class="price-dist-item">
                                    <span class="price-dist-label">500-1000元</span>
                                    <div class="price-dist-bar-wrapper">
                                        <div class="price-dist-bar" id="price-500-1000" style="width: 0%"></div>
                                    </div>
                                    <span class="price-dist-percent" id="price-500-1000-percent">0%</span>
                                </div>
                                <div class="price-dist-item">
                                    <span class="price-dist-label">1000元以上</span>
                                    <div class="price-dist-bar-wrapper">
                                        <div class="price-dist-bar" id="price-1000" style="width: 0%"></div>
                                    </div>
                                    <span class="price-dist-percent" id="price-1000-percent">0%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="chart-panel">
                            <div class="chart-panel-header">
                                <div>
                                    <div class="chart-panel-title">实时订单动态</div>
                                    <div class="chart-panel-subtitle">最新成交订单</div>
                                </div>
                            </div>
                            <div class="order-list-container" id="order-list-container">
                                <div class="order-list" id="order-list">
                                </div>
                                <div class="order-loading" id="order-loading" style="display: none;">
                                    <i class="fa fa-spinner fa-spin"></i> 加载中...
                                </div>
                                <div class="order-load-more" id="order-load-more" style="display: none;">
                                    <a href="javascript:void(0);" id="load-more-link">点击加载更多</a>
                                </div>
                                <div class="order-no-more" id="order-no-more" style="display: none;">
                                    已加载全部订单
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </el-main>
    </el-container>
</div>

</div>