<template>
    <el-dialog
        :title="title"
        :close-on-click-modal="false"
        :visible.sync="visible"
        :before-close="close"
        width="600px"
    >
        <el-form :model="formData" ref="formData" :rules="rules" label-width="120px">
            <el-form-item label="一级返利:" prop="rebate1">
                <el-input v-model="formData.rebate1"></el-input>
            </el-form-item>
            <el-form-item label="二级返利:" prop="rebate2">
                <el-input v-model="formData.rebate2"></el-input>
            </el-form-item>
            <el-form-item label="app用户类型:" prop="roleId">
                <el-select v-model="formData.roleId" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submitForm" :disabled="submitBtndisabled">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { validDecimal } from '@/apps/mobile/utils/validate';
import { addRebateRule, updateRebateRule, queryRoleList } from '@/apps/mobile/api/operation/rebate/index';
export default {
    data() {
        var checkNum = (rule, value, callback) => {
            if (value && !validDecimal(value)) {
                callback(new Error('格式不正确'));
            } else {
                callback();
            }
        };
        return {
            title: '新增',
            type: null,
            formData: {},
            visible: false,
            submitBtndisabled: false,
            rules: {
                rebate1: [
                    { required: true, message: '请输入', trigger: 'blur' },
                    { validator: checkNum, message: '请输入正确的数值', trigger: 'blur' },
                ],
                rebate2: [
                    { required: true, message: '请输入', trigger: 'blur' },
                    { validator: checkNum, message: '请输入正确的数值', trigger: 'blur' },
                ],
                roleId: [{ required: true, message: '请选择', trigger: 'change' }],
            },
            options: [],
        };
    },
    methods: {
        close() {
            this.type = null;
            this.formData = {};
            this.$refs['formData'].resetFields();
            this.visible = false;
        },
        open(type, data) {
            this.type = type;
            console.log(data);
            this.getRoleList();
            if (type === 'edit') {
                this.title = '编辑';
                this.formData.roleId = data.roleId;
                this.formData = Object.assign({}, data);
            } else {
                this.title = '新增';
                this.formData = {};
            }
            this.visible = true;
        },
        submitForm() {
            this.$refs['formData'].validate(valid => {
                if (valid) {
                    let obj = { ...this.formData };
                    console.log(obj);
                    if (this.type === 'add') {
                        addRebateRule(obj)
                            .then(res => {
                                if (res.statusCode == '1') {
                                    this.completeOperation(res.message);
                                } else {
                                    this.$message({
                                        type: 'warning',
                                        message: res.message,
                                    });
                                }
                            })
                            .catch(() => {});
                    }
                    if (this.type === 'edit') {
                        let editObj = {
                            id: obj.id,
                            rebate1: obj.rebate1,
                            rebate2: obj.rebate2,
                            roleId: obj.roleId,
                        };
                        console.log(editObj);
                        updateRebateRule(editObj)
                            .then(res => {
                                if (res.statusCode == '1') {
                                    this.completeOperation(res.message);
                                } else {
                                    this.$message({
                                        type: 'warning',
                                        message: res.message,
                                    });
                                }
                            })
                            .catch(() => {});
                    }
                }
            });
        },
        getRoleList() {
            queryRoleList()
                .then(res => {
                    console.log(res);
                    this.options = res;
                })
                .catch();
        },
        completeOperation(message) {
            this.$message({
                type: 'success',
                message,
            });
            this.close();
            this.submitBtndisabled = false;
            this.$emit('queryListData');
        },
    },
};
</script>
<style lang="stylus" scoped>
::v-deep .el-textarea__inner {
    min-height: 200px !important;
}

.el-input {
    width: auto;
}

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