<template>
    <el-dialog
        :title="title"
        :close-on-click-modal="false"
        :visible.sync="visible"
        :before-close="close"
        width="700px"
    >
        <el-form :model="formData" ref="formData" :rules="rules">
            <el-form-item label="特权名称:">
                <el-input
                    v-model="formData.prerogative"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="特权描述:">
                <el-input
                    v-model="formData.descr"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="特权用户:">
                <template>
                    <el-checkbox-group v-model="formData.scenario">
                        <el-checkbox
                            :label="item.id"
                            v-for="item in leveList"
                            :key="item.id"
                            >{{ item.name }}</el-checkbox
                        >
                    </el-checkbox-group>
                </template>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button
                type="primary"
                @click="submit('save')"
                :disabled="submitBtndisabled"
                v-if="type === 'add'"
                >保 存</el-button
            >
            <el-button
                type="primary"
                @click="submit('add')"
                :disabled="submitBtndisabled"
                >{{ type === "edit" ? "确定" : "提交" }}</el-button
            >
        </div>
    </el-dialog>
</template>
<script>
import {
    addData,
    editData,
    addDataSave
} from "@/apps/mobile/api/operation/privilege/index";
export default {
    data() {
        return {
            type: null,
            title: "新增特权",
            visible: false,
            formData: { scenario: [] },
            leveList: [],
            submitBtndisabled: false,
            rules: {
                taxName: [
                    { required: true, message: "请输入税目", trigger: "blur" }
                ],
                taxRate: [
                    { required: true, message: "请输入税率", trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        open(leveList, type, data) {
            this.type = type;
            console.log(leveList,'titleList');
            
            this.leveList = leveList;
            this.leveList.forEach(item=>{
                item.key = Number(item.key)
            })
            if (type === "edit") {
                this.title = "编辑";
                data.scenario = data.scenario.map(item => {
                    return Number(item);
                });
                this.formData = { ...data };
                console.log(this.formData, "this.formData");
            } else {
                this.title = "新增";
            }
            this.visible = true;
        },
        close() {
            //   this.$emit("close", "visible");
            this.visible = false;
            this.formData = { scenario: [] };
        },
        submit(type) {
            this.submitBtndisabled = true;
            let message = "";
            let obj1 = {
                scenario: this.formData.scenario.join()
            };
            let obj = Object.assign(this.formData, obj1);

            // console.log(obj, "obj");
            if (this.type === "add") {
                if (type === "save") {
                    addDataSave(obj)
                        .then(() => {
                            message = "保存成功";
                            this.completeOperation(message);
                        })
                        .catch(() => {
                            this.submitBtndisabled = false;
                        });
                } else {
                    addData(obj)
                        .then(() => {
                            message = "新增成功";
                            this.completeOperation(message);
                        })
                        .catch(() => {
                            this.submitBtndisabled = false;
                        });
                }
            } else {
                // console.log(this.formData,'ddd');
                let editObj = {
                    id: obj.id,
                    scenario: obj.scenario,
                    prerogative: obj.prerogative,
                    descr: obj.descr
                };
                // console.log(editObj,'editObj');
                message = "编辑成功";
                editData(editObj)
                    .then(() => {
                        this.completeOperation(message);
                    })
                    .catch(() => {
                        this.submitBtndisabled = false;
                    });
            }
        },

        /**
         * 将新增、编辑操作完成之后共同需要调用的方法放在此函数里面
         * @param {String} message 提示信息
         */
        completeOperation(message) {
            this.$message({
                type: "success",
                message
            });
            this.close();
            this.submitBtndisabled = false;
            this.$emit("queryListData");
        }
    }
};
</script>
<style scoped>
::v-deep .el-textarea__inner {
    min-height: 200px !important;
}
.el-input {
    width: auto;
}
</style>