<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/common.css">
<style>
    #indexPage {
        color: #444;
        background: #fff;
    }

    .delete-btn {
        width: 88px;
        height: 32px;
        border: 1px solid #E6E6E6;
        border-radius: 4px;
        color: #999;
        font-size: 13px;
        justify-content: center;
    }

    .delete-btn-active {
        color: #FF5959;
        border-color: #FF5959;
    }

    .common-button-container {
        justify-content: space-between;
    }

    .common-add-button {
        margin-right: 20px;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/groupon/libs/vue.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/moment.js"></script>
<div id="indexPage" v-cloak>
    <div class="common-header-container">
        <div>
            优惠券
        </div>
        <div class="common-header-search">
            <el-input placeholder="请输入标题" suffix-icon="el-icon-search" v-model="searchKey" size="small">
            </el-input>
        </div>
    </div>
    <div class="common-bigtip-container">
        <p><strong>注意：</strong></p>
        <p>1、优惠券规则为统一规则，当修改优惠券的时候，用户在我的优惠券列表看到的信息会同步变化，包括使用门槛，减免金额等字段</p>
        <p>2、添加完优惠券之后，请一定谨慎修改</p>
    </div>
    <div class="common-button-container">
        <div class="display-flex">
            <div class="common-refresh-button" @click="getData">
                <i class="el-icon-refresh"></i>
            </div>
            {if condition = "$auth->check('groupon/coupons/add')"}
            <div class="common-button common-add-button" @click="operation('create')">
                <i class="el-icon-plus"></i>
                <span>新建优惠券</span>
            </div>
            {/if}
            {if condition = "$auth->check('groupon/coupons/del')"}
            <div class="delete-btn cursor-pointer display-flex"
                :class="multipleSelection.length>0?'delete-btn-active':'' " @click="operation('del')">
                删除
            </div>
            {/if}
        </div>
        {if condition = "$auth->check('groupon/coupons/recyclebin')"}
        <div class="common-button common-recycle-button" @click="operation('recyclebin')">
            <i class="fa fa-recycle"></i>
            回收站
        </div>
        {/if}
    </div>
    <div>
        <div class="common-table-container">
            <el-table ref="multipleTable" :data="data" border
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" min-width="40">
                </el-table-column>
                <el-table-column label="ID" min-width="60" prop="id" align="center">
                </el-table-column>
                <el-table-column label="优惠券名称" min-width="150">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            {{scope.row.name}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券描述" min-width="160">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            {{scope.row.description}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="优惠内容" min-width="180" align="center">
                    <template slot-scope="scope">
                        <div>
                            满{{scope.row.enough}}元,减{{scope.row.amount}}元
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="优惠类型" min-width="100" align="center">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.type_text}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券类型" min-width="100" align="center">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.coupon_type_text}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="getnum" label="已领取" min-width="80" align="center">
                </el-table-column>
                <el-table-column prop="usenum" label="已使用" min-width="80" align="center">
                </el-table-column>
                <el-table-column prop="stock" label="剩余" min-width="70" align="center">
                </el-table-column>
                <el-table-column prop="gettime" label="有效期" min-width="300" align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="110">
                    <template slot-scope="scope">
                        {if condition = "$auth->check('groupon/coupons/edit')"}
                        <span class="table-edit-text" @click="operation('edit',scope.row.id)">编辑
                        </span>
                        {/if}
                        {if condition = "$auth->check('groupon/coupons/del')"}
                        <span class="table-delete-text" @click="operation('del',scope.row.id)">删除</span>
                        {/if}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="common-pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
            </el-pagination>
        </div>
    </div>
</div>