<template>
  <div class="menu-index">
    <a-card :bordered="false" class="pt-3 mb-3 proCard">
      <div>
        <a-space>
          <a-button type="primary" @click="handleAdd()" v-perm="['sys:dept:add']">
            <template #icon><PlusOutlined /></template>
            新增
          </a-button>
          <a-button @click="handleExpand"> 展开/折叠</a-button>
        </a-space>
      </div>
    </a-card>
    <a-card :bordered="false" class="pt-3 mb-3 proCard">
      <a-spin :spinning="loading">
        <a-table
          border
          ref="tableRef"
          :dataSource="lists"
          :columns="columns"
          v-model:expandedRowKeys="expandKeys"
          :style="{ minHeight: fwbHeight+'px' }"
          :scroll="{x:'100%',y:fwbHeight}"
        >
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.key == 'action'">
              <a-space>
                <a-button
                  type="primary"
                  @click="handleAdd(record.id)"
                  v-perm="['sys:category:add']"
                >
                  <template #icon><PlusOutlined /></template>
                  新增</a-button
                >
                <a-button
                  type="primary"
                  @click="handleEdit(record)"
                  v-perm="['sys:category:update']"
                >
                  <template #icon><EditOutlined /></template>
                  编辑
                </a-button>
                <a-button
                  type="primary"
                  danger
                  @click="handleDelete(record.id)"
                  v-perm="['sys:category:delete']"
                >
                  <template #icon><DeleteOutlined /></template>
                  删除
                </a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-spin>
    </a-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 } from 'vue';
  import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { getCategoryList, categoryDelete } from '@/api/content/category';
  import { Modal, message } from 'ant-design-vue';
  import { columns } from './columns';
  import { buildTree } from '@/utils/auth';

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

  /**
   * 定义参数变量
   */
  const fwbHeight = document.body.clientHeight - 400;
  const loading = ref(false);
  const editVisible = ref(false);
  const expandAllRows = ref(false);
  const arrayList = ref([]);
  const expandKeys = ref([]);
  const categoryId = ref(0);
  const pid = ref(0);
  const lists = ref([]);

  /**
   * 获取分类数据
   */
  const getLists = async () => {
    loading.value = true;
    try {
      const data = await getCategoryList();
      data.map((item) => {
        item.key = item.id;
      });
      arrayList.value = data;
      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 = (categoryId: number) => {
    Modal.confirm({
      title: '提示',
      content: '确定要删除？',
      onOk: async () => {
        loading.value = true;
        await categoryDelete(categoryId);
        message.success('删除成功');
        getLists();
        loading.value = false;
      },
    });
  };

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

  /**
   * 扩展、收缩实现
   */
  const toggleExpand = () => {
    expandKeys.value = [];
    if (expandAllRows.value) {
      arrayList.value.map((item) => {
        expandKeys.value.push(item.id);
      });
    } else {
      expandKeys.value = [];
    }
  };

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

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

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

<style scoped></style>
