<template>
    <div class="container">
        <div class="main-box container-box">
            <div class="inner-left" style="overflow: hidden">
                <div class="button-list">
                    <el-button type="primary" @click="addMenu" plain>添加子菜单</el-button>
                    <el-button type="primary" @click="delMenu" plain>删除</el-button>
                    <el-dropdown @command="treeAction" trigger="click" style="margin-left: 15px">
                        <el-button type="primary" plain>
                            树操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="1">全部展开</el-dropdown-item>
                            <el-dropdown-item :command="2">全部关闭</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="choice-style">
                    <div class="ant-alert-info ant-alert">
                        <i style="color: #1890ff" class="el-icon-warning"></i>当前选择：{{
              actionName
            }}
                        <span class="canel-style" @click="canelChoice" v-show="actionName">取消选择</span>
                    </div>
                </div>
                <div style="margin: 10px 0">
                    <el-input placeholder="请输入内容" v-model="filterText" class="input-with-select" clearable @change="
              () => {
                if (!filterText) {
                  searchMenu();
                }
              }
            ">
                        <el-button slot="append" @click="searchMenu" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
                <div v-loading="loading" style="height: calc(100% - 200px);overflow-y: scroll;">
                    <el-tree ref="tree" class="tree-line" :expand-on-click-node="true" :auto-expand-parent="true"
                        :default-expand-all="true" :default-checked-keys="checkedMenu" :data="menuList" @check="checkChange"
                        @node-click="nodeClick" :filter-node-method="filterNode" node-key="functionCode">
                        <span class="custom-tree-node" slot-scope="{ node }">
                            <span>
                                <span v-if="
                    node.data.hasOwnProperty('children') &&
                    node.data.children.length > 0
                  "
                                    style="color: #009cff" class="iconfont icon-wenjianjia"></span>
                                <span v-else style="color: #fdb441" class="iconfont icon-wenjian"></span>
                                <span :style="
                    node.data.hasOwnProperty('parent')
                      ? 'font-size:14px;padding-left:5px'
                      : 'font-size:12px;padding-left:5px'
                  ">{{ node.data.functionName }}</span>
                            </span>
                        </span>
                    </el-tree>
                </div>
                <div class="tree-action"></div>
            </div>
            <div class="inner-right">
                <div v-if="actionName">
                    <div class="choice-style" style="width: 80%; margin: 15px auto">
                        <div class="ant-alert-info ant-alert">
                            <i style="color: #1890ff" class="el-icon-warning"></i>请编辑信息
                        </div>
                    </div>
                    <p-form ref="pForm" @closeDialog="closeDialog" :formData="formData" :form="form"></p-form>
                </div>
                <div v-else style="text-align: center">
                    <img src="../../../assets/404.png" alt="" />
                    <div>请先选择一个菜单</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import pForm from "../../../components/p-form";
    export default {
        components: {
            pForm,
        },
        data() {
            return {
                loading: false,
                defaultExpand: true,
                functionCode: "",
                filterText: "", // tree搜索value
                actionName: "", // 当前选择节点名称
                menuList: [], // tree数据源
                checkedMenu: [], // 选中节点的functionCode
                checkedNodes: [], // 选中节点的node值
                roleData: "", // 某一条数据
                formData: {
                    functionCode: "",
                    functionName: "",
                    jspUrl: "",
                    moduleName: "",
                    parentCode: "",
                    parentName: "",
                    tId: "",
                    validFlag: "",
                    validFlagName: "",
                    systemflag: "",
                    systemflagName: "",
                },
                form: {
                    subBtn: "修改", // 提交按钮名称
                    restBtn: "取消", // 取消按钮名称
                    action: true, // 是否需要form默认提交取消按钮
                    formName: "ruleForm", // ref
                    labelWidth: "80px", // 标题宽
                    formStyle: "width: 80%; margin: 50px auto",
                    initUrl: "/sysmgr/sys/func/updateCFunc", // 初始化接口
                    url: "/sysmgr/sys/func/updateCFunc", // 提交接口
                    id: "", // 编辑时用的id 由初始化时获取
                    type: "post", // 请求方式
                    params: "", // get请求桉树
                    events: function() {
                        // 回调方法
                        //   $vm.$router.push("/leader");
                    },
                    body: [
                        // 渲染表单
                        {
                            el: "input", //  dom类型
                            placeholder: "请输入菜单编码", // 提示语
                            label: "菜单编码", // 表单title
                            value: "functionCode", // 表单model绑定的值
                            disabled: true,
                            clearable: true,
                            rules: [
                                // 校验
                                {
                                    required: true,
                                    message: "请输入菜单编码",
                                    trigger: "blur"
                                },
                            ],
                        },
                        {
                            el: "input", //  dom类型
                            placeholder: "请输入菜单名称", // 提示语
                            label: "菜单名称", // 表单title
                            value: "functionName", // 表单model绑定的值
                            disabled: false,
                            clearable: true,
                            rules: [
                                // 校验
                                {
                                    required: true,
                                    message: "请输入菜单名称",
                                    trigger: "blur"
                                },
                            ],
                        },
                        {
                            el: "input", //  dom类型
                            placeholder: "请输入父级编码", // 提示语
                            label: "父级编码", // 表单title
                            value: "parentCode", // 表单model绑定的值
                            disabled: false,
                            clearable: true,
                            rules: [
                                // 校验
                                {
                                    required: true,
                                    message: "请输入父级编码",
                                    trigger: "blur"
                                },
                            ],
                        },
                        {
                            el: "input", //  dom类型
                            placeholder: "请输入父级名称", // 提示语
                            label: "父级名称", // 表单title
                            value: "parentName", // 表单model绑定的值
                            disabled: true,
                            clearable: true,
                            rules: [
                                // 校验
                                {
                                    required: false,
                                    message: "请输入父级名称",
                                    trigger: "blur"
                                },
                            ],
                        },
                        {
                            el: "select", //  dom类型
                            placeholder: "请选择状态", // 提示语
                            label: "状态", // 表单title
                            value: "validFlag", // 表单model绑定的值
                            disabled: false,
                            clearable: true,
                            options: [{
                                    label: "是",
                                    value: "Y",
                                    disabled: false,
                                },
                                {
                                    label: "否",
                                    value: "N",
                                    disabled: false,
                                },
                            ],
                            rules: [
                                // 校验
                                {
                                    required: true,
                                    message: "请选择状态",
                                    trigger: "blur"
                                },
                            ],
                        },
                        {
                            el: "select", //  dom类型
                            placeholder: "请选择菜单类型", // 提示语
                            label: "菜单类型", // 表单title
                            value: "systemflag", // 表单model绑定的值
                            disabled: false,
                            clearable: true,
                            options: [{
                                    label: "菜单",
                                    value: "0",
                                    disabled: false,
                                },
                                {
                                    label: "按钮",
                                    value: "1",
                                    disabled: false,
                                },
                                {
                                    label: "首页",
                                    value: "2",
                                    disabled: false,
                                },
                            ],
                            rules: [
                                // 校验
                                {
                                    required: true,
                                    message: "请选择菜单类型",
                                    trigger: "blur"
                                },
                            ],
                        },
                        {
                            el: "input", //  dom类型
                            placeholder: "请输入请求地址", // 提示语
                            label: "请求地址", // 表单title
                            value: "jspUrl", // 表单model绑定的值
                            disabled: false,
                            clearable: true,
                            rules: [
                                // 校验
                                {
                                    required: true,
                                    message: "请输入请求地址",
                                    trigger: "blur"
                                },
                            ],
                        },
                        {
                            el: "input", //  dom类型
                            placeholder: "请输入模块名称", // 提示语
                            label: "模块名称", // 表单title
                            value: "moduleName", // 表单model绑定的值
                            disabled: false,
                            clearable: true,
                            rules: [
                                // 校验
                                {
                                    required: false,
                                    message: "请输入模块名称",
                                    trigger: "blur"
                                },
                            ],
                        },
                    ],
                },
            };
        },
        methods: {
            addMenu() {
                if (!this.functionCode) {
                    this.$message("请先点击选中要增加菜单的位置");
                } else {
                    this.form.subBtn = "保存";
                    this.formData.parentCode = this.formData.functionCode;
                    this.formData.parentName = this.formData.functionName;
                    this.formData.functionName = "";
                    this.formData.jspUrl = "";
                    this.formData.moduleName = "";
                    this.formData.validFlag = "";
                    this.formData.functionCode = "new" + Date.parse(new Date());
                }
            },
            treeAction(val) {
                val == 1 ? (this.defaultExpand = true) : (this.defaultExpand = false);
                for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
                    this.$refs.tree.store._getAllNodes()[i].expanded = this.defaultExpand;
                }
            },
            canelChoice() {
                this.actionName = "";
                this.functionCode = "";
                this.formData = {};
            },
            delMenu() {
                if (!this.functionCode) {
                    this.$message("请先点击选中要删除的菜单");
                } else {
                    this.$confirm("即将删除此条数据, 是否删除?", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        })
                        .then(() => {
                            this.$http({
                                url: "/sysmgr/sys/func/del",
                                method: "post",
                                headers: {
                                    "Content-Type": "application/json",
                                },
                                data: {
                                    functionCode: this.functionCode
                                },
                            }).then((res) => {
                                if (res.data.result == 0) {
                                    this.$notify({
                                        title: "成功",
                                        message: res.data.desc,
                                        type: "success",
                                    });
                                    this.actionName = "";
                                    this.getTreeData({});
                                }
                            });
                        })
                        .catch(() => {});
                }
            },
            // 添加一级菜单
            firstMenu() {},
            // 搜索按钮事件
            searchMenu() {
                this.$refs.tree.filter(this.filterText);
            },
            // tree过滤方法
            filterNode(value, data) {
                if (!value) return true;
                return data.functionName.indexOf(value) !== -1;
            },
            // 点击树节点事件
            nodeClick(a, b, c, d) {
                this.form.subBtn = "修改";
                let nodeData = JSON.parse(JSON.stringify(b.data));
                nodeData.parentName = b.parent.data.functionName;
                this.formData = nodeData;
                delete Object["children"];
                this.actionName = nodeData.functionName;
                this.functionCode = nodeData.functionCode;
            },
            closeDialog() {
                this.actionName = "";
                this.getTreeData({});
            },
            // 树形图 复选框监听事件
            checkChange(a, b, c, d) {
                this.checkedNodes = b.checkedNodes;
            },
            // 格式化树形图数据
            formatterData(data) {
                var arr = [];
                var _this = this;
                data.map((o) => {
                    var obj1 = {};
                    if (o.systemflag !== "1") {
                        if (o.parentCode) {
                            var cvTag = o.parentCode == "99998";
                        } else {
                            cvTag = false;
                        }
                        if (cvTag) {
                            //判断是否是第一层
                            obj1 = o;
                            obj1.icon = o.icon || "layui-icon layui-icon-ok-circle";
                            obj1.target = "_self";
                            obj1.checked = o.checked;
                            obj1.parent = "1";
                            obj1.children = menuSon(o.functionCode);
                            arr.push(obj1);
                        }
                    }
                });

                function menuSon(id) {
                    var arr1 = [];
                    data.map((o) => {
                        var obj1 = {};
                        var myId = o.functionCode;
                        if (o.parentCode == id) {
                            //找到是父亲的儿子数据
                            obj1 = o;
                            obj1.target = "_self";
                            var tag = sonIs(myId); //判断是否有儿子
                            if (tag) {
                                //有儿子
                                obj1.children = menuSon(myId); //调用孙生成节点函数
                            } else {
                                obj1.children = "";
                            }
                            arr1.push(obj1);
                        }
                    });
                    return arr1;
                }

                function sonIs(id) {
                    //查找是否有儿子
                    var tag = false;

                    data.map((o) => {
                        if (o.parentCode == id) {
                            tag = true;
                        }
                    });
                    return tag;
                }
                this.menuList = arr;
                this.menuStatus = true;
                this.loading = false;
            },
            getTreeData(data) {
                this.loading = true;
                this.$http({
                    url: "/sysmgr/sys/func/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: data,
                }).then((res) => {
                    this.formatterData(res.data);
                });
            },
        },
        mounted() {
            this.getTreeData({});
        },
    };
