<!DOCTYPE html>
<html>
<head>
    <:include file="./common/css.html" title="${website.websiteName} - 后台系统" favicon="${website.favicon}"/>
    <!-- 添加ECharts库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <!-- 添加自定义CSS样式 -->
    <style>
        /* 主题色定义 */
        :root {
            --primary-color: #1E9FFF;
            --secondary-color: #5FB878;
            --danger-color: #FF5722;
            --warning-color: #FFB800;
            --dark-color: #393D49;
            --light-color: #F2F2F2;
        }

        /* 仪表盘容器样式 */
        #dashboard-container {
            padding: 20px;
            background-color: #f8f8f8;
        }

        /* 卡片样式美化 */
        .layui-card {
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            border: none;
        }

        .layui-card:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transform: translateY(-3px);
        }

        .layui-card-header {
            font-weight: bold;
            font-size: 16px;
            color: var(--dark-color);
            border-bottom: 1px solid #eee;
            padding: 15px 20px;
            background-color: white;
            border-radius: 8px 8px 0 0;
        }

        .layui-card-body {
            padding: 20px;
            background-color: white;
            border-radius: 0 0 8px 8px;
        }

        /* 数据卡片样式 */
        .data-card h2 {
            font-size: 28px;
            margin: 0 0 10px 0;
            font-weight: 600;
        }

        .data-card p {
            margin: 0;
            color: #999;
            font-size: 14px;
        }

        /* 图表容器样式 */
        .chart-container {
            height: 350px;
            width: 100%;
            border-radius: 4px;
        }

        /* 表格样式美化 */
        .layui-table {
            margin-top: 0;
            border-radius: 4px;
            overflow: hidden;
        }

        .layui-table thead tr {
            background-color: var(--primary-color);
            color: white;
        }

        .layui-table tbody tr:hover {
            background-color: rgba(30, 159, 255, 0.05);
        }

        /* 蓝色主题按钮 */
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-primary:hover {
            background-color: #0e8ae5;
        }

        /* 进度条样式 */
        .progress-bar {
            height: 6px;
            background-color: #eee;
            border-radius: 3px;
            margin-top: 5px;
            overflow: hidden;
        }

        .progress-bar-inner {
            height: 100%;
            background-color: var(--primary-color);
            border-radius: 3px;
        }

        /* 响应式调整 */
        @media screen and (max-width: 768px) {
            .layui-col-md3, .layui-col-md6 {
                margin-bottom: 15px;
                width: 100%;
            }
        }

        /* 确保行正确显示 */
        .layui-row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* 确保列正确浮动 */
        .layui-col-md6 {
            float: left;
            box-sizing: border-box;
            width: 100%; /* 修改为100%宽度 */
        }

        /* 添加额外的样式确保卡片占满整行 */
        @media screen and (min-width: 769px) {
            .dashboard-full-width .layui-col-md6 {
                width: 100%;
            }
        }

        /* 热销商品表格美化 */
        .hot-products-table {
            width: 100%;
            box-shadow: none;
            border: none;
        }

        .hot-products-table thead th {
            font-weight: 600;
            font-size: 14px;
            padding: 12px 15px;
            background-color: rgba(30, 159, 255, 0.08);
            color: var(--dark-color);
            border-bottom: 2px solid var(--primary-color);
        }

        .hot-products-table tbody tr {
            transition: all 0.3s;
        }

        .hot-products-table tbody tr:hover {
            background-color: rgba(30, 159, 255, 0.05);
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .hot-products-table td {
            padding: 15px;
            vertical-align: middle;
        }

        .product-name {
            color: var(--dark-color);
            font-size: 15px;
        }

        .category-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            background-color: var(--primary-color);
            color: white;
            font-size: 12px;
            font-weight: 500;
        }

        .sales-count, .sales-amount {
            font-weight: 500;
            text-align: center;
        }

        .growth-rate {
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 10px;
            display: inline-block;
        }

        .growth-rate.positive {
            color: var(--secondary-color);
            background-color: rgba(95, 184, 120, 0.1);
        }

        .growth-rate.negative {
            color: var(--danger-color);
            background-color: rgba(255, 87, 34, 0.1);
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 主体部分 -->
    <div class="layui-body">
        <!-- 添加仪表盘内容 -->
        <div class="layui-fluid" id="dashboard-container" class="dashboard-full-width">
            <!-- 数据卡片第一行 -->
            <div class="layui-row layui-col-space20">
                <!-- 成交金额卡片 -->
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <i class="layui-icon layui-icon-rmb" style="margin-right: 8px; color: var(--primary-color);"></i>成交金额
                        </div>
                        <div class="layui-card-body data-card">
                            <h2 style="color: var(--primary-color);">¥ 128,560</h2>
                            <p>较上月 <span style="color: var(--secondary-color);">+12.5%</span></p>
                            <div class="progress-bar">
                                <div class="progress-bar-inner" style="width: 75%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space20" style="margin-top: 20px;">
                <!-- 未成交金额卡片 -->
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <i class="layui-icon layui-icon-cart-simple" style="margin-right: 8px; color: var(--danger-color);"></i>未成交金额
                        </div>
                        <div class="layui-card-body data-card">
                            <h2 style="color: var(--danger-color);">¥ 45,320</h2>
                            <p>较上月 <span style="color: var(--danger-color);">+5.2%</span></p>
                            <div class="progress-bar">
                                <div class="progress-bar-inner" style="width: 35%; background-color: var(--danger-color);"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 数据卡片第二行 -->
            <div class="layui-row layui-col-space20" style="margin-top: 20px;">
                <!-- 当前品类数卡片 -->
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <i class="layui-icon layui-icon-app" style="margin-right: 8px; color: var(--primary-color);"></i>当前品类数
                        </div>
                        <div class="layui-card-body data-card">
                            <h2 style="color: var(--primary-color);">24</h2>
                            <p>较上月 <span style="color: var(--secondary-color);">+2</span></p>
                            <div class="progress-bar">
                                <div class="progress-bar-inner" style="width: 60%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space20" style="margin-top: 20px;">
                <!-- 当前商品数卡片 -->
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <i class="layui-icon layui-icon-template-1" style="margin-right: 8px; color: var(--primary-color);"></i>当前商品数
                        </div>
                        <div class="layui-card-body data-card">
                            <h2 style="color: var(--primary-color);">358</h2>
                            <p>较上月 <span style="color: var(--secondary-color);">+28</span></p>
                            <div class="progress-bar">
                                <div class="progress-bar-inner" style="width: 85%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图表行 -->
            <div class="layui-row layui-col-space20" style="margin-top: 20px;">
                <!-- 销售趋势图 -->
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <i class="layui-icon layui-icon-chart" style="margin-right: 8px; color: var(--primary-color);"></i>销售趋势
                        </div>
                        <div class="layui-card-body">
                            <div id="sales-trend-chart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space20" style="margin-top: 20px;">
                <!-- 品类销售占比图 -->
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <i class="layui-icon layui-icon-chart-screen" style="margin-right: 8px; color: var(--primary-color);"></i>品类销售占比
                        </div>
                        <div class="layui-card-body">
                            <div id="category-pie-chart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space20" style="margin-top: 20px;">
                <!-- 热销商品表格 -->
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <i class="layui-icon layui-icon-star" style="margin-right: 8px; color: var(--primary-color);"></i>热销商品TOP5
                            <button class="btn-primary" style="float: right; font-size: 12px;">查看全部</button>
                        </div>
                        <div class="layui-card-body">
                            <table class="layui-table hot-products-table" lay-skin="line">
                                <thead>
                                    <tr>
                                        <th>商品名称</th>
                                        <th>品类</th>
                                        <th>销售量</th>
                                        <th>销售额</th>
                                        <th>同比增长</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><strong class="product-name">时尚连衣裙</strong></td>
                                        <td><span class="category-badge">女装</span></td>
                                        <td class="sales-count">256</td>
                                        <td class="sales-amount">¥25,600</td>
                                        <td><span class="growth-rate positive">+15%</span></td>
                                    </tr>
                                    <tr>
                                        <td><strong class="product-name">休闲西装</strong></td>
                                        <td><span class="category-badge">男装</span></td>
                                        <td class="sales-count">198</td>
                                        <td class="sales-amount">¥23,760</td>
                                        <td><span class="growth-rate positive">+8%</span></td>
                                    </tr>
                                    <tr>
                                        <td><strong class="product-name">运动鞋</strong></td>
                                        <td><span class="category-badge">鞋类</span></td>
                                        <td class="sales-count">187</td>
                                        <td class="sales-amount">¥18,700</td>
                                        <td><span class="growth-rate positive">+12%</span></td>
                                    </tr>
                                    <tr>
                                        <td><strong class="product-name">牛仔裤</strong></td>
                                        <td><span class="category-badge">裤装</span></td>
                                        <td class="sales-count">165</td>
                                        <td class="sales-amount">¥16,500</td>
                                        <td><span class="growth-rate negative">-3%</span></td>
                                    </tr>
                                    <tr>
                                        <td><strong class="product-name">时尚手提包</strong></td>
                                        <td><span class="category-badge">配饰</span></td>
                                        <td class="sales-count">142</td>
                                        <td class="sales-amount">¥14,200</td>
                                        <td><span class="growth-rate positive">+20%</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <:include file="./common/js.html"/>
    <script>
         layui.use(['index'], function () {
             var $ = layui.jquery;
             var index = layui.index;

             // 默认加载主页
             index.loadHome({
                 menuPath: '${ctxPath}/dashboard/workplace',
                 menuName: '<i class="layui-icon layui-icon-home"></i>',
                 onlyLast: true
             });

             // 切换table 刷新页面
             if (layui.admin.setter.pageTabs && layui.admin.setter.tabAutoRefresh == true)
                 $('.layui-layout-admin>.layui-body>.layui-tab').attr('lay-autoRefresh', 'true');

             // 初始化图表 - 修改为在页面加载完成后执行

         });
         $(function() {
                 setTimeout(function() {
                     initCharts();
                     console.log('图表初始化完成');
                 }, 500);
             });
        // 初始化所有图表
        function initCharts() {
            console.log('初始化所有图表');
            // 确保容器存在
            if (!document.getElementById('sales-trend-chart') || !document.getElementById('category-pie-chart')) {
                console.error('图表容器不存在');
                return;
            }

            try {
                // 销售趋势图
                var salesTrendChart = echarts.init(document.getElementById('sales-trend-chart'));
                var salesTrendOption = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['成交金额', '未成交金额']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '成交金额',
                            type: 'line',
                            stack: '总量',
                            data: [12000, 13200, 10100, 13400, 19000, 23000, 21000, 19200, 17000, 15800, 18600, 23400],
                            itemStyle: {
                                color: '#1E9FFF'
                            }
                        },
                        {
                            name: '未成交金额',
                            type: 'line',
                            stack: '总量',
                            data: [2200, 1820, 1910, 2340, 2900, 3300, 3100, 2290, 2000, 2400, 2700, 3400],
                            itemStyle: {
                                color: '#FF5722'
                            }
                        }
                    ]
                };
                salesTrendChart.setOption(salesTrendOption);

                // 品类占比图
                var categoryPieChart = echarts.init(document.getElementById('category-pie-chart'));
                var categoryPieOption = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        data: ['女装', '男装', '童装', '鞋类', '配饰']
                    },
                    series: [
                        {
                            name: '销售占比',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '18',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 35, name: '女装'},
                                {value: 25, name: '男装'},
                                {value: 15, name: '童装'},
                                {value: 15, name: '鞋类'},
                                {value: 10, name: '配饰'}
                            ]
                        }
                    ]
                };
                categoryPieChart.setOption(categoryPieOption);

                // 窗口大小变化时，重新调整图表大小
                window.addEventListener('resize', function() {
                    salesTrendChart.resize();
                    categoryPieChart.resize();
                });

                // 手动触发一次 resize 以确保图表正确渲染
                window.dispatchEvent(new Event('resize'));

                console.log('图表初始化完成');
            } catch (e) {
                console.error('图表初始化失败:', e);
            }
        }
    </script>
</div>
</body>
</html>
