<template>

    <!-- @mousedown.stop  阻止冒泡事件-->

    <!-- @contextmenu.prevent 阻止右键的默认事件 -->

    <div id="dropMenu"

         :style="style"

         style="display: block;"

         v-show="show"

         @mousedown.stop

         @contextmenu.prevent>

        <slot></slot>

    </div>

</template>

<script>

    export default {

        name:"menuContext",

        data() {

            return {

                triggerShowFn: () => {

                },

                triggerHideFn: () => {

                },

                x: null,

                y: null,

                style: {},

                binded: false

            }

        },

        props: {

            target: null,

            show: Boolean

        },

        mounted() {

            this.bindEvents()

        },

        watch: {

            show(show) {

                if (show) {

                    this.bindHideEvents()

                } else {

                    this.unbindHideEvents()

                }

            },

            target(target) {

                this.bindEvents()

            }

        },

        methods: {

            // 初始化事件

            bindEvents() {

                this.$nextTick(() => {

                    var that = this

                    if (!this.target || this.binded) return

                    this.triggerShowFn = this.contextMenuHandler.bind(this)

                    this.target.addEventListener('contextmenu', this.triggerShowFn)

                    //this.binded = true

                })

            },

            // 取消绑定事件

            unbindEvents() {

                if (!this.target) return

                this.target.removeEventListener('contextmenu', this.triggerShowFn)

            },

            // 绑定隐藏菜单事件

            bindHideEvents() {

                this.triggerHideFn = this.clickDocumentHandler.bind(this)

                document.addEventListener('mousedown', this.triggerHideFn)

                document.addEventListener('mousewheel', this.triggerHideFn)

            },

            // 取消绑定隐藏菜单事件

            unbindHideEvents() {

                document.removeEventListener('mousedown', this.triggerHideFn)

                document.removeEventListener('mousewheel', this.triggerHideFn)

            },

            // 鼠标按压事件处理器

            clickDocumentHandler(e) {

                this.$emit('update:show', false) //隐藏

            },

            // 右键事件事件处理

            contextMenuHandler(e) {

                e.target.click()//这个是因为我需要获取tree节点的数据，所以我通过点击事件去获取数据

                this.x = e.clientX - 240

                this.y = e.clientY - 110

                this.layout()

                this.$emit('update:show', true)  //显示

                e.preventDefault()

                e.stopPropagation()

                this.$emit('targetElement', e.target) //我还要获取右键的DOM元素进行操作

            },

            // 布局

            layout() {

                this.style = {

                    left: this.x + 'px',

                    top: this.y + 'px'

                }

            }

        }

    }

</script>

<style lang="scss">

    #dropMenu {

        position: absolute;

        margin: 0;

        padding: 0;

        width: 80px;

        height: auto;

        border: 1px solid #ccc;

        border-radius: 4px;

        ul {

            list-style: none;

            margin: 0;

            padding: 0;

            li {

                width: 100%;

                text-align: center;

                height: 30px;

                line-height: 30px;

                background: #eee;

                margin-bottom: 1px;

                cursor: pointer;

            }

        }

    }

</style>

<template>

    <div class="app-container">

        <h2>当前目录:</h2>

        <h4>{{ current_path }}</h4>

        <el-input

                placeholder="输入关键字进行过滤"

                v-model="filterText">

        </el-input>

        <!-- 树形结构 -->

        <el-tree

                id="modelTree"

                ref="tree"

                :data="treedata"

                :props="defaultProps"

                class="filter-tree"

                accordion

                node-key="id"

                :filter-node-method="filterNode"

        >

        </el-tree>

        <!-- 右键菜单 -->

        <menu-context

                :target="contextMenuTarget"

                :show="isShowDrop"

                @update:show="(show) => isShowDrop = show"

                @targetElement="getTargetElement">

            <ul>　　　　　　　　<!--按需展示按钮-->

                <li v-show="isShowDelete" @click="deleteOne">删除</li>

                <li v-show="isShowAdd" @click="add">添加</li>

                <li v-show="isShowEdit" @click="editNode">编辑</li>

                <li v-show="isShowLink" @click="linkModels">关联</li>

                <li v-show="isShowMove" @click="move">转移</li>

            </ul>

        </menu-context>

        <el-dialog

                :title="textMap[dialogStatus]"

                :visible.sync="dialogFormVisible"

                :close-on-click-modal="false"

                width="70%"

                top="5vh"

                @open="resetForm('dataForm')"

        >

            <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px">

                <el-form-item v-if="false" label="ID" prop="id">

                    <el-input v-model="temp.id"/>

                </el-form-item>

                <el-form-item label="脚本路径" prop="path">

                    <p>{{ temp.path }}</p>

                </el-form-item>

                <el-form-item label="脚本名称" prop="name">

                    <el-input v-model="temp.name" placeholder="请输入具有辨识性的名称"/>

                </el-form-item>

                <el-form-item label="脚本内容" prop="filebody">

                    <codemirror v-model="temp.filebody" :options="cmOptions"/>

                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">

                <el-button @click="dialogFormVisible = false">

                    取消

                </el-button>

                <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">

                    提交

                </el-button>

            </div>

        </el-dialog>

    </div>

</template>

