<template>
  <a-card :bordered="false">
    <a-row :gutter="8">
      <a-col :span="5">
        <div class="menu-button-group">
          <a-button type="primary" @click="handleAdd">添加</a-button>
          <a-button type="primary" style="margin-left: 15px" v-show="importFlag" @click="handleImport">导入</a-button>
          <a-popconfirm title="是否要删除所选部门？" @confirm="handleDelete()" v-show="deleteButtonShow">
            <a-button type="primary" style="margin-left: 15px">删除</a-button>
          </a-popconfirm>
        </div>
        <a-tree
          @expand="onExpand"
          :expandedKeys="expandedKeys"
          :autoExpandParent="autoExpandParent"
          @select="onSelect"
          :replaceFields="replaceFields"
          @rightClick="rightClick"
          :selectedKeys="selectedKeys"
          :treeData="treeData"
        />
      </a-col>
      <a-col :span="19">
        <a-card class="card" :title="title" :bordered="false">
          <base-form
            :dept="dept"
            @ok="ok">
          </base-form>
        </a-card>
      </a-col>
    </a-row>
    <import-form ref="importForm" @ok="ok" />
  </a-card>
</template>

<script>
import BaseForm from './modules/BaseForm'
import ImportForm from '@/views/upms/dept/modules/ImportForm'
import { getDeptTree, fetchDept, deleteDept } from '@/api/upms/dept'

export default {
  name: 'TreeList',
  components: {
    BaseForm, ImportForm
  },
  data () {
    return {
      openKeys: [''],
      title: '添加部门',
      selectedKeys: [],
      replaceFields: {
        class: 'clazz'
      },
      treeData: [],
      expandedKeys: [],
      autoExpandParent: true,
      deleteButtonShow: false,
      importFlag: false,
      rightSelectDept: {},
      dept: {
        type: 2
      }
    }
  },
  created () {
    this.importFlag = false
    this.rightSelectDept = {}
    this.initDeptTree()
  },
  methods: {
    initDeptTree () {
      const parameter = {
      }
      getDeptTree(parameter).then(res => {
        const treeData = res.data
        this.setClass(treeData)
        // 循环获取样式
        this.treeData = treeData
      })
    },
    setClass (treeData) {
      treeData.forEach(item => {
        if (this.BaseTool.Object.isNotBlank(item.clazz)) {
          item['class'] = item.clazz
        }
        if (this.BaseTool.Object.isNotBlank(item.children) && item.children.length > 0) {
          this.setClass(item.children)
        }
      })
    },
    onSelect: function (selectedKeys, info) {
      this.importFlag = false
      this.rightSelectDept = {}
      this.title = '编辑部门'
      this.selectedKeys = selectedKeys
      if (selectedKeys.length > 0) {
        fetchDept({ deptId: selectedKeys }).then(res => {
          this.dept = res.data
          this.deleteButtonShow = true
        })
      } else {
        this.dept = {
          type: 2
        }
      }
    },
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    handleAdd () {
      this.title = '添加部门'
      if (this.selectedKeys.length > 0) {
        fetchDept({ deptId: this.selectedKeys[0] }).then(res => {
          this.dept = {
            type: 2,
            parentId: res.data.deptId,
            parentName: res.data.name
          }
        })
      } else {
        this.dept = {
          type: 2
        }
      }
    },
    handleDelete () {
      deleteDept({ deptId: this.selectedKeys[0] }).then(res => {
        this.$message.info(`提示：删除成功 `)
        this.refresh()
      })
    },
    handleImport () {
      if (!this.importFlag || this.rightSelectDept == null || Object.keys(this.rightSelectDept).length === 0) {
        return
      }
      console.log(22222, this.rightSelectDept)
      this.$refs.importForm.base(this.rightSelectDept)
    },
    rightClick (info) {
      this.importFlag = true
      this.rightSelectDept = info.node.dataRef.item
    },
    refresh () {
      this.initDeptTree()
      this.dept = {
        type: 2
      }
    },
    ok () {
      this.refresh()
    }
  }
}
</script>
<style>
  .tree-title-close-dept-future .ant-tree-title {
    color: #c5baba;
  }
</style>
