{layout name="layout1" /}
<style>
    .dashboard-container {
        padding: 15px;
    }
    .kpi-card {
        background: #fff;
        padding: 20px;
        border-radius: 4px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .kpi-title {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
    }
    .kpi-value {
        font-size: 28px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
    }
    .kpi-compare {
        font-size: 12px;
        color: #999;
    }
    .chart-card {
        background: #fff;
        padding: 20px;
        border-radius: 4px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .chart-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #333;
    }
    .chart-container {
        height: 300px;
    }
    .chart-container-large {
        height: 400px;
    }
    .progress-item {
        margin-bottom: 15px;
    }
    .progress-label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        font-size: 14px;
    }
    .progress-bar-container {
        height: 20px;
        background: #f0f0f0;
        border-radius: 10px;
        overflow: hidden;
    }
    .progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #4A70F4 0%, #6DD047 100%);
        transition: width 0.3s;
    }
    .table-card {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        overflow: hidden;
    }
    .date-filter {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    /* 优化表格样式 */
    .table-card .layui-table {
        margin-top: 0;
        border: none;
    }
    .table-card .layui-table thead tr {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .table-card .layui-table thead th {
        color: #fff;
        font-weight: 600;
        text-align: center;
        padding: 15px 10px;
        border: none;
        font-size: 14px;
    }
    .table-card .layui-table tbody tr {
        transition: all 0.3s ease;
        border-bottom: 1px solid #f0f0f0;
    }
    .table-card .layui-table tbody tr:hover {
        background-color: #f8f9ff;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .table-card .layui-table tbody td {
        text-align: center;
        padding: 12px 10px;
        border: none;
        color: #333;
        font-size: 13px;
    }
    .table-card .layui-table tbody td:first-child {
        font-weight: 600;
        color: #4A70F4;
        background-color: #f8f9ff;
    }
    .table-card .layui-table tbody td.empty-data {
        color: #999;
        font-style: italic;
    }
    .table-card .chart-title {
        display: flex;
        align-items: center;
        padding-bottom: 15px;
        border-bottom: 2px solid #f0f0f0;
        margin-bottom: 20px;
    }
    .table-card .chart-title::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 18px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        margin-right: 10px;
        border-radius: 2px;
    }
</style>
<div class="layui-fluid dashboard-container">
    <!-- 顶部KPI指标 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3">
            <div class="kpi-card">
                <div class="kpi-title">月销售总额</div>
                <div class="kpi-value" id="monthly-sales">--</div>
                <div class="kpi-compare">同比: <span id="sales-compare">--</span></div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="kpi-card">
                <div class="kpi-title">月订单量</div>
                <div class="kpi-value" id="monthly-orders">--</div>
                <div class="kpi-compare">同比: <span id="orders-compare">--</span></div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="kpi-card">
                <div class="kpi-title">月客户数</div>
                <div class="kpi-value" id="monthly-customers">--</div>
                <div class="kpi-compare">同比: <span id="customers-compare">--</span></div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="kpi-card">
                <div class="kpi-title">日期筛选</div>
                <div class="date-filter">
                    <input type="text" class="layui-input" id="date-filter" placeholder="年月日(可筛选)">
                </div>
            </div>
        </div>
    </div>

    <!-- 第一行图表 -->
    <div class="layui-row layui-col-space15">
        <!-- 月客户分析 -->
        <div class="layui-col-md4">
            <div class="chart-card">
                <div class="chart-title">月客户分析</div>
                <div class="chart-container" id="customer-analysis-chart"></div>
            </div>
        </div>
        <!-- 月销售情况 -->
        <div class="layui-col-md4">
            <div class="chart-card">
                <div class="chart-title">月销售情况</div>
                <div class="chart-container" id="sales-situation-chart"></div>
            </div>
        </div>
        <!-- 当月客户渠道分析 -->
        <div class="layui-col-md4">
            <div class="chart-card">
                <div class="chart-title">当月客户渠道分析</div>
                <div class="chart-container" id="channel-analysis-chart"></div>
            </div>
        </div>
    </div>

    <!-- 第二行：目标完成率 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="chart-card">
                <div class="chart-title">当月目标完成率</div>
                <div style="margin-bottom: 20px;">
                    <div style="font-size: 14px; color: #666; margin-bottom: 10px;">
                        本月销售目标:
                        <span style="color: #4A70F4; font-weight: bold;" id="monthly-target-text">--</span>
                    </div>
                    <div class="progress-item">
                        <div class="progress-label">
                            <span>总体完成率</span>
                            <span style="color: #4A70F4; font-weight: bold;" id="overall-completion-text">--</span>
                        </div>
                        <div class="progress-bar-container">
                            <div class="progress-bar" id="overall-completion-bar" style="width: 0%;"></div>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 30px;">
                    <div class="chart-title" style="font-size: 14px; margin-bottom: 15px;">客服目标完成率(N个客服的目标陈列)</div>
                    <div id="staff-progress-list">
                        <!-- 客服进度条列表（JS 根据数据库数据渲染） -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 第三行：趋势图和区域图 -->
    <div class="layui-row layui-col-space15">
        <!-- 每日销售趋势 -->
        <div class="layui-col-md6">
            <div class="chart-card">
                <div class="chart-title">每日销售趋势</div>
                <div id="trend-compare-text" style="text-align: right; margin-bottom: 10px; color: #f56c6c; font-size: 14px;">
                    --
                </div>
                <div class="chart-container-large" id="daily-sales-trend-chart"></div>
            </div>
        </div>
        <!-- 区域月销售额 -->
        <div class="layui-col-md6">
            <div class="chart-card">
                <div class="chart-title">区域月销售额</div>
                <div class="chart-container-large" id="regional-sales-chart"></div>
            </div>
        </div>
    </div>

    <!-- 第四行：数据表格 -->
    <div class="layui-row layui-col-space15">
        <!-- 渠道月销售详情 -->
        <div class="layui-col-md12">
            <div class="table-card">
                <div class="chart-title">渠道月销售详情</div>
                <table class="layui-table" lay-size="sm">
                    <thead>
                        <tr>
                            <th>渠道</th>
                            <th>美团</th>
                            <th>公众号</th>
                            <th>抖音</th>
                            <th>员工</th>
                            <th>异业</th>
                            <th>渠道</th>
                        </tr>
                    </thead>
                    <tbody id="channel-month-table-body">
                        <!-- JS 动态渲染渠道月销售详情 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 第五行：区域月销售详情 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="table-card">
                <div class="chart-title">区域月销售详情</div>
                <table class="layui-table" lay-size="sm">
                    <thead>
                        <tr>
                            <th>服务类型</th>
                            <th>南明区</th>
                            <th>云岩区</th>
                            <th>白云区</th>
                            <th>乌当区</th>
                            <th>花溪区</th>
                            <th>龙里</th>
                        </tr>
                    </thead>
                    <tbody id="region-month-table-body">
                        <!-- JS 动态渲染区域月销售详情 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
layui.config({
    version:"{$front_version}",
    base: '/static/plug/layui-admin/dist/layuiadmin/'
}).extend({
    index: 'lib/index'
}).use(['index', 'laydate'], function(){
    var $ = layui.$
        ,laydate = layui.laydate;

    // 统计数据（从后端传递）
    var statisticsData = {
        monthlySales: parseFloat('{$monthlySales|default=0}') || 0,
        monthlyOrders: parseInt('{$monthlyOrders|default=0}') || 0,
        monthlyCustomers: parseInt('{$monthlyCustomers|default=0}') || 0,
        salesCompare: parseFloat('{$salesCompare|default=0}') || 0,
        ordersCompare: parseFloat('{$ordersCompare|default=0}') || 0,
        customersCompare: parseFloat('{$customersCompare|default=0}') || 0,
        oldCustomers: parseInt('{$oldCustomers|default=0}') || 0,
        newCustomers: parseInt('{$newCustomers|default=0}') || 0
    };

    // 仪表盘其它统计数据（目标、客服进度、渠道、趋势、区域等）
    // 这里直接输出后端已经 json_encode 好的字符串，避免模板语法冲突
    var dashboardData = {$dashboardData|raw} || {};

    // 渲染统计数据
    renderStatistics();

    // 日期选择器
    laydate.render({
        elem: '#date-filter',
        type: 'date',
        format: 'yyyy-MM-dd'
    });

    // 初始化所有图表（使用数据库数据渲染）
    initCharts();

    // 渲染目标完成率和客服进度条
    renderTargetsAndStaff();
    // 渲染渠道与区域明细表格
    renderChannelAndRegionTables();
    
    // 渲染统计数据
    function renderStatistics() {
        // 格式化金额（保留两位小数，添加千分位）
        function formatMoney(amount) {
            if (!amount) return '0.00';
            return parseFloat(amount).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
        
        // 格式化同比显示
        function formatCompare(compare) {
            if (compare > 0) {
                return '<span style="color: #52c41a;">↑ ' + Math.abs(compare).toFixed(2) + '%</span>';
            } else if (compare < 0) {
                return '<span style="color: #ff4d4f;">↓ ' + Math.abs(compare).toFixed(2) + '%</span>';
            } else {
                return '<span style="color: #999;">持平</span>';
            }
        }
        
        // 渲染月销售总额
        $('#monthly-sales').text('¥' + formatMoney(statisticsData.monthlySales));
        $('#sales-compare').html(formatCompare(statisticsData.salesCompare));
        
        // 渲染月订单量
        $('#monthly-orders').text(statisticsData.monthlyOrders);
        $('#orders-compare').html(formatCompare(statisticsData.ordersCompare));
        
        // 渲染月客户数
        $('#monthly-customers').text(statisticsData.monthlyCustomers);
        $('#customers-compare').html(formatCompare(statisticsData.customersCompare));
    }

    // 渲染销售目标、总体完成率和客服进度条
    function renderTargetsAndStaff() {
        if (!dashboardData) {
            return;
        }

        // 销售目标与总体完成率
        var target = dashboardData.monthlyTarget || 0;
        var completion = dashboardData.overallCompletion || 0;

        $('#monthly-target-text').text(target > 0 ? (target / 10000).toFixed(2) + ' 万' : '--');
        $('#overall-completion-text').text(completion.toFixed ? completion.toFixed(2) + '%' : (completion + '%'));
        $('#overall-completion-bar').css('width', (completion > 100 ? 100 : completion) + '%');

        // 客服进度条
        var list = $('#staff-progress-list');
        list.empty();
        if (dashboardData.staffProgress && dashboardData.staffProgress.length) {
            dashboardData.staffProgress.forEach(function (item) {
                var percentText = (item.percent || 0).toFixed(2) + '%';
                var yoy = item.yoy || 0;
                var yoyHtml;
                if (yoy > 0) {
                    yoyHtml = '同比: <span style="color:#52c41a;">↑ ' + yoy.toFixed(2) + '%</span>';
                } else if (yoy < 0) {
                    yoyHtml = '同比: <span style="color:#ff4d4f;">↓ ' + Math.abs(yoy).toFixed(2) + '%</span>';
                } else {
                    yoyHtml = '同比: <span style="color:#999;">持平</span>';
                }
                var html = ''
                    + '<div class="progress-item">'
                    + '  <div class="progress-label">'
                    + '    <span>' + (item.name || '未分配') + '</span>'
                    + '    <span>销售额: ' + (item.sales || 0) + ' | 百分比: ' + percentText + ' | ' + yoyHtml + '</span>'
                    + '  </div>'
                    + '  <div class="progress-bar-container">'
                    + '    <div class="progress-bar" style="width:' + (item.percent || 0) + '%;"></div>'
                    + '  </div>'
                    + '</div>';
                list.append(html);
            });
        } else {
            list.append('<div style="color:#999;font-size:12px;">暂无客服统计数据</div>');
        }
    }

    // 渠道&区域月销售明细表格渲染（只处理“总额”这一行）
    function renderChannelAndRegionTables() {
        if (!dashboardData) {
            return;
        }

        // ===== 渠道月销售详情（总额 / 年卡 / 次卡 / 单次 / 其它） =====
        var channelBody = $('#channel-month-table-body');
        channelBody.empty();
        var channelHeaders = ['美团','公众号','抖音','员工','异业','渠道'];
        var rowLabels = [
            {key: 'total', text: '总额'},
            {key: 'year',  text: '年卡'},
            {key: 'times', text: '次卡'},
            {key: 'single',text: '单次服务'},
            {key: 'other', text: '其他服务'}
        ];
        var keyToCol = ['meituan','gzh','douyin','staff','yeye','other'];
        rowLabels.forEach(function (row) {
            var data = (dashboardData.channelDetail && dashboardData.channelDetail[row.key]) || {};
            var tr = '<tr><td>' + row.text + '</td>';
            keyToCol.forEach(function (colKey) {
                var v = parseFloat(data[colKey] || 0).toFixed(2);
                tr += '<td>' + v + '</td>';
            });
            tr += '</tr>';
            channelBody.append(tr);
        });

        // ===== 区域月销售详情（总额 / 年卡 / 次卡 / 单次 / 其它） =====
        var regionBody = $('#region-month-table-body');
        regionBody.empty();
        if (dashboardData.regions && dashboardData.regions.length) {
            var regionNames = dashboardData.regions;
            rowLabels.forEach(function (row) {
                var rowData = (dashboardData.regionDetail && dashboardData.regionDetail[row.key]) || {};
                var tr2 = '<tr><td>' + row.text + '</td>';
                regionNames.forEach(function (rName) {
                    var val = parseFloat(rowData[rName] || 0).toFixed(2);
                    tr2 += '<td>' + val + '</td>';
                });
                tr2 += '</tr>';
                regionBody.append(tr2);
            });
        }
    }

    function initCharts() {
        // 月客户分析 - 饼图
        var customerChart = echarts.init(document.getElementById('customer-analysis-chart'));
        customerChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [{
                name: '客户分析',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: '{b}: {d}%'
                },
                data: [
                    {value: statisticsData.oldCustomers, name: '老客', itemStyle: {color: '#FFB6C1'}},
                    {value: statisticsData.newCustomers, name: '新客', itemStyle: {color: '#FF69B4'}}
                ]
            }]
        });

        // 月销售情况 - 饼图（使用数据库汇总结果）
        var salesChart = echarts.init(document.getElementById('sales-situation-chart'));
        salesChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                bottom: '5%',
                left: 'center'
            },
            series: [{
                name: '销售情况',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: '{b}: {c}'
                },
                data: (dashboardData.salesSituation && dashboardData.salesSituation.length)
                    ? dashboardData.salesSituation
                    : [
                        {value: 0, name: '单次服务', itemStyle: {color: '#F6A23F'}},
                        {value: 0, name: '年卡销量', itemStyle: {color: '#4A70F4'}},
                        {value: 0, name: '次卡销量', itemStyle: {color: '#6DD047'}},
                        {value: 0, name: '其它服务', itemStyle: {color: '#87CEEB'}}
                    ]
            }]
        });

        // 当月客户渠道分析 - 环形图（使用数据库统计的渠道订单数）
        var channelChart = echarts.init(document.getElementById('channel-analysis-chart'));
        channelChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [{
                name: '客户渠道',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: '{b}: {d}%'
                },
                data: (dashboardData.channelPie && dashboardData.channelPie.length)
                    ? dashboardData.channelPie
                    : []
            }]
        });

        // 每日销售趋势 - 折线图（使用数据库按天汇总的数据）
        var trendChart = echarts.init(document.getElementById('daily-sales-trend-chart'));
        trendChart.setOption({
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dashboardData.trendDates || []
            },
            yAxis: {
                type: 'value',
                name: '销售额',
                axisLabel: {
                    formatter: '{value}K'
                }
            },
            series: [{
                name: '销售额',
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(74, 112, 244, 0.3)'
                        }, {
                            offset: 1, color: 'rgba(74, 112, 244, 0.1)'
                        }]
                    }
                },
                itemStyle: {
                    color: '#4A70F4'
                },
                data: dashboardData.trendValues || []
            }]
        });
        // 渲染“上月同比”文字
        var trendCompare = dashboardData.trendCompare || 0;
        var trendTextDom = $('#trend-compare-text');
        if (trendCompare > 0) {
            trendTextDom.css('color', '#52c41a').html('▲ ' + trendCompare.toFixed(2) + '% 上月同比');
        } else if (trendCompare < 0) {
            trendTextDom.css('color', '#f56c6c').html('▼ ' + Math.abs(trendCompare).toFixed(2) + '% 上月同比');
        } else {
            trendTextDom.css('color', '#999').html('持平 上月同比');
        }

        // 区域月销售额 - 柱状图（根据地址简单按区域统计）
        var regionalChart = echarts.init(document.getElementById('regional-sales-chart'));
        regionalChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: dashboardData.regions || []
            },
            yAxis: {
                type: 'value',
                name: '销量'
            },
            series: [{
                name: '销量',
                type: 'bar',
                itemStyle: {
                    color: '#4A70F4'
                },
                data: dashboardData.regionTotals || []
            }]
        });

        // 响应式调整
        window.addEventListener('resize', function() {
            customerChart.resize();
            salesChart.resize();
            channelChart.resize();
            trendChart.resize();
            regionalChart.resize();
        });
    }
});
</script>