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

<style>
    .user-index .stats-row {
        margin-bottom: 12px;
    }
    .user-index .stat-card {
        background: #f8fafc;
        border: 1px solid var(--sa-border);
        border-radius: 6px;
        padding: 10px 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .user-index .stat-title {
        font-size: 12px;
        color: var(--sa-subfont);
        margin-bottom: 4px;
    }
    .user-index .stat-num {
        font-size: 18px;
        font-weight: 600;
        color: var(--sa-title);
    }
    .user-index .active-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
    }
    .user-index .active-dot.is-on {
        background: #52c41a;
    }
    .user-index .active-dot.is-off {
        background: #c0c4cc;
    }
    .user-index .asset-sub {
        font-size: 11px;
        color: var(--sa-subfont);
        margin-top: 2px;
    }
    .user-index .badge-group {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 4px;
    }
</style>

<div id="index" class="user-index panel panel-default panel-intro" v-cloak>
    <el-container class="panel-block">
        <el-header class="sa-header" style="height: auto; padding-bottom: 12px;">
            <div class="sa-title sa-flex sa-row-between">
                <div class="sa-title-left">
                    <div class="left-name">会员管理</div>
                    <sa-filter-condition v-model="state.filter" @filter-delete="onChangeFilter">
                    </sa-filter-condition>
                </div>
                <div class="sa-title-right">
                    <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData"></el-button>
                    <el-button class="sa-button-refresh" icon="Search" @click="onOpenFilter"></el-button>
                </div>
            </div>

            <!-- 数据看板概览 -->
            <el-row :gutter="12" class="stats-row">
                <el-col :xs="12" :sm="8" :md="4">
                    <div class="stat-card">
                        <div class="stat-title">全平台会员数</div>
                        <div class="stat-num">{{ state.stats.total_users || 0 }}</div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="8" :md="4">
                    <div class="stat-card">
                        <div class="stat-title">创客团队骨干</div>
                        <div class="stat-num" style="color: #409eff;">{{ state.stats.maker_count || 0 }}</div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="8" :md="4">
                    <div class="stat-card">
                        <div class="stat-title">线下酒道馆</div>
                        <div class="stat-num" style="color: #67c23a;">{{ state.stats.venue_count || 0 }}</div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="8" :md="4">
                    <div class="stat-card">
                        <div class="stat-title">区县代理总数</div>
                        <div class="stat-num" style="color: #e6a23c;">{{ state.stats.county_count || 0 }}</div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="8" :md="4">
                    <div class="stat-card">
                        <div class="stat-title">合伙股东总数</div>
                        <div class="stat-num" style="color: #f56c6c;">{{ state.stats.partner_count || 0 }}</div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="8" :md="4">
                    <div class="stat-card">
                        <div class="stat-title">30日自购活跃</div>
                        <div class="stat-num" style="color: #52c41a;">{{ state.stats.active_count || 0 }}</div>
                    </div>
                </el-col>
            </el-row>
        </el-header>

        <el-main class="sa-main">
            <el-table height="100%" class="sa-table" :data="state.data" stripe @sort-change="onChangeSort">
                <el-table-column prop="id" label="ID" min-width="80" sortable="custom"> </el-table-column>
                
                <el-table-column label="用户信息" min-width="160">
                    <template #default="scope">
                        <sa-user-profile :user="scope.row" :id="scope.row.id"></sa-user-profile>
                        <div class="asset-sub">{{ scope.row.mobile || scope.row.username || '' }}</div>
                    </template>
                </el-table-column>

                <el-table-column label="推荐人" min-width="140">
                    <template #default="scope">
                        <sa-user-profile type="agent" :user="scope.row.parent_user" :id="scope.row.parent_user_id"></sa-user-profile>
                    </template>
                </el-table-column>

                <el-table-column label="业务身份" min-width="190">
                    <template #default="scope">
                        <div style="font-weight: 500;">{{ scope.row.identity_text || '普通会员' }}</div>
                        <div class="badge-group">
                            <el-tag v-if="scope.row.level == 1" size="small" type="info">品酒师</el-tag>
                            <el-tag v-if="scope.row.level >= 2" size="small" type="primary">创客 V{{ scope.row.level - 1 }}</el-tag>
                            <el-tag v-if="scope.row.is_venue" size="small" type="success">酒道馆</el-tag>
                            <el-tag v-if="scope.row.is_county" size="small" type="warning">区县代理</el-tag>
                            <el-tag v-if="scope.row.is_partner" size="small" type="danger">合伙股东</el-tag>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="30日自购活跃" min-width="110">
                    <template #default="scope">
                        <template v-if="scope.row.is_advanced">
                            <span class="sa-flex sa-col-center">
                                <i class="active-dot" :class="scope.row.active_30d ? 'is-on' : 'is-off'"></i>
                                {{ scope.row.active_30d ? '正常领奖' : '已暂停' }}
                            </span>
                        </template>
                        <template v-else>
                            <el-tag size="small" type="info" effect="plain">免考核</el-tag>
                        </template>
                    </template>
                </el-table-column>

                <el-table-column label="收益中心资产" min-width="190">
                    <template #default="scope">
                        <div><span class="asset-sub">累计收益:</span> <b style="color: #409eff;">¥{{ scope.row.total_income || scope.row.income_total_cash || '0.00' }}</b></div>
                        <div class="asset-sub">钱包余额: ¥{{ scope.row.money || '0.00' }}</div>
                        <div class="asset-sub">未转佣金: ¥{{ scope.row.commission || '0.00' }}</div>
                    </template>
                </el-table-column>

                <el-table-column label="dmepa与补贴券" min-width="170">
                    <template #default="scope">
                        <div><span class="asset-sub">分红dmepa:</span> {{ scope.row.madow || 0 }} 枚</div>
                        <div class="asset-sub">dmepa估值: ¥{{ scope.row.madow_value || '0.00' }}</div>
                        <div class="asset-sub">可用券: {{ scope.row.voucher_available || '0.00' }} 个</div>
                    </template>
                </el-table-column>

                <el-table-column sortable="custom" prop="createtime" label="注册时间" min-width="165"></el-table-column>

                <el-table-column fixed="right" label="操作" min-width="180">
                    <template #default="scope">
                        {if $auth->check('shopro/user/user/detail')}
                        <el-button type="primary" link @click="onDetail(scope.row.id, scope.row)">详情</el-button>
                        {/if}
                        <el-button v-if="scope.row.has_agent" type="success" link @click="onOpenAgentDetail(scope.row.id)">
                            收益档案
                        </el-button>
                        {if $auth->check('shopro/user/user/recharge')}
                        <el-button type="warning" link @click="onRecharge('money', scope.row.id)">
                            充值
                        </el-button>
                        {/if}
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer class="sa-footer sa-flex sa-row-right">
            <sa-pagination v-model="pagination" @pagination-change="getData"></sa-pagination>
        </el-footer>
    </el-container>
    <sa-filter v-model="state.filter" @filter-change="onChangeFilter"></sa-filter>
</div>