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

<style>
    .agent-index .status-text {
        margin-right: 12px;
    }
    .agent-index .active-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
    }
    .agent-index .active-dot.is-on {
        background: #52c41a;
    }
    .agent-index .active-dot.is-off {
        background: #c0c4cc;
    }
</style>

<div id="index" class="agent-index panel panel-default panel-intro" v-cloak>
    <el-container class="panel-block">
        <el-header class="sa-header">
            <el-tabs class="sa-tabs" v-model="state.filter.data.tabActive" @tab-change="onChangeTab">
                <el-tab-pane v-for="item in type.data.status" :key="item" :label="item.name" :name="item.type">
                </el-tab-pane>
            </el-tabs>
            <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-header>
        <el-main class="sa-main">
            <el-table v-if="state.filter.data.tabActive=='all'" height="100%" class="sa-table" :data="state.data"
                stripe>
                <el-table-column prop="user_id" label="ID" min-width="90">
                </el-table-column>
                <el-table-column label="分销商信息" min-width="150">
                    <template #default="scope">
                        <sa-user-profile :user="scope.row.user" :id="scope.row.user_id"></sa-user-profile>
                    </template>
                </el-table-column>
                <el-table-column label="等级" min-width="120">
                    <template #default="scope">
                        <template v-if="scope.row.level_info">
                            <div>{{ scope.row.level_info.name }}</div>
                            <div>(等级{{ scope.row.level_info.level }})</div>
                        </template>
                        <template v-else>{{ scope.row.level }}</template>
                    </template>
                </el-table-column>
                <el-table-column label="身份" min-width="180">
                    <template #default="scope">
                        <div>{{ scope.row.identity_text || '-' }}</div>
                        <div>
                            <el-tag v-if="scope.row.is_venue" size="small" type="success">{{ scope.row.role_names?.venue || '酒道馆' }}</el-tag>
                            <el-tag v-if="scope.row.is_county" size="small" type="warning">{{ scope.row.role_names?.county || '区县代理' }}</el-tag>
                            <el-tag v-if="scope.row.is_partner" size="small" type="danger">{{ scope.row.role_names?.partner || '合伙人' }}</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="30日活跃" min-width="100">
                    <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>
                            <span class="sa-color--info" style="font-size:12px">免考核</span>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="dmepa (枚)" min-width="130">
                    <template #default="scope">
                        <div>{{ scope.row.madow || 0 }} 枚</div>
                        <div class="sa-color--info" style="font-size:12px">约合 ¥{{ scope.row.madow_value || '0.00' }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="可用兑换券" min-width="110">
                    <template #default="scope"> {{ scope.row.voucher_available || 0 }} 个 </template>
                </el-table-column>
                <el-table-column label="累计佣金" min-width="120">
                    <template #default="scope"> {{ scope.row.total_income }}元 </template>
                </el-table-column>
                <el-table-column label="消费金额" min-width="120">
                    <template #default="scope"> {{ scope.row.user?.total_consume || 0 }}元 </template>
                </el-table-column>
                <el-table-column label="自购分销业绩" min-width="120">
                    <template #default="scope">
                        <div>{{ scope.row.child_order_count_0 }}单</div>
                        <div>{{ scope.row.child_order_money_0 }}元</div>
                    </template>
                </el-table-column>
                <el-table-column label="上级分销商" min-width="120" align="center">
                    <template #default="scope">
                        <sa-user-profile type="agent" :user="scope.row.user?.parent_user"
                            :id="scope.row.user?.parent_user_id" mode="col"></sa-user-profile>
                    </template>
                </el-table-column>
                <el-table-column label="一级用户人数" min-width="120">
                    <template #default="scope"> {{ scope.row.child_user_count_1 }}人 </template>
                </el-table-column>
                <el-table-column label="一级分销商人数" min-width="160">
                    <template #default="scope">
                        <div>{{ scope.row.child_agent_count_1 }}人</div>
                    </template>
                </el-table-column>
                <el-table-column prop="createtime" label="创建时间" width="172"></el-table-column>
                <el-table-column label="操作" min-width="180" fixed="right">
                    <template #default="scope">
                        <div class="sa-flex">
                            <span class="mr-2" :style="{
                                    color: statusStyle[scope.row.status]?.color,
                                }">
                                {{ scope.row.status_text }}
                            </span>
                            {if $auth->check('shopro/commission/agent/detail')}
                            <el-button type="primary" link @click="onDetail(scope.row.user_id, scope.row)">查看</el-button>
                            {/if}
                            {if $auth->check('shopro/commission/agent/edit')}
                            <el-button type="primary" link @click="onOpenIdentity(scope.row)">开通身份</el-button>
                            {/if}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-table v-if="state.filter.data.tabActive=='pending'" height="100%" class="sa-table" :data="state.data"
                stripe>
                <el-table-column prop="user_id" label="ID" min-width="90">
                </el-table-column>
                <el-table-column label="分销商信息" min-width="150">
                    <template #default="scope">
                        <sa-user-profile :user="scope.row.user" :id="scope.row.user_id" />
                    </template>
                </el-table-column>
                <el-table-column label="等级" min-width="120">
                    <template #default="scope">
                        <template v-if="scope.row.level_info">
                            <div>{{ scope.row.level_info.name }}</div>
                            <div>(等级{{ scope.row.level_info.level }})</div>
                        </template>
                        <template v-else>{{ scope.row.level }}</template>
                    </template>
                </el-table-column>
                <el-table-column label="上级分销商" min-width="120" align="center">
                    <template #default="scope">
                        <sa-user-profile type="agent" :user="scope.row.user?.parent_user"
                            :id="scope.row.user?.parent_user_id" mode="col" />
                    </template>
                </el-table-column>
                <el-table-column label="消费金额" min-width="120">
                    <template #default="scope"> {{ scope.row.user?.total_consume || 0 }}元 </template>
                </el-table-column>
                <el-table-column label="推广人数" min-width="120">
                    <template #default="scope"> {{ scope.row.child_user_count_1 }}人 </template>
                </el-table-column>
                <el-table-column label="提交次数" min-width="120">
                    <template #default="scope"> {{ scope.row.apply_num }}次</template>
                </el-table-column>
                <el-table-column prop="createtime" label="创建时间" min-width="172"></el-table-column>
                <el-table-column label="操作" min-width="160" fixed="right">
                    <template #default="scope">
                        <div class="sa-flex">
                            {if $auth->check('shopro/commission/agent/edit')}
                            <el-button type="success" link @click="onEdit(scope.row.user_id, {status:'normal'})">
                                同意
                            </el-button>
                            {/if}
                            {if $auth->check('shopro/commission/agent/edit')}
                            <el-button type="warning" link @click="onEdit(scope.row.user_id,{status:'reject'} )">
                                驳回
                            </el-button>
                            {/if}
                            {if $auth->check('shopro/commission/agent/detail')}
                            <el-button type="primary" link @click="onDetail(scope.row.user_id, scope.row)">查看</el-button>
                            {/if}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-table v-if="state.filter.data.tabActive==0" height="100%" class="sa-table" :data="state.data" stripe>
                <el-table-column prop="user_id" label="ID" min-width="90"></el-table-column>
                <el-table-column label="分销商信息" min-width="150">
                    <template #default="scope">
                        <sa-user-profile :user="scope.row.user" :id="scope.row.user_id" />
                    </template>
                </el-table-column>
                <el-table-column label="等级" min-width="120">
                    <template #default="scope">
                        <template v-if="scope.row.level_info">
                            <div>{{ scope.row.level_info.name }}</div>
                            <div>(等级{{ scope.row.level_info.level }})</div>
                        </template>
                        <template v-else>{{ scope.row.level }}</template>
                    </template>
                </el-table-column>
                <el-table-column label="消费金额" min-width="120">
                    <template #default="scope"> {{ scope.row.user?.total_consume || 0 }}元 </template>
                </el-table-column>
                <el-table-column label="推广人数" min-width="120">
                    <template #default="scope"> {{ scope.row.child_user_count_1 }}人 </template>
                </el-table-column>
                <el-table-column label="升级之后的等级" min-width="200">
                    <template #default="scope">
                        <div v-if="scope.row.level_status_info">
                            {{ scope.row.level_status_info.name }}
                        </div>
                        <div>等级{{ scope.row.level_status }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="createtime" label="创建时间" min-width="172"></el-table-column>
                <el-table-column label="操作" min-width="200" fixed="right">
                    <template #default="scope">
                        <div class="sa-flex">
                            <span class="sa-color--info mr-2" v-if="!scope.row.level_status_info">
                                未找到等级
                            </span>
                            <template v-if="scope.row.level_status_info">
                                {if $auth->check('shopro/commission/agent/edit')}
                                <el-button type="success" link
                                    @click=" onEdit(scope.row.user_id, {level_status: scope.row.level_status})">
                                    同意
                                </el-button>
                                <el-button type="danger" link @click="onEdit(scope.row.user_id, { level_status: 0 })">
                                    拒绝
                                </el-button>
                                {/if}
                            </template>
                            {if $auth->check('shopro/commission/agent/detail')}
                            <el-button type="primary" link @click="onDetail(scope.row.user_id, scope.row)">查看</el-button>
                            {/if}
                        </div>
                    </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>
    <el-dialog v-model="identity.visible" title="开通 / 调整身份" width="520px" destroy-on-close>
        <el-form label-width="100px">
            <el-form-item label="用户">
                {{ identity.form.nickname || identity.form.user_id }}
            </el-form-item>
            <el-form-item label="当前身份">
                {{ identity.form.before_text || '-' }}
            </el-form-item>
            <el-form-item label="创客等级" required>
                <el-select v-model="identity.form.level" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in identity.levels" :key="item.level" :label="item.name"
                        :value="item.level"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="酒道馆">
                <el-switch v-model="identity.form.is_venue" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="区县代理">
                <el-switch v-model="identity.form.is_county" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item v-if="identity.form.is_county" label="区县" required>
                <el-cascader v-model="identity.form.area_arr" :options="identity.areaSelect" :props="{
                    value: 'id',
                    label: 'name',
                    children: 'children',
                    checkStrictly: true,
                    emitPath: true,
                }" clearable filterable style="width:100%" @change="onIdentityAreaChange"></el-cascader>
                <div class="tip" style="margin-top:4px;color:#999;font-size:12px">编码：{{ identity.form.county_code || '-' }}</div>
            </el-form-item>
            <el-form-item label="锁定升级">
                <el-switch v-model="identity.form.upgrade_lock" :active-value="1" :inactive-value="0"></el-switch>
                <div style="font-size:12px; color:#ef4444; margin-top:2px;" v-if="identity.form.upgrade_lock">
                    ⚠️ 已开启锁定：该分销商将禁止自动升级（即使满足业绩条件也不会晋升）
                </div>
                <div style="font-size:12px; color:#10b981; margin-top:2px;" v-else>
                    ✓ 未锁定：正常允许分销商根据业绩达标自动晋升
                </div>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="identity.form.remark" type="textarea" placeholder="如：2026-09 签约"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="identity.visible=false">取消</el-button>
            <el-button type="primary" :loading="identity.loading" @click="onSubmitIdentity">确定</el-button>
        </template>
    </el-dialog>
</div>