<script>

    import {Message} from 'element-ui'

    import * as LocalScriptsApi from '@/api/hostmanage'

    // 在线代码编辑器

    import {codemirror} from 'vue-codemirror'

    import 'codemirror/lib/codemirror.css'

    import 'codemirror/mode/yaml/yaml.js'

    import 'codemirror/theme/monokai.css'

    import request from "@/utils/request";

    import store from "@/store";

    import menuContext from '@/components/menuContext'

    let id = 1000;

    export default {

        components: {

            menuContext,

            codemirror

        },

        data() {

            return {

                // 树形节点参数

                filterText: '', // 过滤内容

                treedata: [],  // 属性节点内容

                current_path: '',

                defaultProps: {  //节点内容的key

                    children: 'children',

                    label: 'label'

                },

                // 右键菜单参数

                isShowDrop: false, //右键菜单的是否显示

                contextMenuTarget: null, //右键菜单的DOM对象

                thisformdata: {}, //右键菜单的点击的节点对象

                targetElement: {}, //右键点击的目标对象

                isShowDelete: true, //是否显示菜单中的删除按钮

                isShowEdit: true, //是否显示菜单中的 编辑按钮

                isShowAdd: true, //是否显示菜单中的 添加按钮

                isShowMove: true, //是否显示菜单中的 转移按钮

                isShowLink: true, //是否显示菜单中的 关联按钮

                // 以下为模态框的参数

                temp: {

                    id: undefined,

                    name: '',

                    filebody: '',

                    path:''

                },

                cmOptions: { // codemirror options

                    tabSize: 2,

                    mode: 'text/x-yaml',

                    theme: 'monokai',

                    lineNumbers: true,

                    line: true

                },

                dialogFormVisible: false,

                dialogStatus: '',

                textMap: {

                    update: '修改脚本',

                    create: '新增脚本'

                },

                rules: {

                    name: [{required: true, message: '请输入脚本名称', trigger: 'blur'}],

                    filebody: [{required: true, message: '请输入脚本内容', trigger: 'blur'}],

                },

            };

        },

        created() {

            this.fetchTreeData()

        },

        mounted() {

            this.isShowDrop = false;

            //dom加载完，进行目标dom的设置，直接在data中赋值，会找不到dom

            this.contextMenuTarget = document.querySelector('#modelTree')

        },

        watch: {

            filterText(val) {

                this.$refs.tree.filter(val);

            },

        },

        methods: {

            filterNode(value, data) { // 节点过滤

                if (!value) return true;

                return data.label.indexOf(value) !== -1;

            },

            fetchTreeData() { // 空间树数据

                LocalScriptsApi.queryscripts().then(resp => {

                    if (resp.status === false) {

                        Message({

                            message: response.message || '后端无返回说明信息',

                            type: 'error',

                            duration: 5 * 1000

                        })

                    } else {

                        this.treedata = resp.data.info

                        this.current_path = resp.data.current_path

                    }

                })

            },

            getTargetElement(v) {

                this.targetElement = v

            },

            deleteOne() {

                var that = this

                var nodeIds = [this.thisformdata.nodeId]

                this.$confirm('此操作将删除该节点及其子节点, 是否继续?', '提示', {

                    confirmButtonText: '确定',

                    cancelButtonText: '取消',

                    type: 'warning',

                    center: true

                })

                        .then(() => {

                            deleteTreeNode(that.spaceTreeId, nodeIds).then(function (res) {

                                console.log('deleteTreeNode', res)

                                if (res.success) {

                                    that.$message('删除成功！')

                                    that.refreshSpaceTree()

                                }

                            })

                        })

                        .catch(() => {

                        })

            },

            add() {

                this.append(this.thisformdata)

                this.isShowDrop = false

            },

            editNode() {

                var data = this.thisformdata

                var str = "<input type='text' name='label' value='" + data.name + "'>"

                var e = window.event

                var text = this.targetElement

                text.innerHTML = str

                this.isShowDrop = false

                text.lastChild.onblur = function () {

                    data.name = text.lastChild.value

                    text.innerHTML = text.lastChild.value

                    var that = this

                    var space = {

                        nodeId: data.nodeId,

                        orgnazitionalTreeID: data.orgnazitionalTreeID,

                        parentNodeId: data.parentNodeId,

                        name: data.name,

                        nodeType: data.nodeType

                    }

                    //发送请求修改内容=>?有问题明天要修改

                    modifyTreeNode(data.orgnazitionalTreeID, space).then(function (res) {

                        console.log('modifyTreeNode', res)

                    })

                }

            },

            move() {

                if (this.thisformdata.nodeType == 0) {

                    this.$refs.modelLinkSpace.Open([this.thisformdata])

                }

                this.isShowDrop = false

            },

            linkModels() {

                this.linkModel({}, this.thisformdata)

            },

            handleNodeClick(data) {

                console.log('handleNodeClick', data)

                // !核心 : 节点数据被获得

                this.thisformdata = data

                //按需展示不同的按钮

                if (data.nodeType == 1 && !data.children) {

                    this.isShowAdd = true

                    this.isShowLink = true

                    this.isShowMove = true

                } else if (data.nodeType == 0) {

                    this.isShowAdd = false

                    this.isShowLink = false

                    this.isShowMove = true

                } else if (data.nodeType == 1 && data.children && data.children[0].nodeType == 0) {

                    this.isShowAdd = false

                    this.isShowLink = true

                    this.isShowMove = true

                } else if (data.nodeType == 1 && data.children && data.children[0].nodeType == 1) {

                    this.isShowAdd = true

                    this.isShowLink = false

                    this.isShowMove = false

                }

            },

            // 清空表单数据

            resetForm(formName) {

                this.$nextTick(() => {

                    this.$refs[formName].resetFields()

                })

            },

            append(data) {

                console.log(data)

                this.dialogStatus = 'create'

                this.dialogFormVisible = true

                // 自己定义逻辑

            },

        }

    };

</script>

<style lang="scss">

</style>