<template>
    <div class="add-edit-dialog-container">
        <el-dialog
            :title="addEditDialogTitle"
            :visible.sync="addEditDialogVisible"
            width="600px"
            :before-close="close"
        >
            <el-form
                :model="addEditDialogForm"
                ref="addEditDialogForm"
                :rules="addEditDialogRules"
                label-width="90px"
            >
                <el-form-item label="赏金金额" prop="val">
                    <el-input placeholder="请输入内容" v-model="addEditDialogForm.val"></el-input>
                </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 { addDictionary, updateDictionary } from '@/apps/mobile/api/dictionary/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: {},
            submitBtndisabled: false,
            addEditDialogRules: {
                val: [
                    {
                        required: true,
                        message: '请填写赏金',
                        trigger: 'blur',
                    },
                    { validator: checkPrice, message: '请输入正整数', trigger: 'blur' },
                ],
            },
            type: null,
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let formData = {
                        ...this.addEditDialogForm,
                        field: 'reward',
                        tableName: 'reward_setting',
                    };
                    let message = '新增成功';
                    if (this.type === 'add') {
                        console.log(formData);
                        addDictionary(formData)
                            .then(res => {
                                this.completeOperation(message);
                            })
                            .catch(() => {
                                this.submitBtndisabled = false;
                            });
                    }
                    if (this.type === 'edit') {
                        let data = {
                            id: formData.id,
                            val: formData.val,
                            field: 'reward',
                            tableName: 'reward_setting',
                        };
                        console.log(data);
                        updateDictionary(data)
                            .then(res => {
                                this.completeOperation(message);
                            })
                            .catch(() => {
                                this.submitBtndisabled = false;
                            });
                    }
                } else {
                    return false;
                }
            });
        },
        open(type, data) {
            this.type = type;
            console.log(data);
            if (type === 'edit') {
                this.addEditDialogTitle = '编辑';
                this.addEditDialogForm = { ...data };
            } else {
                this.addEditDialogForm = {};
            }
            this.addEditDialogVisible = true;
        },
        close() {
            this.$refs['addEditDialogForm'].resetFields();
            this.addEditDialogVisible = false;
        },
        completeOperation(message) {
            this.$message({
                type: 'success',
                message,
            });
            this.close();
            this.submitBtndisabled = false;
            this.$emit('queryListData');
        },
    },
};
</script>
<style lang="stylus" scoped>
.add-edit-dialog-container {
    ::v-deep .el-input__inner {
        width: 200px;
    }
}
</style>
