<!--
    资源树
    @Author:laiyh
    @Date:  2020-09-23
-->
<template>
    <div class="u-tree__bar">
        <!--        右键可以打开菜单-->
        <!--        <dg-scrollbar>-->
        <!--            <dg-tree-->
        <!--                ref="tree"-->
        <!--                icon-class="el-icon-folder-opened"-->
        <!--                icon-leaf="el-icon-document"-->
        <!--                node-key="id"-->
        <!--                :data="source"-->
        <!--                :props="props"-->
        <!--                default-expand-all-->
        <!--                highlight-current-->
        <!--                :filter-node-method="filterNode"-->
        <!--                :expand-on-click-node="false"-->
        <!--                @node-contextmenu="rightClick"-->
        <!--            >-->
        <!--                <div slot-scope="{ node, data }" class="u-tree-label" style="width: 100%">-->
        <!--                    <p @dblclick="handlerNodeDoubleClick(data)" @click="handleNodeClick(data)">-->
        <!--                        {{ data[props.label] }}-->
        <!--                    </p>-->
        <!--                </div>-->
        <!--            </dg-tree>-->
        <!--        </dg-scrollbar>-->
        <!--todo 修改成无右键菜单-->
        <dg-scrollbar>
            <dg-tree
                ref="tree"
                icon-class="el-icon-folder-opened"
                icon-leaf="el-icon-document"
                node-key="id"
                :data="source"
                :props="props"
                default-expand-all
                highlight-current
                :filter-node-method="filterNode"
                :expand-on-click-node="false"
            >
                <div slot-scope="{ node, data }" class="u-tree-label el-tree-node__edit" style="width: 100%">
                    <span
                        @dblclick="handlerNodeDoubleClick(data)"
                        @click="handleNodeClick(data)"
                        style="display: inline-block;flex: 1;"
                    >
                        {{ data[props.label] }}
                    </span>
                    <span class="operation-icons">
                        <i class="el-icon-circle-plus-outline" @click="handleSelect('add', node, data)"> </i>
                        <i class="el-icon-delete" @click="handleSelect('delete', node, data)"> </i>
                    </span>
                </div>
            </dg-tree>
        </dg-scrollbar>
        <!--右键菜单-->
        <div v-show="menuVisible && isNeedRightMenu" id="menu_contain" class="tree-operation-box">
            <el-menu id="menu" @select="handleSelect" text-color="#000">
                <el-menu-item
                    v-for="(op, i) in treeRightOperations"
                    class="menuItem"
                    :key="'operator' + i"
                    :index="op.key"
                >
                    <span slot="title">{{ op.label }}</span>
                </el-menu-item>
            </el-menu>
            <!--<ul class="tree-operation-ul" @mouseleave="menuVisible = false">-->
            <!--<li v-for="(op, i) in treeRightOperations" :key="'operator' + i">-->
            <!--<p @click="op.on">{{ op.label }}</p>-->
            <!--</li>-->
            <!--</ul>-->
        </div>
    </div>
</template>

<script>
//  一次性请求数据源
import * as commonApi from "@/api/common";

let debounceTimer;
export default {
    name: "menuTree",
    // 接收父页面传过来的属性
    props: {
        title: String,
        apiName: {
            type: String,
            default: "menuTree"
        },
        isNeedRightMenu: {
            type: Boolean,
            default: false
        },
        reportForm: {
            type: Object,
            default: () => {}
        }
    },
    // 页面数据绑定
    data() {
        const that = this;
        return {
            timer: null,
            source: [],
            props: {
                value: "id",
                label: "name",
                children: "children"
            },
            menuVisible: false,
            treeRightOperations: [
                // {
                //     key: "addRootSource",
                //     label: "新增根资源",
                //     on: that.addRootSource
                // },
                {
                    key: "add",
                    label: "新增",
                    on: that.addSource
                },
                {
                    key: "delete",
                    label: "删除",
                    on: that.deleteSource
                }
            ],
            nodedata: null,
            Node: null
        };
    },
    // 计算属性
    computed: {},
    // 方法
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data[this.props.label].indexOf(value) !== -1;
        },

        handlerNodeDoubleClick(data) {
            const that = this;
            debounceTimer = that.timer;
            if (debounceTimer) {
                clearTimeout(debounceTimer);
                that.timer = null;
            }
            that.$emit("handleDoubleClick", data);
        },

        handleNodeClick(data) {
            const that = this;
            debounceTimer = that.timer;
            if (debounceTimer) {
                clearTimeout(debounceTimer);
                that.timer = null;
            }
            that.timer = setTimeout(() => {
                that.$emit("handleGetNode", data);
                that.menuVisible = false;
            }, 150);
        },
        setCurrentKey(id) {
            this.$nextTick(() => {
                const node = this.$refs.tree.getNode(id);
                if (!node) {
                    return;
                }
                this.$refs.tree.setCurrentKey(id);
                this.handleNodeClick(node.data);
            });
        },
        // 树节点右键
        rightClick(event, data, node, selfNode) {
            this.menuVisible = true; // 显示菜单
            this.nodedata = data; // 节点信息存下来
            this.Node = node;
            let menu = document.querySelector("#menu_contain");
            let x = event.pageX || event.clientX,
                y = event.pageY || event.clientY;
            // menu.style.cssText =
            //     "position:fixed;left:" + (event.pageX + 10) + "px" + ";top:" + (event.pageY + 10) + "px";
            menu.style.position = "fixed";
            menu.style.left = x + "px";
            menu.style.top = y + "px";
            document.addEventListener("click", this.Listen); // 监听鼠标事件
        },
        Listen() {
            this.menuVisible = false;
            document.removeEventListener("click", this.Listen); // 监听鼠标事件
        },
        handleSelect(val, node, data) {
            console.log(val);
            this.Node = node;
            this.nodedata = data;
            this.$emit("selectOperaOptions", { type: val, nodedata: this.nodedata, node: this.Node });
        },
        remove() {
            const node = this.Node;
            const parent = node.parent;
            const data = this.nodedata;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.id === data.id);
            children.splice(index, 1);
        }
    },
    // 创建组件时调用
    created() {
        const that = this;
        const { reportForm } = that;
        commonApi[that.apiName](reportForm)
            .then(res => {
                that.source = res;
                that.setCurrentKey(res[0].id || "");
            })
            .catch(() => {
                that.source = [];
            });
    }
};
</script>

<style scoped lang="scss">
.tree-operation-box {
    /*border: 1px solid darkcyan;*/
    background-color: #00adff;
    width: 100px;
    position: absolute;
    color: #fff;

    ul {
        list-style: none;

        li {
            width: 100%;
            cursor: pointer;
            color: #fff;
            line-height: 40px;
            height: 40px;
            text-align: center;
            font-size: 14px;
            border-bottom: 1px solid #fff;

            &:last-child {
                border-bottom: none;
            }
        }
    }
}

.u-tree__bar {
    height: 550px;
    .el-tree-node__edit {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 20px;
        i {
            color: #1890ff;
        }
        .operation-icons {
            display: none;
        }
        &:hover .operation-icons {
            display: block;
        }
    }
}
/deep/ .el-tree {
    margin-bottom: 10px;
}
</style>
