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

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

<style>
    .dashboard-index .dashboard-index-main {
        --el-main-padding: 0;
    }

    .dashboard-index .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .dashboard-index .el-scrollbar__bar.is-horizontal {
        display: none;
    }

    .dashboard-index .card {
        line-height: 1;
        background: var(--sa-background-assist);
        border-radius: 8px;
        border: 1px solid var(--sa-space);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        padding: 14px 16px;
        font-size: 12px;
        color: var(--sa-font);
        margin-bottom: 16px;
        transition: all .2s;
    }

    .dashboard-index .card:hover {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }

    /* 顶部财富卡片 */
    .dashboard-index .wealth-kpi-card {
        padding: 16px 18px;
    }

    .dashboard-index .wealth-kpi-card:hover {
        transform: translateY(-2px);
    }

    .dashboard-index .kpi-title {
        font-size: 13px;
        font-weight: 500;
        color: var(--sa-subtitle);
    }

    .dashboard-index .kpi-main-num {
        font-size: 26px;
        font-weight: 700;
        margin: 12px 0 8px 0;
        line-height: 1.1;
    }

    .dashboard-index .kpi-main-num .currency {
        font-size: 16px;
        margin-right: 2px;
        font-weight: 500;
    }

    .dashboard-index .kpi-main-num .unit {
        font-size: 12px;
        margin-left: 2px;
        font-weight: 400;
        color: var(--sa-subfont);
    }

    .dashboard-index .kpi-sub-row {
        font-size: 12px;
        color: var(--sa-subfont);
        margin-bottom: 10px;
    }

    .dashboard-index .kpi-footer {
        padding-top: 10px;
        border-top: 1px dashed var(--sa-space);
        font-size: 12px;
        color: var(--sa-subfont);
    }

    .dashboard-index .text-primary { color: #806af6 !important; }
    .dashboard-index .text-warning { color: #fa8c16 !important; }
    .dashboard-index .text-success { color: #52c41a !important; }
    .dashboard-index .text-cyan { color: #13c2c2 !important; }
    .dashboard-index .text-purple { color: #722ed1 !important; }
    .dashboard-index .text-danger { color: #f5222d !important; }
    .dashboard-index .text-dark { color: var(--sa-subtitle) !important; font-weight: 600; }
    .dashboard-index .font-bold { font-weight: 600; }
    .dashboard-index .cursor-pointer { cursor: pointer; }

    /* 合伙人网络卡片 */
    .dashboard-index .network-card {
        padding: 14px 16px;
        min-height: 98px;
    }

    .dashboard-index .network-badge {
        width: 26px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        border-radius: 6px;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
    }

    .dashboard-index .bg-primary { background: #806af6; }
    .dashboard-index .bg-cyan { background: #13c2c2; }
    .dashboard-index .bg-orange { background: #fa8c16; }

    .dashboard-index #userTotal,
    .dashboard-index #agentTotal,
    .dashboard-index #shareTotal {
        width: 100%;
        height: 60px;
    }

    /* 走势图面板 */
    .dashboard-index .bar-card {
        min-height: 388px;
    }

    .dashboard-index #chartContent {
        width: 100%;
        height: 310px;
    }

    .dashboard-index .tab-item {
        height: 32px;
        line-height: 32px;
        margin-right: 20px;
        font-size: 14px;
        color: var(--sa-subfont);
        cursor: pointer;
    }

    .dashboard-index .tab-item:last-of-type {
        margin-right: 0;
    }

    .dashboard-index .tab-item.is-active {
        color: var(--sa-subtitle);
        font-weight: bold;
        border-bottom: 2px solid #806af6;
    }

    /* 分成透视 */
    .dashboard-index .split-panel {
        min-height: 388px;
    }

    .dashboard-index #splitPieContent {
        width: 100%;
        height: 180px;
    }

    .dashboard-index .split-stat-item {
        padding: 6px 0;
        font-size: 12px;
        border-bottom: 1px solid #f6f8fa;
    }

    .dashboard-index .split-stat-item:last-of-type {
        border-bottom: none;
    }

    .dashboard-index .split-color-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 6px;
    }

    /* 排行榜 */
    .dashboard-index .partner-ranking-card,
    .dashboard-index .goods-card,
    .dashboard-index .hot-search-card {
        min-height: 340px;
    }

    .dashboard-index .card-header-title {
        line-height: 16px;
        font-size: 14px;
        font-weight: 600;
        color: var(--sa-subtitle);
        margin-bottom: 14px;
    }

    .dashboard-index .rank-badge {
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
        font-size: 11px;
        font-weight: bold;
        background: #f0f2f5;
        color: #909399;
    }

    .dashboard-index .rank-badge.top-1 { background: #fadb14; color: #fff; }
    .dashboard-index .rank-badge.top-2 { background: #bfbfbf; color: #fff; }
    .dashboard-index .rank-badge.top-3 { background: #d48806; color: #fff; }

    .dashboard-index .todo-stat-card {
        padding: 12px 14px;
        border-radius: 6px;
        background: #fafbfc;
        border: 1px solid #ebedf0;
        cursor: pointer;
        transition: all .2s;
    }

    .dashboard-index .todo-stat-card:hover {
        background: #f0f5ff;
        border-color: #adc6ff;
    }

    .dashboard-index .daily-report-box {
        padding: 12px 14px;
        background: #fbfbfe;
        border: 1px solid #e8eafc;
        border-radius: 6px;
        font-size: 12px;
    }

    .dashboard-index #rankingContent {
        width: 192px;
        height: 192px;
    }

    .dashboard-index .top {
        width: 18px;
        height: 20px;
    }
</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%">
                {if $auth->check('shopro/dashboard/total')}
                <!-- ================= 1. 全局财富大盘与资金安全核心 KPI ================= -->
                <el-row :gutter="16">
                    <!-- 商城实收 GMV -->
                    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                        <div class="wealth-kpi-card card">
                            <div class="sa-flex sa-row-between">
                                <span class="kpi-title">商城实收流水 (GMV)</span>
                                <el-tag size="small" type="primary" effect="plain">实付总额</el-tag>
                            </div>
                            <div class="kpi-main-num text-primary">
                                <span class="currency">¥</span>{{ state.wealth.total_gmv }}
                            </div>
                            <div class="kpi-sub-row sa-flex sa-row-between">
                                <span>今日实收：<strong class="text-dark">¥{{ state.wealth.today_gmv }}</strong></span>
                                <span>客单均价：<strong class="text-dark">¥{{ state.wealth.avg_order_amount }}</strong></span>
                            </div>
                            <div class="kpi-footer sa-flex sa-row-between">
                                <span>累计支付单量</span>
                                <span class="font-bold">{{ state.wealth.paid_order_count }} 单</span>
                            </div>
                        </div>
                    </el-col>

                    <!-- 现金分成支出与综合拨比 -->
                    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                        <div class="wealth-kpi-card card">
                            <div class="sa-flex sa-row-between">
                                <span class="kpi-title">现金分成支出与拨比</span>
                                <el-tooltip content="现金分成占实付GMV的百分比，评估平台精算模型健康度" placement="top">
                                    <el-tag size="small" :type="parseFloat(state.wealth.payout_rate) <= 35 ? 'success' : 'warning'" effect="plain">
                                        拨比 {{ state.wealth.payout_rate }}%
                                    </el-tag>
                                </el-tooltip>
                            </div>
                            <div class="kpi-main-num text-warning">
                                <span class="currency">¥</span>{{ state.wealth.total_payout }}
                            </div>
                            <div class="kpi-sub-row sa-flex sa-row-between">
                                <span>平台净留存：<strong class="text-success">¥{{ state.wealth.net_retention }}</strong></span>
                                <span class="cursor-pointer text-primary" @click="onOpenReward('')">明细 →</span>
                            </div>
                            <div class="kpi-footer sa-flex sa-row-between">
                                <span>今日分成支出</span>
                                <span class="font-bold text-warning">¥{{ state.wealth.today_payout }}</span>
                            </div>
                        </div>
                    </el-col>

                    <!-- 马豆生态资产池 -->
                    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                        <div class="wealth-kpi-card card">
                            <div class="sa-flex sa-row-between">
                                <span class="kpi-title">马豆生态资产蓄水池</span>
                                <el-tag size="small" type="success" effect="plain">单向升值</el-tag>
                            </div>
                            <div class="kpi-main-num text-purple">
                                {{ state.madow.total_madow }} <span class="unit">豆</span>
                            </div>
                            <div class="kpi-sub-row sa-flex sa-row-between">
                                <span>单价：<strong>{{ state.madow.current_rate }}</strong></span>
                                <span>万豆折合：<strong class="text-purple">¥{{ state.madow.rate_per_wan }}</strong></span>
                            </div>
                            <div class="kpi-footer sa-flex sa-row-between">
                                <span>累计订单 N：<strong>{{ state.madow.history_order_n }} 单</strong></span>
                                <span class="cursor-pointer text-primary" @click="onOpenDaily">日结池 →</span>
                            </div>
                        </div>
                    </el-col>

                    <!-- 消费兑换券杠杆池 -->
                    <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                        <div class="wealth-kpi-card card">
                            <div class="sa-flex sa-row-between">
                                <span class="kpi-title">消费兑换券杠杆池</span>
                                <el-tag size="small" type="info" effect="plain">1.5倍补贴</el-tag>
                            </div>
                            <div class="kpi-main-num text-danger">
                                <span class="currency">¥</span>{{ state.voucher.total_voucher }}
                            </div>
                            <div class="kpi-sub-row sa-flex sa-row-between">
                                <span>已释放：<strong>¥{{ state.voucher.released_voucher }}</strong></span>
                                <span>待释放存量：<strong class="text-danger">¥{{ state.voucher.pending_voucher }}</strong></span>
                            </div>
                            <div class="kpi-footer sa-flex sa-row-between">
                                <span>已抵扣消费：<strong>¥{{ state.voucher.used_voucher }}</strong></span>
                                <span class="cursor-pointer text-primary" @click="onOpenVoucher">计划 →</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>

                <!-- ================= 2. 合伙股东网络与活力矩阵 ================= -->
                <el-row :gutter="16">
                    <!-- 品酒师基础会员 -->
                    <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                        <div class="network-card card">
                            <div class="sa-flex sa-row-between mb-2">
                                <div class="sa-flex">
                                    <span class="network-badge bg-primary mr-2">品</span>
                                    <span class="font-bold text-dark" style="font-size: 14px;">品酒师基础会员</span>
                                </div>
                                <span class="text-primary font-bold cursor-pointer" style="font-size: 18px;" @click="onOpenAgent(1)">
                                    {{ state.partner.taster_count }} <span style="font-size: 12px; color: var(--sa-subfont);">人</span>
                                </span>
                            </div>
                            <div class="sa-flex sa-row-between text-muted" style="font-size: 12px;">
                                <span>30日自购活跃率：<strong class="text-success">{{ state.partner.active_rate }}%</strong></span>
                                <span>正常：<strong class="text-success">{{ state.partner.active_count }}</strong> 人 / 暂停：<strong class="text-muted">{{ state.partner.inactive_count }}</strong> 人</span>
                            </div>
                            <el-progress :percentage="state.partner.active_rate" :stroke-width="5" :show-text="false" color="#52c41a" style="margin-top: 8px;"></el-progress>
                        </div>
                    </el-col>

                    <!-- 创客合伙人梯队 -->
                    <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                        <div class="network-card card">
                            <div class="sa-flex sa-row-between mb-2">
                                <div class="sa-flex">
                                    <span class="network-badge bg-cyan mr-2">创</span>
                                    <span class="font-bold text-dark" style="font-size: 14px;">创客合伙股东 (V1~V6)</span>
                                </div>
                                <span class="text-cyan font-bold cursor-pointer" style="font-size: 18px;" @click="onOpenAgent('')">
                                    {{ state.partner.maker_count }} <span style="font-size: 12px; color: var(--sa-subfont);">人</span>
                                </span>
                            </div>
                            <div class="sa-flex sa-flex-wrap" style="margin-top: 6px;">
                                <el-tag size="small" class="mr-1 mb-1" effect="light" type="info" v-for="(cnt, lv) in state.partner.maker_levels" :key="lv">
                                    {{ lv }}: {{ cnt }}人
                                </el-tag>
                            </div>
                        </div>
                    </el-col>

                    <!-- 实体与区域渠道 -->
                    <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                        <div class="network-card card">
                            <div class="sa-flex sa-row-between mb-2">
                                <div class="sa-flex">
                                    <span class="network-badge bg-orange mr-2">馆</span>
                                    <span class="font-bold text-dark" style="font-size: 14px;">实体与区域渠道</span>
                                </div>
                                <div class="sa-flex">
                                    <span class="text-orange font-bold mr-2" style="font-size: 15px;">酒道馆 {{ state.partner.venue_count }} 家</span>
                                    <span class="text-purple font-bold" style="font-size: 15px;">区县 {{ state.partner.county_count }} 个</span>
                                </div>
                            </div>
                            <div class="sa-flex sa-row-between text-muted" style="font-size: 12px; margin-top: 10px;">
                                <span>享团队拆分 (50~100元) + 平台日结均分池</span>
                                <span class="cursor-pointer text-primary" @click="onOpenAgent('')">渠道档案 →</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                {/if}

                {if $auth->check('shopro/dashboard/chart')}
                <!-- ================= 3. 核心动态走势与分成结构透视 ================= -->
                <el-row :gutter="16">
                    <!-- 左侧：时段动态分析图 -->
                    <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
                        <div class="bar-card card">
                            <div class="sa-flex sa-row-between sa-flex-wrap mb-2">
                                <div class="sa-flex">
                                    <div class="tab-item" :class="chart.tabActive == key ? 'is-active' : ''"
                                        v-for="(value, key) in chart.tabsData" :key="key"
                                        @click="onChangeTabActive(key)">
                                        {{ value }}
                                    </div>
                                </div>
                                <div class="date-time">
                                    <el-date-picker v-model="chart.dateTime" type="datetimerange"
                                        value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
                                        :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                        :shortcuts="chart.shortcuts" @change="onChangeDateTime" :editable="false">
                                    </el-date-picker>
                                </div>
                            </div>
                            <div id="chartContent"></div>
                        </div>
                    </el-col>

                    <!-- 右侧：收益分成多维透视 -->
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <div class="split-panel card">
                            <div class="sa-flex sa-row-between mb-2">
                                <span class="card-header-title" style="margin-bottom: 0;">收益分成结构透视</span>
                                <span class="cursor-pointer text-primary" style="font-size: 12px;" @click="onOpenReward('')">全部流水 →</span>
                            </div>

                            <div class="sa-flex sa-row-center">
                                <div id="splitPieContent"></div>
                            </div>

                            <div class="split-stat-list mt-2">
                                <div class="split-stat-item sa-flex sa-row-between" v-for="item in chart.data.splitStructure" :key="item.key">
                                    <div class="sa-flex">
                                        <span class="split-color-dot" :style="{ background: item.color }"></span>
                                        <span>{{ item.name }}</span>
                                    </div>
                                    <div class="sa-flex">
                                        <span class="font-bold mr-2">¥{{ item.amount }}</span>
                                        <el-tag size="small" type="info" effect="plain">{{ item.ratio }}%</el-tag>
                                    </div>
                                </div>
                            </div>

                            <div class="sa-flex sa-row-between mt-3 pt-2" style="border-top: 1px dashed var(--sa-space); font-size: 12px; color: var(--sa-subfont);">
                                <span>区间马豆分红：<strong class="text-purple">{{ chart.data.periodMadow }} 豆</strong></span>
                                <el-button type="primary" link size="small" @click="onOpenDaily">日结池详情</el-button>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                {/if}

                {if $auth->check('shopro/dashboard/ranking')}
                <!-- ================= 4. 合伙人收益排行 & 电商运营与风控监控 ================= -->
                <el-row :gutter="16">
                    <!-- 左侧：合伙股东收益排行 TOP 5 -->
                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <div class="partner-ranking-card card">
                            <div class="sa-flex sa-row-between mb-2">
                                <div class="card-header-title" style="margin-bottom: 0;">
                                    <span>合伙股东收益排行榜 (TOP 5)</span>
                                </div>
                                <span class="cursor-pointer text-primary" style="font-size: 12px;" @click="onOpenReward('')">查看全部 →</span>
                            </div>

                            <el-table class="sa-table" :data="ranking.partner" stripe>
                                <el-table-column label="排名" width="55" align="center">
                                    <template #default="scope">
                                        <span class="rank-badge" :class="`top-${scope.$index + 1}`">
                                            {{ scope.$index + 1 }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="股东会员" min-width="140">
                                    <template #default="scope">
                                        <div class="sa-flex">
                                            <sa-image :url="scope.row.avatar" size="24" style="border-radius: 50%;"></sa-image>
                                            <div class="ml-2">
                                                <div class="sa-table-line-1 font-bold">{{ scope.row.nickname }}</div>
                                                <div style="font-size: 11px; color: var(--sa-subfont);">{{ scope.row.mobile || '' }}</div>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="身份" min-width="150">
                                    <template #default="scope">
                                        <el-tag size="small" :type="scope.row.is_partner ? 'danger' : 'info'" effect="light">
                                            {{ scope.row.identity_text }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="累计收益" width="110" align="right">
                                    <template #default="scope">
                                        <span class="text-warning font-bold">¥{{ scope.row.total_income }}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>

                    <!-- 右侧：电商运营风控 & 日结监控 -->
                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <div class="card" style="min-height: 340px;">
                            <div class="card-header-title">电商运营与日结对账监控</div>

                            <!-- 待处理订单指标卡 -->
                            <el-row :gutter="12" class="mb-3">
                                <el-col :span="8">
                                    <div class="todo-stat-card" @click="onOpen('nosend')">
                                        <div style="color: var(--sa-subfont); margin-bottom: 4px;">待发货订单</div>
                                        <div class="sa-flex sa-row-between">
                                            <span style="font-size: 20px; font-weight: 700;" :class="statistics.noSend.num > 0 ? 'text-warning' : 'text-dark'">
                                                {{ statistics.noSend.num }}
                                            </span>
                                            <el-icon><arrow-right /></el-icon>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="todo-stat-card" @click="onOpen('aftersale')">
                                        <div style="color: var(--sa-subfont); margin-bottom: 4px;">售后维权</div>
                                        <div class="sa-flex sa-row-between">
                                            <span style="font-size: 20px; font-weight: 700;" :class="statistics.aftersale.num > 0 ? 'text-danger' : 'text-dark'">
                                                {{ statistics.aftersale.num }}
                                            </span>
                                            <el-icon><arrow-right /></el-icon>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="todo-stat-card" @click="onOpen('refund')">
                                        <div style="color: var(--sa-subfont); margin-bottom: 4px;">退款订单</div>
                                        <div class="sa-flex sa-row-between">
                                            <span style="font-size: 20px; font-weight: 700;">
                                                {{ statistics.refund.num }}
                                            </span>
                                            <el-icon><arrow-right /></el-icon>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>

                            <!-- 最新日结对账卡 -->
                            <div class="daily-report-box" v-if="ranking.recentReport">
                                <div class="sa-flex sa-row-between mb-2">
                                    <div class="sa-flex">
                                        <el-icon class="mr-1 text-primary"><Calendar /></el-icon>
                                        <strong class="text-dark">最近一次日结概览 ({{ ranking.recentReport.settle_date }})</strong>
                                    </div>
                                    <el-tag size="small" :type="ranking.recentReport.status == 1 ? 'success' : 'danger'" effect="plain">
                                        {{ ranking.recentReport.status_text }}
                                    </el-tag>
                                </div>
                                <el-row :gutter="10" style="color: var(--sa-subfont); line-height: 1.8;">
                                    <el-col :span="12">
                                        <div>合格单量：<strong class="text-dark">{{ ranking.recentReport.order_count }} 单</strong></div>
                                        <div>当日 GMV：<strong class="text-dark">¥{{ ranking.recentReport.gmv }}</strong></div>
                                        <div>全网累计 N：<strong>{{ ranking.recentReport.order_count_n }}</strong></div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div>马豆均分：<strong class="text-purple">{{ ranking.recentReport.madow_pool }} 豆</strong> ({{ ranking.recentReport.share_user_count }}人)</div>
                                        <div>酒道馆奖池：<strong class="text-warning">¥{{ ranking.recentReport.venue_pool }}</strong> ({{ ranking.recentReport.venue_user_count }}人)</div>
                                        <div>区县奖池：<strong class="text-warning">¥{{ ranking.recentReport.county_pool }}</strong> ({{ ranking.recentReport.county_user_count }}人)</div>
                                    </el-col>
                                </el-row>
                                <div class="sa-flex sa-row-right mt-2">
                                    <el-button type="primary" link size="small" @click="onOpenDaily">查看日结对账全记录 →</el-button>
                                </div>
                            </div>

                            <div v-else class="text-muted sa-flex sa-row-center" style="padding: 24px 0;">
                                暂无日结对账数据
                            </div>
                        </div>
                    </el-col>
                </el-row>

                <!-- ================= 5. 商品热销榜与热搜榜 (保持原有生态) ================= -->
                <el-row :gutter="16">
                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <div class="goods-card card">
                            <div class="card-header-title">热销商品排行榜</div>
                            <el-table class="sa-table" :data="ranking.goods" stripe>
                                <el-table-column label="排名" width="60" align="center">
                                    <template #default="scope">
                                        <img class="top"
                                            :src="`/assets/addons/shopro/img/dashboard/top${scope.$index + 1}.png`" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="商品名称" min-width="200">
                                    <template #default="scope">
                                        <div class="sa-flex">
                                            <sa-image :url="scope.row.image" size="20"></sa-image>
                                            <div class="ml-2 sa-table-line-1">
                                                {{ scope.row.title || '-' }}
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="销量" width="90" align="right">
                                    <template #default="scope">
                                        <span>{{ scope.row.real_sales || '-' }}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <div class="hot-search-card card">
                            <div class="card-header-title">关键词热搜榜</div>
                            <el-row :gutter="16">
                                <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                                    <el-table class="sa-table" :data="ranking.hot_search" stripe>
                                        <el-table-column label="排名" width="50" align="center">
                                            <template #default="scope">
                                                <span class="rank-badge" :class="`top-${scope.$index + 1}`">
                                                    {{ scope.$index + 1 }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="搜索词" min-width="160">
                                            <template #default="scope">
                                                <div class="sa-table-line-1">{{ scope.row.keyword || '-' }}</div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="频次" width="80" align="right">
                                            <template #default="scope">
                                                <span>{{ scope.row.num }}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                                    <div class="sa-flex sa-row-center">
                                        <div id="rankingContent"></div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
                {/if}
            </el-scrollbar>
        </el-main>
    </el-container>
</div>