<template>
    <div class="add-edit-dialog-container">
        <el-dialog
            :title="addEditDialogTitle"
            :visible.sync="addEditDialogVisible"
            width="400px"
            :before-close="close"
        >
            <el-form
                :model="addEditDialogForm"
                ref="addEditDialogForm"
                :rules="addEditDialogRules"
                label-width="90px"
            >
                <el-form-item label="菜单名称" prop="name">
                    <el-input placeholder="请输入内容" v-model="addEditDialogForm.name"></el-input>
                </el-form-item>
                <el-form-item label="菜单路由" prop="router" v-if="addEditDialogForm.parentId !==1">
                    <el-input
                        placeholder="请输入内容"
                        v-model="addEditDialogForm.router"
                    ></el-input>
                </el-form-item>
                <el-form-item label="父级菜单" prop="parentId">
                    <el-cascader
                        class="casc"
                        :props="propsOptions"
                        :options="options"
                        v-model="addEditDialogForm.parentId"
                        @change="changeCascader"
                        clearable
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="图片" prop="image" class="plate-icon pic">
                    <Upload
                        :fileList="fileList"
                        @changeUploadFile="changeUploadFile"
                        @validateUpload="validateUpload"
                        :limitUpload="1"
                        :maximumSize="maximumSize"
                        :uploadType="1"
                        ref="upload"
                    ></Upload>
                </el-form-item>
                <el-form-item label="描述" prop="descr">
                    <el-input placeholder="请输入" v-model="addEditDialogForm.descr" type="textarea"></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 { toTree } from '@/apps/mobile/utils/util';
import Upload from '@/apps/mobile/components/uploadAuto/index';
import { addAppMenu, queryAllParent, editAppmenus} from '@/apps/mobile/api/authority/index';
export default {
    components: {
        Upload,
    },
    data() {
        return {
            addEditDialogVisible: false,
            addEditDialogTitle: '新增',
            addEditDialogForm: {
                name: '',
                router: '',
                parentId: '',
                descr: '',
                file: null
            },
            submitBtndisabled: false,
            addEditDialogRules: {
                name: [
                    {
                        required: true,
                        message: '请填写菜单名称',
                        trigger: 'blur',
                    },
                    { max: 30, message: '长度最大30个字符', trigger: 'blur' },
                ],
                router: [
                    {
                        required: true,
                        message: '请填写菜单路由',
                        trigger: 'blur',
                    },
                    { max: 30, message: '长度最大30个字符', trigger: 'blur' },
                ],
                parentId: [
                    {
                        required: true,
                        message: '请选择父级菜单',
                        trigger: 'change',
                    },
                ],
            },
            fileList: [], // 图片列表
            maximumSize: 3, //图片大小不超过3MB
            type: null,
            propsOptions: {
                checkStrictly: true,
                value: 'id',
                label: 'name',
                children: 'appmenu',
                leaf: 'hasChildren',
            },
            options: [],
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.submitBtndisabled = true;
                    let image = null;
                    if (this.fileList.length > 0) {
                        image = this.fileList[0].response.data.pathUrl;
                    }
                    let obj = Object.assign({ ...this.addEditDialogForm, image });
                    console.log(obj, 'obj');

                    if (this.type === 'add') {
                        let addEditDialogForm = {
                            ...this.addEditDialogForm,
                        };
                        let message = '新增成功';
                        addAppMenu(addEditDialogForm)
                            .then(res => {
                                this.completeOperation(message);
                            })
                            .catch(() => {
                            this.submitBtndisabled = false;
                            });
                    }
                    if (this.type === 'edit') {
                        let message = '修改成功';
                        let editObj = {
                            id: obj.id,
                            name: obj.name,
                            router: obj.router,
                            parentId: obj.parentId,
                            image: obj.image,
                            descr: obj.descr,
                        };
                        editAppmenus(editObj)
                            .then(() => {
                                this.completeOperation(message);
                            })
                            .catch(err => err);
                    }
                } else {
                    return false;
                }
            });
        },
        changeCascader(node) {
            this.addEditDialogForm.parentId = node[0];
            if (this.addEditDialogForm.parentId === 1) {
                this.addEditDialogForm.router = '';
            }
        },
        getAllParent() {
            queryAllParent()
                .then(res => {
                    this.options = res.data;
                })
                .catch();
        },
        open(type, data) {
            this.type = type;
            let obj1 = {
                file: null,
            };
            if (type === 'edit') {
                this.title = '编辑';

                if (data.image) {
                    obj1.file = true;
                    let url = data.image;
                    let obj = {
                        name: '',
                        url,
                        response: {
                            data: { pathUrl: data.image },
                        },
                    };
                    this.fileList.push(obj);
                }
                this.addEditDialogForm = Object.assign({ ...data, ...obj1 });
                console.log(this.addEditDialogForm, 'this.addEditDialogForm');
            } else {
                this.title = '新增';
                this.addEditDialogForm = obj1;
                this.addEditDialogForm = {
                    parentId: null,
                };
            }
            this.getAllParent();
            this.addEditDialogVisible = true;
        },
        close() {
            this.$refs['addEditDialogForm'].resetFields();
            this.addEditDialogVisible = false;
            this.submitBtndisabled = false;
            this.type = null;
            this.$refs.upload.clearFiles(); // 清空已上传的文件列表
            this.fileList = [];
        },
        completeOperation(message) {
            this.$message({
                type: 'success',
                message,
            });
            this.close();
            this.submitBtndisabled = false;
            this.$emit('queryListData');
        },
        /**
         * 手动验证upload、更新选择完成的图片数据
         * @param {Object} data: fileList是上传的图片数据 validateValues为true时说明有上传图片 为null时无上传图片
         */
        validateUpload(data) {
            this.changeUploadFile(data.fileList);
            this.addEditDialogForm.file = data.validateValues;
            this.$refs['addEditDialogForm'].validateField('file');
        },
        changeUploadFile(fileList) {
            this.fileList = fileList;
            console.log(this.fileList, 'this.fileList');
        },
    },
    watch: {
        fileList(val) {
            this.$nextTick(() => {
                this.$refs.upload.changeHideUpload();
            });
        },
    },
};
</script>
<style lang="stylus" scoped>
.add-edit-dialog-container {
    ::v-deep .el-input__inner {
        width: 200px;
    }
}
</style>