</script>
<style lang="scss" scoped>
    .container {
        background-color: #f0f2f5;

        .el-col {
            background-color: white;
            padding: 0 20px;
        }

        .container-box {
            padding: 0;
            margin-top: 0;
            height: 100%;
        }

        .main-box {
            overflow: hidden;
            display: flex;

            >div {
                background-color: white;
            }

            .inner-left {
                width: 40%;
                padding: 0 20px;

                .canel-style {
                    color: #1890ff;
                    cursor: pointer;
                    padding-left: 10px;
                }
            }

            .inner-right {
                width: 58%;
                margin-left: 2%;
                overflow-y: auto;
            }
        }
    }

    .el-button+.el-button {
        margin-left: 20px;
    }

    .button-list {
        padding: 30px 0 10px 0;
    }

    .choice-style {
        background: rgb(255, 255, 255);
    }

    .tree-action {
        bottom: 0;
        width: 100%;
        // border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: left;
        left: 0;
        background: #fff;
        border-radius: 0 0 2px 2px;
    }

    .tree-line {
        .el-tree-node__content {
            padding-left: 0 !important;
        }

        .el-tree-node__expand-icon.is-leaf {
            display: none !important;
        }

        .el-tree-node {
            position: relative;
            padding-left: 16px; // 缩进量
        }

        .el-tree-node__children {
            padding-left: 16px; // 缩进量
        }

        // 竖线
        .el-tree-node::before {
            content: "";
            height: 100%;
            width: 1px;
            position: absolute;
            left: -3px;
            top: -17px;
            border-width: 1px;
            border-left: 1px dashed #52627c;
        }

        // 当前层最后一个节点的竖线高度固定
        .el-tree-node:last-child::before {
            height: 38px; // 可以自己调节到合适数值
        }

        // 横线
        .el-tree-node::after {
            content: "";
            width: 24px;
            height: 20px;
            position: absolute;
            left: -3px;
            top: 20px;
            border-width: 1px;
            border-top: 1px dashed #52627c;
        }

        // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
        &>.el-tree-node::after {
            border-top: none;
        }

        &>.el-tree-node::before {
            border-left: none;
        }

        // 展开关闭的icon
        .el-tree-node__expand-icon {
            font-size: 16px;

            // 叶子节点（无子节点）
            &.is-leaf {
                color: transparent;
                // display: none; // 也可以去掉
            }
        }
    }

    .ant-alert-info {
        background-color: #e6f7ff;
        border: 1px solid #91d5ff;
    }

    .ant-alert {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: rgb(0, 0, 0);
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5;
        list-style: none;
        font-feature-settings: "tnum";
        position: relative;
        padding: 8px 15px 8px 37px;
        word-wrap: break-word;
        border-radius: 4px;
    }
</style>
