<template>
  <Card shadow style="height: 100%;width: 100%;overflow:hidden">
    <div class="department-outer">
      <div class="tip-box">
        <b style="margin-right: 20px;">powered by <a target="blank" href="https://github.com/lison16">Lison</a></b>
        <a target="blank" href="https://github.com/lison16/v-org-tree" style="margin-right: 10px;">v-org-tree文档</a>
      </div>
      <div class="zoom-box">
        <zoom-controller v-model="zoom" :min="20" :max="200"></zoom-controller>
      </div>
      <div class="view-box">
        <org-view
          v-if="data"
          :data="data"
          :zoom-handled="zoomHandled"
          @on-menu-click="handleMenuClick"
        ></org-view>
      </div>
    </div>
  </Card>
</template>

<script>
import OrgView from './components/org-view.vue'
import ZoomController from './components/zoom-controller.vue'
import { getOrgData } from '@/api/data'
import './index.less'
const menuDic = {
    edit: '编辑部门',
    detail: '查看部门',
    new: '新增子部门',
    delete: '删除部门'
}
export default {
    name: 'org_tree_page',
    components: {
        OrgView,
        ZoomController
    },
    data () {
        return {
            data: null,
            zoom: 100
        }
    },
    computed: {
        zoomHandled () {
            return this.zoom / 100
        }
    },
    methods: {
        setDepartmentData (data) {
            data.isRoot = true
            return data
        },
        handleMenuClick ({ data, key }) {
            this.$Message.success({
                duration: 5,
                content: `点击了《${data.label}》节点的'${menuDic[key]}'菜单`
            })
        },
        getDepartmentData () {
            getOrgData().then(res => {
                const { data } = res
                this.data = data
            })
        }
    },
    mounted () {
        this.getDepartmentData()
    }
}
</script>

<style>
</style>
