<template>
    <div>
        <el-dialog :title="form.id ? '编辑活动' : '添加活动'" :visible.sync="dialogVisible" @close="reset">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
                <el-form-item label="充值">
                    <template>
                        <div style="display: flex;">
                            <el-input style="width: 220px;" placeholder="请输入金额" v-model="form.amount"
                                @input="(v) => (form.amount = v.replace(/^(0+)|[^\d]+/g, ''))">
                                <template slot="prepend">满</template>
                                <template slot="append">元</template>
                            </el-input>
                            <el-input style="margin-left: 20px; width: 220px;" placeholder="请输入金额"
                                v-model="form.giftAmount"
                                @input="(v) => (form.giftAmount = v.replace(/^(0+)|[^\d]+/g, ''))">
                                <template slot="prepend">赠</template>
                                <template slot="append">元</template>
                            </el-input>
                        </div>
                    </template>
                </el-form-item>

                <!-- <el-form-item label="最小金额">
                    <el-input-number v-model="form.minNum" controls-position="right" :min="1"></el-input-number>
                </el-form-item>
                <el-form-item label="最大金额">
                    <el-input-number v-model="form.maxNum" controls-position="right" :min="1"></el-input-number>
                </el-form-item>
                <el-form-item label="赠送金额">
                    <el-input-number v-model="form.handselNum" controls-position="right" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="赠送类型">
                    <el-select v-model="form.handselType">
                        <el-option :label="item.label" :value="item.value" v-for="item in handselTypes"
                            :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="form.isDel" active-value="0" inactive-value="1"></el-switch>
                </el-form-item> -->

                <el-form-item label="是否使用优惠券">
                    <el-switch v-model="form.isUseCoupon"  :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="数量">
                    <el-input-number v-model="form.num" controls-position="right" :min="1"></el-input-number>
                </el-form-item>
                <el-form-item label="积分">
                    <template>
                        <div class="labelboxss">
                            <div>赠送</div>
                            <el-input style="width: 140px;margin: 0 15px;" v-model="form.giftPoints"></el-input>
                            <div>积分</div>
                        </div>
                    </template>
                </el-form-item>
                <el-form-item label="选择优惠劵" v-if="form.isUseCoupon == 1">
                    <div>
                        <el-button type="primary" icon="el-icon-plus" @click="$refs.coupon.show([...productIds])">
                            添加优惠劵
                        </el-button>
                    </div>
                    <div class="shop_list">
                        <div class="item_wrap" style="display: flex;align-items: center;margin-top: 6px;"
                            v-for="(item, index) in productIds" :key="item.id">
                            <div class="name">{{ item.title }}</div>
                            <!-- <el-input style="width: 120px;" v-model="item.num" placeholder='请填写数量'
                                @input="checkIfNum(item)"></el-input> -->
                            <!-- <el-button type="text" @click="productIds.splice(index, 1)"
                                style="margin-left: 20px;">删除</el-button> -->
                            <el-button type="text" @click="productIds = []" style="margin-left: 20px;">删除</el-button>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
            </span>
        </el-dialog>
        <coupon ref="coupon" @success="slectShop" />

    </div>
</template>

<script>
import handselTypes from '../handselTypes'
import { activate, storageupActivate } from '@/api/shop'
import coupon from '@/components/coupon'

export default {
    components: { coupon },
    data() {
        return {
            dialogVisible: false,
            loading: false,
            handselTypes: handselTypes,
            form: {
                id: '',
                shopId: '',
                minNum: 1,
                maxNum: 1,
                handselNum: 1, // 打印类型
                handselType: 'GD',
                isDel: '0',
                num: 1,
                amount: '',
                giftAmount: ''
            },
            productIds: [],
            resetForm: '',
            rules: {
                minNum: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ],
                maxNum: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    mounted() {
        this.resetForm = { ...this.form }
    },
    methods: {
        slectShop(res) {
            console.log(res, 11)
            // if (this.productIds.length) {
            //     res.map(async item => {
            //         if (!await this.checkShop(item.id)) {
            //             this.productIds.push({ ...item })
            //         }
            //     })
            // } else {
            this.productIds = res
            // }
        },
        // 判断是否存在重复商品
        checkShop(id) {
            let falg = false
            this.productIds.map(item => {
                if (item.id == id) {
                    falg = true
                }
            })
            return falg
        },
        checkIfNum(item) {
            item.num = item.num.toString().replace(/\D/g, '');
        },
        // 确认选择商品分类
        classifySuccess(e) {
            this.form.config.categoryList = e
        },
        onSubmitHandle() {
            console.log(this.form)
            if (this.form.amount == '') {
                this.$message({
                    message: '充值金额不能为空',
                    type: 'warning'
                });
                return false;
            }
            if (this.form.isUseCoupon == 1) {
                if (this.productIds.length == 0) {
                    this.$message({
                        message: '请选择优惠劵',
                        type: 'warning'
                    });
                    return false;
                }
                this.form.couponId = this.productIds[0].id
            } else {
                this.form.couponId = ''
                this.form.couponName = ''
                this.productIds = []
            }
            // let arr = []
            // this.productIds.forEach(ele => {
            //     arr.push({
            //         productId: ele.id,
            //         num: ele.num
            //     })
            // })
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true
                        this.form.shopId = localStorage.getItem('shopId')
                        let res = await storageupActivate(this.form)
                        this.$emit('success', res)
                        this.close()
                        this.$notify({
                            title: '成功',
                            message: `${this.form.id ? '编辑' : '添加'}成功`,
                            type: 'success'
                        });
                        this.loading = false
                    } catch (error) {
                        this.loading = false
                        console.log(error)
                    }
                }
            })
        },
        async show(obj) {
            this.productIds = []
            this.dialogVisible = true
            if (obj && obj.id) {
                this.form = { ...obj }
                // 留着以后说不定多个优惠劵
                // let res = await activate(obj.id)
                // this.productIds = res
                if (obj.couponId) {
                    this.productIds = [{ title: obj.couponName,id:obj.couponId }]
                }
                console.log(obj, '调试1')
            }
        },
        close() {
            this.dialogVisible = false
        },
        reset() {
            this.form = { ...this.resetForm }
        }
    }
}
</script>
<style scoped lang="scss">
.labelbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    width: 130px;
    background: #F7F7FA;
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #DDDFE6;
    padding: 0 10px;

    input {
        border: none !important;
    }
}

.labelboxss {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
}

.shop_list {
    // display: flex;/
    // flex-wrap: wrap;

    .item_wrap {
        $size: 80px;

        .item {
            $radius: 4px;
            width: $size;
            height: $size;
            border-radius: $radius;
            overflow: hidden;
            position: relative;
            margin-right: 10px;
            margin-top: 10px;

            &:hover {
                cursor: pointer;
            }

            &::after {
                content: attr(data-index);
                font-size: 12px;
                height: 20px;
                display: flex;
                padding: 0 10px;
                border-radius: 0 0 $radius 0;
                align-items: center;
                background-color: rgba(0, 0, 0, 0.3);
                backdrop-filter: blur(10px);
                color: #fff;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 10;
            }

            &::before {
                content: '删除';
                font-size: 12px;
                width: 100%;
                height: 20px;
                display: flex;
                padding: 0 10px;
                align-items: center;
                justify-content: center;
                background-color: rgba(0, 0, 0, 0.3);
                backdrop-filter: blur(10px);
                color: #fff;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 10;
                transition: all .1s ease-in-out;
            }
        }

        .name {
            width: $size;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>