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

<style>
    .score-shop-form .title {
        line-height: 22px;
        font-size: 14px;
        font-weight: 400;
        color: var(--sa-subtitle);
    }

    .score-shop-form .sku-table-wrap {
        width: 100%;
        overflow: auto;

    }

    .score-shop-form .sku-table-wrap .sku-table {
        font-size: 12px;
        font-weight: 500;

    }

    .score-shop-form .sku-table-wrap .sku-table thead {
        line-height: 40px;
        background: var(--sa-table-header-bg);
        color: var(--subtitle);
    }

    .score-shop-form .sku-table-wrap .sku-table tbody tr {
        line-height: 48px;
        color: var(--sa-font);

    }

    .score-shop-form .sku-table-wrap .sku-table tbody tr:nth-of-type(2n) {
        background: var(--sa-table-striped);
    }

    .score-shop-form .sku-table-wrap .sku-table th,
    .score-shop-form .sku-table-wrap .sku-table td {
        padding: 0 16px;
        text-align: left;
    }

    .score-shop-form .sku-table-wrap .sku-item {
        min-width: 100px;
        flex-shrink: 0;
    }

    .score-shop-form .sku-table-wrap .sku-item.sku-col {
        min-width: 240px;
    }
</style>

<div id="addEdit" class="score-shop-form" v-cloak>
    <el-container class="panel-block">
        <el-main>
            <el-scrollbar height="100%">
                <div class="title mb-3">商品名称：{{ state.title }}</div>
                <el-alert
                    title="💡 兑换规则配置说明"
                    type="info"
                    :closable="false"
                    class="mb-4"
                    description="1. 纯兑换券兑换：【所需兑换券】填入所需数量（如 100 个），【所需积分】填 0。用户在小程序下单时将自动使用可用兑换券 1:1 全额抵扣（实付 0 元）。&#10;2. 兑换券+积分组合：同时填写对应所需兑换券数量与所需积分。&#10;3. 若用户可用兑换券不足，系统自动支持抵扣部分可用券额，剩余差额可使用微信现金支付补齐。"
                    show-icon>
                </el-alert>
                <div class="sku-table-wrap">
                    <table class="sku-table" rules="none">
                        <thead>
                            <tr>
                                <th class="sku-item sku-col">商品规格</th>
                                <th class="sku-item">是否参与</th>
                                <th class="sku-item">商品原价</th>
                                <th class="sku-item">可兑换数量</th>
                                <th class="sku-item">所需兑换券(个)</th>
                                <th class="sku-item">所需积分</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(sp, spindex) in goods.sku_prices" :key="sp">
                                <td class="sku-item sku-col">{{ sp.goods_sku_text.join(',') }}</td>
                                <td class="sku-item">
                                    <el-switch v-model="goods.score_sku_prices[spindex].status" active-value="up"
                                        inactive-value="down" />
                                </td>
                                <td class="sku-item">{{ sp.price }}</td>
                                <th class="sku-item">
                                    <el-input v-if="goods.score_sku_prices[spindex].status == 'up'" type="number"
                                        placeholder="库存数量"
                                        v-model="goods.score_sku_prices[spindex].stock"></el-input>
                                </th>
                                <th class="sku-item">
                                    <el-input v-if="goods.score_sku_prices[spindex].status == 'up'" type="number"
                                        placeholder="如 100"
                                        v-model="goods.score_sku_prices[spindex].price"></el-input>
                                </th>
                                <th class="sku-item">
                                    <el-input v-if="goods.score_sku_prices[spindex].status == 'up'" type="number"
                                        placeholder="无积分填0"
                                        v-model="goods.score_sku_prices[spindex].score"></el-input>
                                </th>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </el-scrollbar>
        </el-main>
        <el-footer class="sa-footer--submit sa-flex sa-row-right">
            <el-button @click="onCancel" style="margin-right: 12px;">取消</el-button>
            <el-button type="primary" @click="onConfirm">确定</el-button>
        </el-footer>
    </el-container>
</div>