<template>
  <div
    ref="dragWrapper"
    class="org-tree-drag-wrapper"
    @mousedown="mousedownView"
    @contextmenu="handleDocumentContextmenu"
  >
    <div class="org-tree-wrapper" :style="orgTreeStyle">
      <v-org-tree
        v-if="data"
        :data="data"
        :node-render="nodeRender"
        :expand-all="true"
        @on-node-click="handleNodeClick"
        collapsable
      ></v-org-tree>
    </div>
  </div>
</template>

<script>
import { on, off } from '@/libs/tools'
const menuList = [
    {
        key: 'edit',
        label: '编辑部门'
    },
    {
        key: 'detail',
        label: '查看部门'
    },
    {
        key: 'new',
        label: '新增子部门'
    },
    {
        key: 'delete',
        label: '删除部门'
    }
]
export default {
    name: 'OrgView',
    props: {
        zoomHandled: {
            type: Number,
            default: 1
        },
        data: Object
    },
    data () {
        return {
            currentContextMenuId: '',
            orgTreeOffsetLeft: 0,
            orgTreeOffsetTop: 0,
            initPageX: 0,
            initPageY: 0,
            oldMarginLeft: 0,
            oldMarginTop: 0,
            canMove: false
        }
    },
    computed: {
        orgTreeStyle () {
            return {
                transform: `translate(-50%, -50%) scale(${this.zoomHandled}, ${
                    this.zoomHandled
                })`,
                marginLeft: `${this.orgTreeOffsetLeft}px`,
                marginTop: `${this.orgTreeOffsetTop}px`
            }
        }
    },
    methods: {
        handleNodeClick (e, data, expand) {
            expand()
        },
        closeMenu () {
            this.currentContextMenuId = ''
        },
        getBgColor (data) {
            return this.currentContextMenuId === data.id
                ? data.isRoot
                    ? '#0d7fe8'
                    : '#5d6c7b'
                : ''
        },
        nodeRender (h, data) {
            return (
                <div
                    class={[
                        'custom-org-node',
                        data.children && data.children.length ? 'has-children-label' : ''
                    ]}
                    on-mousedown={event => event.stopPropagation()}
                    on-contextmenu={this.contextmenu.bind(this, data)}
                >
                    {data.label}
                    <dropdown
                        trigger="custom"
                        class="context-menu"
                        visible={this.currentContextMenuId === data.id}
                        nativeOn-click={this.handleDropdownClick}
                        on-on-click={this.handleContextMenuClick.bind(this, data)}
                        style={{
                            transform: `scale(${1 / this.zoomHandled}, ${1 /
                this.zoomHandled})`
                        }}
                        v-click-outside={this.closeMenu}
                    >
                        <dropdown-menu slot="list">
                            {menuList.map(item => {
                                return (
                                    <dropdown-item name={item.key}>{item.label}</dropdown-item>
                                )
                            })}
                        </dropdown-menu>
                    </dropdown>
                </div>
            )
        },
        contextmenu (data, $event) {
            let event = $event || window.event
            event.preventDefault
                ? event.preventDefault()
                : (event.returnValue = false)
            this.currentContextMenuId = data.id
        },
        setDepartmentData (data) {
            data.isRoot = true
            this.departmentData = data
        },
        mousedownView (event) {
            this.canMove = true
            this.initPageX = event.pageX
            this.initPageY = event.pageY
            this.oldMarginLeft = this.orgTreeOffsetLeft
            this.oldMarginTop = this.orgTreeOffsetTop
            on(document, 'mousemove', this.mousemoveView)
            on(document, 'mouseup', this.mouseupView)
        },
        mousemoveView (event) {
            if (!this.canMove) return
            const { pageX, pageY } = event
            this.orgTreeOffsetLeft = this.oldMarginLeft + pageX - this.initPageX
            this.orgTreeOffsetTop = this.oldMarginTop + pageY - this.initPageY
        },
        mouseupView () {
            this.canMove = false
            off(document, 'mousemove', this.mousemoveView)
            off(document, 'mouseup', this.mouseupView)
        },
        handleDropdownClick (event) {
            event.stopPropagation()
        },
        handleDocumentContextmenu () {
            this.canMove = false
        },
        handleContextMenuClick (data, key) {
            this.$emit('on-menu-click', { data, key })
        }
    },
    mounted () {
        on(document, 'contextmenu', this.handleDocumentContextmenu)
    },
    beforeDestroy () {
        off(document, 'contextmenu', this.handleDocumentContextmenu)
    }
}
</script>

<style>
</style>
