<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/common.css">
<style>
    #pageDetail {}

    .msg-tip {
        margin-left: 30px;
        color: #999;
    }

    .select-goods {
        width: 146px;
        height: 50px;
        border: 1px solid #E6E6E6;
        border-radius: 4px;
        margin-right: 10px;
        position: relative;
        margin-bottom: 10px;
    }

    .select-goods-selected {
        border-color: #7438D5;
    }

    .select-goods-img {
        width: 48px;
        height: 48px;
        border-radius: 4px;
    }

    .select-goods div {
        padding: 0 8px;
        line-height: 14px;
        -webkit-line-clamp: 2;
        font-size: 12px;
    }

    .delete-goods {
        position: absolute;
        width: 16px;
        height: 16px;
        top: -8px;
        right: -8px;

    }

    .label-auto {
        width: 16px;
        height: 16px;
    }

    .modify-text {
        margin-right: 14px;
    }

    [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="pageDetail" class="open-page-container common-container-scrollbar" v-cloak>
    <el-form :model="detailData" :rules="rules" ref="detailData" label-width="108px">
        <el-form-item label="优惠券名称:" prop="name">
            <div class="display-flex">
                <el-input type="input" v-model="detailData.name" placeholder="请输入优惠券名称" size="medium"></el-input>
            </div>
        </el-form-item>
        <el-form-item label="优惠类型:" prop="type">
            <el-radio-group v-model="detailData.type">
                <el-radio label="cash">代金券</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="优惠券类型:">
            <el-radio-group v-model="detailData.coupon_type">
                <el-radio label="normal">普通</el-radio>
                <el-radio label="exclusive">专属券</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="优惠券描述:">
            <el-input type="input" v-model="detailData.description" placeholder="仅商家端显示,用于区分相似优惠券(最多可输入十个字)"
                size="medium"></el-input>
        </el-form-item>
        <el-form-item label="领取时间:" prop="gettime">
            <el-date-picker v-model="detailData.gettime" type="datetimerange" range-separator="至"
                value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期"
                end-placeholder="结束日期" size="medium" :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="使用时间:" prop="usetime">
            <el-date-picker v-model="detailData.usetime" type="datetimerange" range-separator="至"
                value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期"
                end-placeholder="结束日期" size="medium" :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="剩余数量:">
            <div class="display-flex">
                <el-input type="number" v-model="detailData.stock" style="width:170px;" placeholder="请输入剩余数量"
                    size="medium">
                    <template slot="append"></template>
                </el-input>
            </div>
        </el-form-item>
        <el-form-item label="每人限领:">
            <div class="display-flex">
                <el-input type="number" v-model="detailData.limit" style="width:170px;" placeholder="请输入每人限领"
                    size="medium">
                    <template slot="append"></template>
                </el-input>
            </div>
        </el-form-item>
        <el-form-item label="减免金额:" prop="amount">
            <div class="display-flex">
                <el-input type="number" v-model="detailData.amount" style="width:170px;" placeholder="请输入减免金额"
                    size="medium">
                    <template slot="append"></template>
                </el-input>
            </div>
        </el-form-item>
        <el-form-item label="使用门槛:" prop="enough">
            <div class="display-flex">
                <el-input type="number" v-model="detailData.enough" style="width:170px;" placeholder="请输入使用门槛"
                    size="medium">
                    <template slot="append"></template>
                </el-input>
            </div>
        </el-form-item>
        <el-form-item label="适用商品:" prop="goods_type">
            <div>
                <el-radio-group v-model="detailData.goods_type">
                    <el-radio label="all">全部商品可用</el-radio>
                    <el-radio label="part">指定商品可用</el-radio>
                </el-radio-group>
                <div class="display-flex" style="flex-wrap: wrap;" v-if="detailData.goods_type=='part'">
                    <div class="select-goods display-flex" :class="item.selected?'select-goods-selected':''"
                        v-for="(item,index) in goods_arr" @click="operation('selectedDel',index)">
                        <img class="select-goods-img" :src="Fast.api.cdnurl(item.image)" alt="" srcset="">
                        <div class="flex-1 ellipsis-item-2">
                            {{item.title}}
                        </div>
                        <img v-if="item.selected" class="delete-goods label-auto"
                            src="/assets/addons/groupon/img/goods/close.png" @click="operation('delete',index)">
                    </div>
                </div>
                <div class="display-flex" v-if="detailData.goods_type=='part'">
                    <div class="display-flex">
                        <div class="theme-color cursor-pointer modify-text" @click="operation('selected')">修改已选商品</div>
                        <div class="theme-delete-color cursor-pointer" @click="operation('clear')">清空</div>
                    </div>
                </div>
            </div>
        </el-form-item>
    </el-form>
    <div class="open-page-button-container">
        <div class="dialog-button dialog-button-cancel" @click="submit">取消</div>
        <div class="dialog-button dialog-button-define" @click="submit('yes','detailData')">确定</div>
    </div>
</div>