<!-- 添加优惠券 -->
<template>
    <el-dialog :title="type == 1 ? '编辑优惠券' : '添加优惠券'" :visible.sync="dialogVisible" @close="reset">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
            <el-form-item label="券名称" prop="couponId">
                <el-select v-model="form.couponId" placeholder="请选择优惠券">
                    <el-option :label="item.title" :value="item.id" v-for="item in coupons" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="数量">
                <el-input-number v-model="form.couponNum" :min="1"></el-input-number>
            </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>
</template>

<script>
import { getTbShopCoupon } from '@/api/coupon.js'
export default {
    data() {
        return {
            dialogVisible: false,
            loading: false,
            coupons: [],
            type: 1,
            form: {
                couponId: '',
                couponName: '',
                couponNum: ''
            },
            resetForm: {},
            rules: {
                couponId: [
                    {
                        required: true,
                        message: '请选择优惠券',
                        trigger: 'blur'
                    }
                ],
            }
        }
    },
    mounted() {
        this.resetForm = { ...this.form }
        this.getTbShopCoupon()
    },
    methods: {
        // 提交
        onSubmitHandle() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.form.couponName = this.coupons.find(item => item.id == this.form.couponId).title
                        this.$emit('success', { ...this.form })
                        this.close()
                    } catch (error) {
                        console.log(error)
                    }
                }
            })
        },
        // 获取优惠券列表
        async getTbShopCoupon() {
            try {
                const res = await getTbShopCoupon({
                    shopId: localStorage.getItem('shopId'),
                    type: 1,
                    page: 1,
                    size: 100
                })
                this.coupons = res.content
            } catch (error) {
                console.log(error);
            }
        },
        reset() {
            this.form = { ...this.resetForm }
        },
        close() {
            this.dialogVisible = false
        },
        show(row) {
            if (row && row.couponId) {
                this.type = 1
                this.form = { ...row }
            } else {
                this.type = 2
            }
            this.dialogVisible = true
        }
    }
}
</script>