<template>
    <div class="add-edit-dialog-container">
        <el-dialog
            :title="addEditDialogTitle"
            :visible.sync="addEditDialogVisible"
            width="40%"
            :before-close="close"
        >
            <el-form
                :model="addEditDialogForm"
                ref="addEditDialogForm"
                :rules="addEditDialogRules"
                label-width="90px"
            >
                <el-form-item label="名称:" prop="name" class="classify-input">
                    <el-input placeholder="请输入" v-model="addEditDialogForm.name" class="file-input"></el-input>
                </el-form-item>
                <el-form-item label="类型:" prop="type" v-if="this.type ==='add'">
                    <el-select v-model="addEditDialogForm.type">
                        <el-option label="红包" :value="2"></el-option>
                        <el-option label="折扣卷" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="使用范围" prop="scenario">
                    <el-select v-model="addEditDialogForm.scenario">
                        <el-option label="出诊问诊" :value="1"></el-option>
                        <el-option label="题库" :value="2"></el-option>
                        <el-option label="视频" :value="3"></el-option>
                    </el-select>
                </el-form-item>-->
                <el-form-item label="面值:" prop="price" v-if="addEditDialogForm.type ===2">
                    <el-input
                        placeholder="请输入"
                        v-model="addEditDialogForm.price"
                        class="file-input"
                    ></el-input>
                </el-form-item>
                <el-form-item label="折扣:" prop="discount" v-if="addEditDialogForm.type ===1">
                    <el-input
                        placeholder="请输入"
                        v-model="addEditDialogForm.discount"
                        class="file-input"
                    ></el-input>
                </el-form-item>
                <el-form-item label="满减:" prop="fullReduction" v-if="addEditDialogForm.type ===1">
                    <el-input
                        placeholder="请输入"
                        v-model="addEditDialogForm.fullReduction"
                        class="file-input"
                    ></el-input>
                </el-form-item>
                <el-form-item label="有效期:" prop="validity" v-if="addEditDialogForm.type ===1">
                    <el-date-picker
                        v-model="addEditDialogForm.validity"
                        type="datetime"
                        placeholder="选择日期时间"
                    ></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button
                    type="primary"
                    @click="submitForm('addEditDialogForm')"
                    :disabled="submitBtndisabled"
                >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { addCoupons, updateCouponsStatus } from '@/apps/mobile/api/cardbank/index';
import { validPositiveInteger } from '@/apps/mobile/utils/validate';
export default {
    data() {
        // 验证折扣券面值
        var checkPrice = (rule, value, callback) => {
            if (value && !validPositiveInteger(value)) {
                callback(new Error('格式不正确'));
            } else {
                callback();
            }
        };
        return {
            addEditDialogVisible: false,
            addEditDialogTitle: '新增',
            addEditDialogForm: {
                type: null,
                validity: null,
            },
            submitBtndisabled: false,
            addEditDialogRules: {
                name: [
                    { required: true, message: '请填写', trigger: 'blur' },
                    { max: 30, message: '长度最大30个字符', trigger: 'blur' },
                ],
                type: [{ required: true, message: '请选择', trigger: 'change' }],
                // scenario: [{ required: true, message: '请选择', trigger: 'change' }],
                price: [
                    { required: true, message: '请填写', trigger: 'blur' },
                    {
                        required: true,
                        trigger: 'blur',
                        validator: checkPrice,
                        message: '请输入正整数',
                    },
                ],
                discount: [
                    { required: true, message: '请填写', trigger: 'blur' },
                    {
                        required: true,
                        trigger: 'blur',
                        validator: checkPrice,
                        message: '请输入正整数',
                    },
                ],
                fullReduction: [
                    { required: true, message: '请填写', trigger: 'blur' },
                    {
                        required: true,
                        trigger: 'blur',
                        validator: checkPrice,
                        message: '请输入正整数',
                    },
                ],
                validity: [{ required: true, message: '请选择', trigger: ['change', 'blur'] }],
            },
            type: null,
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let formData = { ...this.addEditDialogForm };
                    if (formData.type === 1) {
                        delete formData.price;
                    } else {
                        delete formData.discount;
                        delete formData.fullReduction;
                        delete formData.validity;
                    }
                    console.log(formData);
                    if(parseInt(formData.discount) > parseInt(formData.fullReduction))
                    {
                        this.$message({
                            type: 'warning',
                            message: '折扣金额不能大于满减金额',
                        });
                    }
                    else{
                    if (this.type === 'add') {
                        formData.checkFalg = 2;
                        let message = '新增成功';
                        addCoupons(formData)
                            .then(res => {
                                this.completeOperation(message);
                            })
                            .catch();
                    }
                    if (this.type === 'edit') {
                        let data = {
                            id: formData.id,
                            name: formData.name,
                            type: formData.type,
                            scenario: formData.scenario,
                            price: formData.price || null,
                            discount: formData.discount || null,
                            fullReduction: formData.fullReduction || null,
                            validity: formData.validity || null,
                            statuz: formData.statuz,
                            checkFalg: formData.checkFalg,
                        };
                        console.log(data);
                        updateCouponsStatus(data)
                            .then(res => {
                                let message = '修改成功';
                                this.completeOperation(message);
                            })
                            .catch();
                    }
                    }
                } else {
                    return false;
                }
            });
        },
        open(type, data) {
            console.log(data);
            this.type = type;
            if (type === 'edit') {
                this.addEditDialogTitle = '编辑';
                this.addEditDialogForm = Object.assign({}, data);
            } else {
                this.addEditDialogTitle = '新增';
            }
            this.addEditDialogVisible = true;
        },
        close() {
            this.$refs['addEditDialogForm'].resetFields();
            this.addEditDialogVisible = false;
            this.addEditDialogForm = {};
        },
        completeOperation(message) {
            this.$message({
                type: 'success',
                message,
            });
            this.close();
            this.submitBtndisabled = false;
            this.$emit('queryListData');
        },
    },
};
</script>
<style lang="stylus" scoped>
.add-edit-dialog-container {
    .el-input {
        width: auto;
    }

    ::v-deep .el-input__inner {
        width: 200px;
    }
}
</style>
