<template>
  <div class="v-component group-manage group-tree">
    <Tree :data="treeData" :load-data="loadChildData"></Tree>
    <add-modal ref="add-modal" @success="getList"></add-modal>
    <edit-modal ref="edit-modal" @success="getList"></edit-modal>
    <delete-modal ref="delete-modal" @delete="deleteOrg" title="删除机构" content="确定要删除该机构吗？"></delete-modal>
    <Spin size="large" fix v-if="loading"></Spin>
  </div>
</template>

<script>
import addModal from './add-modal'
import editModal from './edit-modal'
import deleteModal from '../delete-modal'
import org from '../../apis/org'
import { deepCopy } from '../../utils/assist'

export default {
  name: 'GroupManage',
  data () {
    return {
      list: [],
      treeData: [],
      currentOrg: {},
      loading: false,
      rootRender: (h, { root, node, data }) => {
        return h('div', { class: 'tree-row root-row' }, [
          h('div', { class: 'title' }, data.title),
          h('Button', {
            props: {
              icon: 'md-add',
              type: 'primary'
            },
            on: {
              click: () => {
                this.openModal({ ...data, root: true, type: 'add' })
              }
            }
          })
        ])
      },
      childRender: (h, { root, node, data }) => {
        return h('div', { class: `tree-row child-row` }, [
          h('div', { class: 'title' }, data.title),
          h('Button', {
            props: {
              icon: 'md-add',
              type: 'default'
            },
            on: {
              click: () => { this.openModal({ ...data, type: 'add' }) }
            }
          }),
          h('Button', {
            props: {
              icon: 'md-create',
              type: 'default'
            },
            on: {
              click: () => { this.openModal({ ...data, type: 'edit' }) }
            }
          }),
          h('Button', {
            props: {
              icon: 'md-remove',
              type: 'default'
            },
            on: {
              click: () => { this.openModal({ ...data, type: 'delete' }) }
            }
          })
        ])
      },
      noDataRender: (h, { root, node, data }) => {
        return h('span', { class: 'gray' }, '暂无子级')
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      try {
        this.loading = true
        let res = await org.getOrg()
        this.list = res.data
        this.treeData = deepCopy(this.list)
        this.calTreeData(this.treeData, true)
        this.loading = false
      } catch (e) {
        this.loading = false
      }
    },
    async loadChildData (item, callback) {
      let res = await org.getOrg(item.orgId)
      let childData = []
      if (res.data.length) {
        childData = deepCopy(res.data)
        this.calTreeData(childData)
      } else {
        childData = [{
          render: this.noDataRender
        }]
      }
      callback(childData)
    },
    calTreeData (list, isRoot = false) {
      list.forEach((item) => {
        this.$set(item, 'title', item.orgName)
        this.$set(item, 'loading', false)
        this.$set(item, 'expand', isRoot)
        if (isRoot) {
          item.render = this.rootRender
        } else {
          item.render = this.childRender
        }
        if (item.children) {
          this.calTreeData(item.children)
        }
      })
    },
    openModal (data) {
      this.currentOrg = data
      this.$nextTick(() => {
        this.$refs[`${this.currentOrg.type}-modal`].openModal(this.currentOrg)
      })
    },
    async deleteOrg () {
      try {
        this.loading = true
        await org.deleteOrg(this.currentOrg.orgId)
        this.$Message.success('删除成功')
        this.getList()
      } catch (e) {
        this.loading = false
      }
    }
  },
  components: {
    addModal,
    editModal,
    deleteModal
  }
}
</script>