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

<style>
    .goods-form .sa-title.is-line {
        margin-bottom: 16px;
        font-weight: 600;
        font-size: 15px;
    }

    .goods-form .goods-card {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 20px;
        border: 1px solid var(--sa-border);
    }

    .goods-form .goods-item .goods-title {
        height: 20px;
        line-height: 20px;
        font-size: 15px;
        font-weight: 600;
        color: var(--sa-font);
        margin-bottom: 6px;
    }

    .goods-form .goods-item .goods-price {
        font-size: 14px;
        color: #f56c6c;
        font-weight: 600;
        margin-bottom: 6px;
    }

    .goods-form .goods-item .goods-sku {
        width: fit-content;
        height: 20px;
        line-height: 20px;
        background: var(--el-color-primary);
        border-radius: 10px;
        padding: 0 10px;
        font-size: 12px;
        color: var(--sa-background-assist);
    }

    .goods-form .section-box {
        background: #fff;
        border: 1px solid #e4e7ed;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 18px;
    }

    .goods-form .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        padding-bottom: 8px;
        border-bottom: 1px dashed #ebeef5;
    }

    .goods-form .section-title {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        display: flex;
        align-items: center;
    }

    .goods-form .section-title::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 14px;
        background: var(--el-color-primary);
        border-radius: 2px;
        margin-right: 8px;
    }

    .goods-form .section-tip {
        font-size: 12px;
        color: #909399;
        margin-top: 4px;
    }

    .goods-form .rules-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .goods-form .rules-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .goods-form .rules-grid-6 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .goods-form .field-item {
        background: #fafafa;
        padding: 10px 12px;
        border-radius: 6px;
        border: 1px solid #f0f0f0;
    }

    .goods-form .field-label {
        font-size: 12px;
        color: #606266;
        margin-bottom: 6px;
        font-weight: 500;
    }

    .goods-form .preview-summary {
        background: #f0f9eb;
        border: 1px solid #e1f3d8;
        border-radius: 8px;
        padding: 16px;
        margin-top: 10px;
    }

    .goods-form .preview-summary .summary-title {
        font-weight: 600;
        font-size: 14px;
        color: #67c23a;
        margin-bottom: 10px;
    }

    .goods-form .preview-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        font-size: 13px;
        color: #555;
    }

    .goods-form .preview-item {
        background: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        border: 1px solid #e1f3d8;
    }

    .goods-form .sku-toolbar {
        background: #f4f6fa;
        padding: 10px 14px;
        border-radius: 6px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    .goods-form .sku-tab-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
</style>

<div id="addEdit" class="goods-form" v-cloak>
    <el-container class="panel-block">
        <el-main>
            <el-scrollbar height="100%">
                <!-- 商品基本信息卡片 -->
                <div class="goods-card">
                    <div v-for="goods in state.data?.goods" :key="goods.id" class="goods-item sa-flex sa-col-top">
                        <sa-image class="mr-3" :url="goods.image" size="64"></sa-image>
                        <div>
                            <div class="goods-title sa-table-line-1">{{ goods.title }}</div>
                            <div class="goods-price" v-if="goods.price">
                                指导价：¥{{ Array.isArray(goods.price) ? goods.price.join(' ~ ') : goods.price }}
                            </div>
                            <div v-if="goods.is_sku" class="goods-sku">多规格商品（共 {{ goods.sku_prices?.length || 0 }} 种规格）</div>
                            <div v-else class="goods-sku" style="background:#67c23a;">单规格基础商品</div>
                        </div>
                    </div>
                </div>

                <!-- 计奖与分成核心设置 -->
                <el-form label-width="120px" label-position="left">
                    <div class="section-box">
                        <div class="section-header">
                            <div class="section-title">计奖资格与业绩设置</div>
                        </div>
                        <el-form-item label="是否参与计奖">
                            <el-radio-group v-model="state.commission_goods.status">
                                <el-radio :label="1"><el-tag type="success" size="small">参与计奖</el-tag></el-radio>
                                <el-radio :label="0"><el-tag type="danger" size="small">不参与计奖</el-tag></el-radio>
                            </el-radio-group>
                            <div class="section-tip">
                                开启后，购买该商品的新订单将参与收益中心推三返一、创客极差、团队拆分、兑换券及全网日结奖池；关闭后整单或单品排除计奖。
                            </div>
                        </el-form-item>

                        <template v-if="state.commission_goods.status == 1">
                            <el-form-item label="分销商业绩">
                                <el-radio-group v-model="state.commission_goods.commission_order_status">
                                    <el-radio :label="1">计入业绩</el-radio>
                                    <el-radio :label="0">不计入业绩</el-radio>
                                </el-radio-group>
                                <div class="section-tip">
                                    计入后，该订单将累加分销商团队订单金额和单数，用于创客升级考核。
                                </div>
                            </el-form-item>

                            <el-form-item label="分成规则模式">
                                <el-radio-group v-model="state.commission_goods.self_rules" @change="onChangeSelfRules">
                                    <el-radio :label="0">默认规则（跟随系统配置）</el-radio>
                                    <el-radio :label="1" v-if="state.rulesType != 'batch'">独立规则（单独设置分成）</el-radio>
                                    <el-radio :label="2">批量规则（统一设置分成）</el-radio>
                                </el-radio-group>
                                <div class="section-tip">
                                    选择「默认规则」时直接继承系统收益中心全局配置；选择「独立规则」可为当前商品单独定制分成比例与金额。
                                </div>
                            </el-form-item>
                        </template>
                    </div>

                    <!-- 状态为不参与时的警示提示 -->
                    <el-alert v-if="state.commission_goods.status == 0" type="warning" show-icon :closable="false"
                        title="商品未参与计奖"
                        description="当前商品已关闭计奖，会员或下级购买该商品时将不产生推荐提成、创客极差、酒道馆/区县管理奖及兑换券，亦不进入全网日结均分奖池。"
                        style="margin-bottom: 20px;">
                    </el-alert>

                    <!-- 模式 0：跟随系统默认规则预览卡片 -->
                    <div v-if="state.commission_goods.status == 1 && state.commission_goods.self_rules == 0" class="preview-summary">
                        <div class="summary-title sa-flex sa-row-between">
                            <span>系统收益中心全局默认分成规则概览</span>
                            <el-tag size="small" type="success">当前生效</el-tag>
                        </div>
                        <div class="preview-list">
                            <div class="preview-item">
                                <strong>推荐提成（推三返一）：</strong>
                                循环返现 ¥{{ state.defaultPartnerRules.push3_amounts?.[0] || 398 }} / ¥{{ state.defaultPartnerRules.push3_amounts?.[1] || 400 }} / ¥{{ state.defaultPartnerRules.push3_amounts?.[2] || 600 }} 元
                            </div>
                            <div class="preview-item">
                                <strong>创客极差基数（V1~V6）：</strong>
                                ¥{{ state.defaultPartnerRules.maker_bonus?.['2'] || 20 }} ~ ¥{{ state.defaultPartnerRules.maker_bonus?.['7'] || 120 }} 元
                            </div>
                            <div class="preview-item">
                                <strong>创客协同与超越：</strong>
                                同级协同 {{ ((state.defaultPartnerRules.maker_peer_rate || 0.10) * 100).toFixed(0) }}%，超越关怀 {{ ((state.defaultPartnerRules.maker_overtaken_rate || 0.05) * 100).toFixed(0) }}%
                            </div>
                            <div class="preview-item">
                                <strong>实体渠道管理奖：</strong>
                                酒道馆 ¥{{ state.defaultPartnerRules.venue_split || 50 }}，区县管理 ¥{{ state.defaultPartnerRules.county_full || 100 }}（有馆时各50）
                            </div>
                            <div class="preview-item">
                                <strong>馆/县平级奖：</strong>
                                酒道馆 {{ ((state.defaultPartnerRules.venue_peer_rate || 0.10) * 100).toFixed(0) }}%，区县代理 {{ ((state.defaultPartnerRules.county_peer_rate || 0.10) * 100).toFixed(0) }}%
                            </div>
                            <div class="preview-item">
                                <strong>消费补贴兑换券：</strong>
                                实付 {{ state.defaultPartnerRules.voucher_times || 1.5 }} 倍，分 {{ state.defaultPartnerRules.voucher_days || 365 }} 天线性释放
                            </div>
                        </div>
                    </div>

                    <!-- 模式 1 / 2：独立设置分成规则面板 -->
                    <template v-if="state.commission_goods.status == 1 && (state.commission_goods.self_rules == 1 || state.commission_goods.self_rules == 2)">
                        <!-- 多规格切换与快捷操作栏 -->
                        <div class="sku-toolbar">
                            <div class="sa-flex" v-if="state.detailData?.is_sku == 1 && state.rulesType != 'batch'">
                                <span class="mr-2" style="font-size: 13px; font-weight: 500;">规格配置模式：</span>
                                <el-radio-group v-model="state.skuMode" size="small">
                                    <el-radio-button label="unified">统一设置所有规格</el-radio-button>
                                    <el-radio-button label="sku">按规格分别设置</el-radio-button>
                                </el-radio-group>
                            </div>
                            <div class="sa-flex" v-else>
                                <el-tag size="small" type="info">商品独立分成模式</el-tag>
                            </div>
                            <div class="sa-flex">
                                <el-button size="small" type="primary" plain @click="onFillDefaults(state.skuMode === 'sku' ? 'current_sku' : 'all_skus')">
                                    一键填入系统默认值
                                </el-button>
                                <el-button size="small" type="success" plain v-if="state.skuMode === 'sku' && state.detailData?.sku_prices?.length > 1" @click="onSyncToAllSkus">
                                    同步当前规则至全部规格
                                </el-button>
                            </div>
                        </div>

                        <!-- 当按规格分别设置时的规格切换 Tabs -->
                        <div v-if="state.skuMode === 'sku' && state.detailData?.sku_prices?.length" style="margin-bottom: 16px;">
                            <el-radio-group v-model="state.activeSkuId" size="default">
                                <el-radio-button v-for="sku in state.detailData.sku_prices" :key="sku.id" :label="String(sku.id)">
                                    {{ sku.goods_sku_text?.join(' / ') || '默认规格' }}（¥{{ sku.price }}）
                                </el-radio-button>
                            </el-radio-group>
                        </div>

                        <!-- 当前激活的表单对象引用 -->
                        <template v-for="curForm in [(state.skuMode === 'sku' && state.activeSkuId) ? state.skuRules[state.activeSkuId] : state.ruleForm]">
                            <!-- 1. 推荐提成（推三返一） -->
                            <div class="section-box">
                                <div class="section-header">
                                    <div class="section-title">1. 推荐提成（推三返一循环返现）</div>
                                    <span class="section-tip">直推有效单奖励，每 3 笔订单形成一个循环返还货款</span>
                                </div>
                                <div class="rules-grid">
                                    <div class="field-item">
                                        <div class="field-label">第 1 单返现金额</div>
                                        <el-input v-model="curForm.push3_1" type="number" :min="0">
                                            <template #append>元</template>
                                        </el-input>
                                    </div>
                                    <div class="field-item">
                                        <div class="field-label">第 2 单返现金额</div>
                                        <el-input v-model="curForm.push3_2" type="number" :min="0">
                                            <template #append>元</template>
                                        </el-input>
                                    </div>
                                    <div class="field-item">
                                        <div class="field-label">第 3 单返现金额（波峰档）</div>
                                        <el-input v-model="curForm.push3_3" type="number" :min="0">
                                            <template #append>元</template>
                                        </el-input>
                                    </div>
                                </div>
                            </div>

                            <!-- 2. 创客进阶奖（极差基数）与协同奖 -->
                            <div class="section-box">
                                <div class="section-header">
                                    <div class="section-title">2. 创客进阶奖（V1~V6极差基数）与协同奖</div>
                                    <span class="section-tip">向上链条创客按自身基数减去已截留最高基数计提差额</span>
                                </div>
                                <div class="rules-grid-6" style="margin-bottom: 14px;">
                                    <div class="field-item">
                                        <div class="field-label">创客 V1 进阶基数</div>
                                        <el-input v-model="curForm.maker_v1" type="number" :min="0">
                                            <template #append>元</template>
                                        </el-input>
                                    </div>
                                    <div class="field-item">
                                        <div class="field-label">创客 V2 进阶基数</div>
                                        <el-input v-model="curForm.maker_v2" type="number" :min="0">
                                            <template #append>元</template>
                                        </el-input>
                                    </div>
                                    <div class="field-item">
                                        <div class="field-label">创客 V3 进阶基数</div>
                                        <el-input v-model="curForm.maker_v3" type="number" :min="0">
                                            <template #append>元</template>
                                        </el-input>
                                    </div>
                                    <div class="field-item">
                                        <div class="field-label">创客 V4 进阶基数</div>
                                        <el-input v-model="curForm.maker_v4" type="number" :min="0">
                                            <template #append>元</template>
                                        </el-input>
                                    </div>
                                    <div class="field-item">
                                        <div class="field-label">创客 V5 进阶基数</div>
                                        <el-input v-model="curForm.maker_v5" type="number" :min="0">
                                            <template #append>元</template>
                                        </el-input>
                                    </div>
                                    <div class="field-item">
                                        <div class="field-label">创客 V6 进阶基数</div>
                                        <el-input v-model="curForm.maker_v6" type="number" :min="0">
                                            <template #append>元</template>
                                        </el-input>
                                    </div>
                                </div>
                                <div class="rules-grid-2">
                                    <div class="field-item">
                                        <div class="field-label">创客同级平级协同比例</div>
                                        <el-input v-model="curForm.maker_peer_rate" type="number" :min="0" :max="100">
                                            <template #append>%</template>
                                        </el-input>
                                    </div>
                                    <div class="field-item">
                                        <div class="field-label">创客下级反超卓越比例</div>
                                        <el-input v-model="curForm.maker_overtaken_rate" type="number" :min="0" :max="100">
                                            <template #append>%</template>
                                        </el-input>
                                    </div>
                                </div>
                            </div>

                            <!-- 3. 实体渠道与区域管理奖（团队拆分） -->
                            <div class="section-box">
                                <div class="section-header">
                                    <div class="section-title">3. 实体渠道与区域管理奖（团队拆分）</div>
                                    <span class="section-tip">无馆有县独享，有馆有县各分其半</span>
                                </div>
                                <div class="rules-grid-2" style="margin-bottom: 14px;">
                                    <div class="field-item">
                                        <div class="field-label">酒道馆管理奖基准</div>
                                        <el-input v-model="curForm.venue_split" type="number" :min="0">
                                            <template #append>元</template>
                                        </el-input>
                                    </div>
                                    <div class="field-item">
                                        <div class="field-label">区县管理全额（无馆时独享）</div>
                                        <el-input v-model="curForm.county_full" type="number" :min="0">
                                            <template #append>元</template>
                                        </el-input>
                                    </div>
                                </div>
                                <div class="rules-grid-2">
                                    <div class="field-item">
                                        <div class="field-label">酒道馆平级比例</div>
                                        <el-input v-model="curForm.venue_peer_rate" type="number" :min="0" :max="100">
                                            <template #append>%</template>
                                        </el-input>
                                    </div>
                                    <div class="field-item">
                                        <div class="field-label">区县代理平级比例</div>
                                        <el-input v-model="curForm.county_peer_rate" type="number" :min="0" :max="100">
                                            <template #append>%</template>
                                        </el-input>
                                    </div>
                                </div>
                            </div>

                            <!-- 4. 消费补贴兑换券计划 -->
                            <div class="section-box">
                                <div class="section-header">
                                    <div class="section-title">4. 消费补贴兑换券计划</div>
                                    <span class="section-tip">买家本人下单实付金额按倍数赠送并在商城按日释放抵扣</span>
                                </div>
                                <div class="rules-grid-2">
                                    <div class="field-item">
                                        <div class="field-label">赠送兑换券倍数（相对计奖实付）</div>
                                        <el-input v-model="curForm.voucher_times" type="number" :min="0" step="0.1">
                                            <template #append>倍</template>
                                        </el-input>
                                    </div>
                                    <div class="field-item">
                                        <div class="field-label">线性释放周期天数</div>
                                        <el-input v-model="curForm.voucher_days" type="number" :min="1">
                                            <template #append>天</template>
                                        </el-input>
                                    </div>
                                </div>
                            </div>

                            <!-- 5. 全平台日结奖池注入（可选定制） -->
                            <div class="section-box">
                                <div class="section-header">
                                    <div class="section-title">5. 全平台日结均分奖池注入（可选定制）</div>
                                    <span class="section-tip">每日凌晨 00:30 全网有效订单向池中注入并由活跃身份均分</span>
                                </div>
                                <div class="rules-grid-2">
                                    <div class="field-item">
                                        <div class="field-label">酒道馆日结奖池单笔注入</div>
                                        <el-input v-model="curForm.venue_share" type="number" :min="0">
                                            <template #append>元/单</template>
                                        </el-input>
                                    </div>
                                    <div class="field-item">
                                        <div class="field-label">区县代理日结奖池单笔注入</div>
                                        <el-input v-model="curForm.county_share" type="number" :min="0">
                                            <template #append>元/单</template>
                                        </el-input>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </template>
                </el-form>
            </el-scrollbar>
        </el-main>
        <el-footer class="sa-footer--submit sa-flex sa-row-right">
            <el-button type="primary" size="large" @click="onConfirm">保存分成设置</el-button>
        </el-footer>
    </el-container>
</div>