<template>
  <PageWrapper>
    <el-card :bordered="false" class="proCard">
     <template #header>
        <el-space align="center">
          <el-button type="primary" @click="openCreateDrawer" v-permission="{ action: [PERM_USER.DEPT_ADD] }">
            <template #icon>
              <el-icon>
                <FileAddOutlined />
              </el-icon>
            </template>
            添加
          </el-button>
        </el-space>
      </template>
      <el-table :data="tableData" row-key="id" :tree-props="treeProps" default-expand-all>
        <el-table-column label="组织名称">
          <template #default="{ row }">
            {{ `${row.deptName} (${row.userCount})` }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-space>
              <div class="el-space el-space--horizontal">
                <div class="el-space__item" @click="handleEdit(scope.row)" v-permission="{ action: [PERM_USER.DEPT_EDIT] }">
                  <div><img :src="editIcon" class="el-tooltip__trigger" /></div>
                </div>
                <div class="el-space__item" @click="handleDelete(scope.row)" v-permission="{ action: [PERM_USER.DEPT_DELETE] }">
                  <div><img :src="deleteIcon" class="el-tooltip__trigger" /></div>
                </div>
              </div>
            </el-space>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <CreateDrawer_shangfei
      ref="createDrawerRef"
      :title="drawerTitle"
      :deptList="tableData"
      @change="reloadTable"
      v-if="disableDepartmentEdit"
    />
    <CreateDrawer
      ref="createDrawerRef"
      :title="drawerTitle"
      :deptList="tableData"
      :data-source="currentDept"
      :width="450"
      @change="reloadTable"
      v-else
    />
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { getAllDepartments, deleteDepartments } from '@/api/auth/dept';
  import { FileAddOutlined } from '@vicons/antd';
  import CreateDrawer from './CreateDrawer.vue';
  import CreateDrawer_shangfei from './CreateDrawer-shangfei.vue';
  import { useGlobSetting } from '@/hooks/setting';
  import type { DeptTreeItem } from '@/types/dept/type';
  import editIcon from '@/assets/images/reportmessage/edit.png';
  import deleteIcon from '@/assets/images/reportmessage/delete.png';
  import { PERM_USER } from '@/types/permission/constants';
  import { ResultEnum } from '@/enums/httpEnum';

  const globSetting = useGlobSetting();
  const disableDepartmentEdit = globSetting.disableDepartmentEdit;

  const message = ElMessage;
  const tableData = ref<any[]>([]);
  const treeProps = reactive({
    checkStrictly: false,
  });
  const createDrawerRef = ref();
  const drawerTitle = ref('添加部门');
  const currentDept = ref<DeptTreeItem>({
    id: null,
    deptName: '',
    parentId: null,
    orderNum: undefined,
    isDisabled: 0,
    createdBy: 0,
    updatedBy: 0,
    createdAt: '',
    updatedAt: '',
    isDeleted: 0,
    tenantId: 0,
  });

  const loadDataTable = async () => {
    const result = await getAllDepartments();
    tableData.value = result;
  };

  function reloadTable() {
    loadDataTable()
  }

  function openCreateDrawer() {
    drawerTitle.value = '添加部门';
    const { openDrawer } = createDrawerRef.value;
    openDrawer();
  }

  function handleEdit(record: Recordable) {
    drawerTitle.value = '编辑部门';
    currentDept.value = record;
    const { openDrawer } = createDrawerRef.value;
    openDrawer(record.deptId);
  }

  function handleDelete(record: Recordable) {
    deleteDepartments(record.id).then((res) => {
      if (res.code === ResultEnum.SUCCESS) {
        message.success('删除成功');
        loadDataTable();
      } else {
        message.error(res.data)
      }
    })
  }

  onMounted(() => {
    loadDataTable();
  });
</script>
<style scoped>
  .el-space--horizontal {
    align-items: center;
    gap: 0px 20px;
  }

  .el-tooltip__trigger {
    width: 16px;
  }

  .tooltip__password {
    color: var(--el-color-primary);
  }

  .box-item {
    position: absolute;
    top: 0;
    right: 0;
  }

  .el-space__item:hover {
    cursor: pointer;
  }
</style>