<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="100px">
            <el-form-item label="税目:" prop="taxName">
                <el-input placeholder="请输入" v-model="formData.taxName"></el-input>
            </el-form-item>
            <el-form-item label="税率:" prop="taxRate">
                <el-input placeholder="请输入" v-model="formData.taxRate"></el-input>%
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close" title="primary">关闭</el-button>
            <el-button title="primary" @click="submitForm">确定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { editData, addData } from '@/apps/mobile/api/operation/taxRate/index';
import { validWithoutZero } from '@/apps/mobile/utils/validate';
export default {
    data() {
        // 正整数校验
        var checkNum = (rule, value, callback) => {
            if (value && !validWithoutZero(value)) {
                callback(new Error('格式不正确'));
            } else {
                callback();
            }
        };
        return {
            type: null,
            title: '新增',
            checkList: [1],
            formData: {},
            visible: false,
            rules: {
                taxName: [
                    { required: true, message: '请输入税目', trigger: 'blur' },
                    { max: 30, message: '长度最大30个字符', trigger: 'blur' },
                ],
                taxRate: [
                    { required: true, message: '请输入税率', trigger: 'blur' },
                    { validator: checkNum, message: '请输入正确的税率', trigger: 'blur' },
                ],
            },
        };
    },
    methods: {
        close() {
            this.$refs['formData'].resetFields();
            this.formData = {};
            this.visible = false;
        },
        open(type, data) {
            this.type = type;
            if (type === 'edit') {
                this.formData = { ...data };
                this.title = '编辑';
            } else {
                this.title = '新增';
                // console.log(this.formData,'formData');
            }
            this.visible = true;
        },
        /**
         * 将新增、编辑操作完成之后共同需要调用的方法放在此函数里面
         * @param {String} message 提示信息
         */
        completeOperation(message) {
            this.$message({
                type: 'success',
                message,
            });
            this.close();
            this.submitBtndisabled = false;
            this.$emit('queryListData');
        },
        submitForm() {
            this.$refs['formData'].validate(valid => {
                if (valid) {
                    // this.submitBtndisabled = true;
                    let message = '';
                    console.log(this.formData, 'this.formData');
                    let obj = { ...this.formData };
                    if (this.type === 'add') {
                        message = '新增成功';
                        //obj.createBy = 0  //创建者ID
                        addData(obj)
                            .then(res => {
                                this.completeOperation(message);
                            })
                            .catch(err => err);
                    }
                    if (this.type === 'edit') {
                        message = '修改成功';
                        let editObj = {
                            id: obj.id,
                            taxName: obj.taxName,
                            taxRate: obj.taxRate,
                            //updateBy: 0 //编辑者ID
                        };
                        // console.log(editObj, 'editObj');
                        editData(editObj)
                            .then(() => {
                                this.completeOperation(message);
                            })
                            .catch(err => err);
                    }
                }
            });
        },
    },
};
</script>
<style scoped>
::v-deep .el-textarea__inner {
    min-height: 200px !important;
}
.el-input {
    width: auto;
}
</style>