<template>
  <el-container>
    <el-aside v-if="!isCollapse">
      <div class="gva-table-box">
        <div class="gva-btn-list">
          <el-text size="large" tag="b">部门管理</el-text>
        </div>
        <!-- 由于此处分类跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
        <el-tree ref="elOrganizeTreeRef" :data="dataSource" node-key="ID" default-expand-all highlight-current
          :expand-on-click-node="false" @current-change="handleNodeClick">
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span>{{ data.name }}</span>
              <span>
                <el-button v-if="data.ID > 0" type="success" link size="small" @click="handleNodeEdit(data)">
                  <el-icon>
                    <EditPen />
                  </el-icon>
                </el-button>
                <el-button v-if="data.ID > 0" type="danger" link size="small" @click="handleNodeRemove(data)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </el-button>
                <el-button type="primary" link size="small" @click="handleNodeAdd(data)">
                  <el-icon>
                    <Plus />
                  </el-icon>
                </el-button>
              </span>
            </span>
          </template>
        </el-tree>
        <OrganizeEdit ref="elOrganizeEditRef" :organizeOptions="dataSource" @on-save="handleSaveSuccess" />
      </div>
    </el-aside>
    <el-main :style="!isCollapse ? 'padding:0; margin-left: 15px;' : 'padding:0;'">
      <div class="gva-table-box">
        <UserList ref="elUserListRef" :organizeOptions="dataSource" @collapse="handleCollapse" />
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, watch } from 'vue'
import UserList from '@/view/organize/components/userList.vue'
import OrganizeEdit from '@/view/organize/components/organizeEdit.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getOrganizeTree,
  getOrganizeById,
  addOrganize,
  deleteOrganize,
  updateOrganize,
} from '@/api/organize'

const props = defineProps({
  name: 'Organize',
})
const isCollapse = ref(false)
const handleCollapse = (flag) => {
  isCollapse.value = flag
}
const dataSource = ref([
  {
    ID: 0,
    name: "中科智库",
    children: []
  }
])
const elOrganizeTreeRef = ref(null)
watch(() => dataSource.value, () => {
  // elOrganizeTreeRef.setCurrentKey(0, true)
})

const getTreeData = async () => {
  const res = await getOrganizeTree()
  const root = [{
    ID: 0,
    name: "中科智库",
    children: [],
  }]
  dataSource.value = root
  if (res.code === 0) {
    if (res.data.organizeTree) {
      dataSource.value[0].children = res.data.organizeTree
    }
  }
}
getTreeData()

const elOrganizeEditRef = ref(null)
const handleNodeClick = (data) => {
  elUserListRef.value.openList(data)
}

const handleNodeAdd = (data) => {
  elOrganizeEditRef.value.openEdit({ parentId: data.ID })
}
const handleNodeEdit = async (data) => {
  elOrganizeEditRef.value.openEdit(data)
}
const handleNodeRemove = (data) => {
  console.log(data)
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res = await deleteOrganize({ ID: data.ID })
    if (res.code === 0) {
      ElMessage.success('删除成功')
      await getTreeData()
      elUserListRef.value.openList(data)
    }
  })
}

const elUserListRef = ref(null)

const handleSaveSuccess = () => {
  getTreeData()
}

</script>

<style>
.el-tree-node__content {
  height: 32px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
