<template>
  <div class="menu-index">
    <el-card :bordered="false" class="pt-3 mb-3 proCard">
      <div>
        <el-button type="primary" @click="handleAdd()" v-perm="['sys:category:add']">
          <template #icon>
            <el-icon>
              <plus />
            </el-icon>
          </template>
          新增
        </el-button>
        <el-button @click="handleExpand"> 展开/折叠</el-button>
      </div>
    </el-card>
    <el-card :bordered="false" class="pt-3 mb-3 proCard">
      <el-table
        border
        v-loading="loading"
        ref="tableRef"
        :data="lists"
        row-key="id"
        :height="fwbHeight"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="分类名称" prop="name" min-width="200" show-overflow-tooltip />
        <el-table-column align="center" label="分类排序" prop="sort" min-width="100" />
        <el-table-column align="center" label="分类备注" prop="note" min-width="200" />
        <el-table-column align="center" label="创建人" prop="createUser" min-width="100" />
        <el-table-column align="center" label="创建时间" prop="createTime" min-width="180" />
        <el-table-column align="center" label="操作" width="300" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              icon="Plus"
              @click="handleAdd(row.id)"
              v-perm="['sys:category:add']"
            >
              新增
            </el-button>
            <el-button
              type="warning"
              icon="Edit"
              @click="handleEdit(row)"
              v-perm="['sys:category:update']"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              icon="Delete"
              @click="handleDelete(row.id)"
              v-perm="['sys:category:delete']"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <editDialog
      ref="editRef"
      v-if="editVisible"
      :categoryId="categoryId"
      :pid="pid"
      v-model:visible="editVisible"
      @success="getLists"
    />
  </div>
</template>

<script lang="ts" setup name="menu">
  import { defineAsyncComponent, nextTick, onMounted, ref, shallowRef } from 'vue';
  import { getCategoryList, categoryDelete } from '@/api/content/category';
  import type { ElTable } from 'element-plus';
  import { confirm, message, buildTree } from '@/utils/auth';

  /**
   * 导入组件
   */
  const editDialog = defineAsyncComponent(() => import('./edit.vue'));

  const fwbHeight = document.body.clientHeight - 320;
  const isExpand = ref(false);
  const loading = ref(false);
  const editVisible = ref(false);
  const categoryId = ref(0);
  const pid = ref(0);
  const lists = ref([]);
  const tableRef = shallowRef<InstanceType<typeof ElTable>>();

  /**
   * 获取全部分类
   */
  const getLists = async () => {
    loading.value = true;
    try {
      const data = await getCategoryList();
      lists.value = buildTree(data);
      loading.value = false;
    } catch (error) {
      loading.value = false;
    }
  };

  /**
   * 执行添加
   * @param parentId 上级ID
   */
  const handleAdd = async (parentId: any) => {
    categoryId.value = 0;
    pid.value = parentId ? parentId : 0;
    await nextTick();
    editVisible.value = true;
  };

  /**
   * 执行编辑
   * @param data 参数
   */
  const handleEdit = async (data: any) => {
    categoryId.value = data.id;
    await nextTick();
    editVisible.value = true;
  };

  /**
   * 执行删除
   * @param categoryId 分类ID
   */
  const handleDelete = async (categoryId: number) => {
    await confirm('确定要删除？');
    try {
      loading.value = true;
      await categoryDelete(categoryId);
      message('删除成功');
      getLists();
    } catch (e) {
      loading.value = false;
    }
  };

  /**
   * 执行扩展、收缩
   */
  const handleExpand = () => {
    isExpand.value = !isExpand.value;
    toggleExpand(lists.value, isExpand.value);
  };

  /**
   * 扩展、收缩实现
   */
  const toggleExpand = (children: any[], unfold = true) => {
    for (const key in children) {
      tableRef.value?.toggleRowExpansion(children[key], unfold);
      if (children[key].children) {
        toggleExpand(children[key].children!, unfold);
      }
    }
  };

  /**
   * 获取全部数据
   */
  const getAll = () => {
    getLists();
  };

  /**
   * 钩子函数
   */
  onMounted(() => {
    getAll();
  });

  // onActivated(() => {
  //   getAll()
  // });
</script>

<style scoped></style>
