<template>
  <div>
    <n-card class="h-full shadow-sm rounded-8px">
      <div class="mt-4">
        <n-data-table
          v-if="defaultExpandedRowKeys.length !== 0"
          :default-expanded-row-keys="defaultExpandedRowKeys"
          :single-line="false"
          :columns="columns"
          :data="deptData"
          :row-key="rowKey"
        />
      </div>
    </n-card>

    <DeptForm
      ref="deptFormDom"
      :cur-edit-dept-id="curEditDeptId"
      :root-dept-name="rootDeptName"
      :modal-title="modalTitle"
      @get-dept-tree="getDeptTree"
    />
  </div>
</template>
<script setup lang="ts">
import { h, onMounted, ref, nextTick } from 'vue';
import type { DataTableColumns } from 'naive-ui';
import { NButton } from 'naive-ui';
import { fetchGetDetpTree, fetchDelDept } from '@/service/api';
import DeptForm from './components/DeptForm/index.vue';

const createColumns = (): DataTableColumns<System.DeptTableRow> => {
  return [
    {
      title: '部门名称',
      key: 'deptName'
    },
    {
      title: '排序',
      key: 'orderNum'
    },
    {
      title: '状态',
      key: 'status',
      render(row) {
        return row.status;
      }
    },
    {
      title: '创建时间',
      key: 'createTime'
    },
    {
      title: '操作',
      key: 'actions',
      render(row) {
        return [
          h(
            NButton,
            {
              strong: true,
              size: 'small',
              text: true,
              type: 'info',
              onClick: () => handleShowModal(row, 'edit')
            },
            { default: () => '修改' }
          ),
          h(
            NButton,
            {
              strong: true,
              size: 'small',
              type: 'info',
              text: true,
              class: 'mx-2',
              onClick: () => handleShowModal(row, 'add')
            },
            { default: () => '新增' }
          ),
          h(
            NButton,
            {
              strong: true,
              size: 'small',
              text: true,
              type: 'info',
              disabled: row.parentId === 0,
              onClick: () => handleDelDept(row)
            },
            { default: () => '删除' }
          )
        ];
      }
    }
  ];
};
const deptData = ref([]);
const rootDeptName = ref('');
const columns = createColumns();
const rowKey = (row: { deptId: number }) => {
  return row.deptId;
};
const defaultExpandedRowKeys = ref<any>([]);

async function getDeptTree() {
  const { data } = await fetchGetDetpTree();
  if (data?.ok) {
    deptData.value = data?.data;
    defaultExpandedRowKeys.value = [(data?.data[0] as System.DeptTableRow).deptId];
  }
}

const modalTitle = ref('新增部门');
const deptFormDom = ref();
const curEditDeptId = ref(-1);
/** 打开弹窗 */
function handleShowModal(row: System.DeptTableRow | undefined, type: string) {
  nextTick(() => {
    if (type === 'add') modalTitle.value = '新增部门';
    if (type === 'edit') modalTitle.value = '修改部门';

    if (row) {
      curEditDeptId.value = (row as System.DeptTableRow).deptId;
      rootDeptName.value = (row as System.DeptTableRow).deptName;
    } else {
      curEditDeptId.value = -1;
      rootDeptName.value = (deptData.value[0] as System.DeptTableRow).deptName;
    }

    deptFormDom.value.handleShowModal();
  });
}
/** 删除部门 */
function handleDelDept(row: System.DeptTableRow) {
  window.$dialog?.info({
    title: '提示',
    content: '您确定要删除当前部门吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const { data } = await fetchDelDept(row?.deptId);
      if (data?.ok) {
        window.$message?.success('操作成功');
        getDeptTree();
      }
    }
  });
}

onMounted(() => {
  getDeptTree();
});
</script>
