<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      :config="config"
      :show-pagination="false"
      @search="handleSearch"
      :data="tableData"
    >
      <!-- 表格 header 按钮 -->
      <template #left_buttons>
        <el-button type="primary" :icon="CirclePlus" @click="menuFormModalRef?.openModal()"
          >新增菜单
        </el-button>
      </template>
    </ProTable>

    <MenuFormModal ref="menuFormModalRef" :menuList="tableData" @success="onSuccess" />
  </div>
</template>

<script setup lang="jsx" name="menuMange">
  import { ref } from 'vue';
  import { Delete, EditPen, CirclePlus } from '@element-plus/icons-vue';
  import authMenuList from '@/assets/json/authMenuList.json';
  import ProTable from '@/components/ProTable/index.vue';
  import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
  import MenuIcon from './components/MenuIcon.vue';
  import MenuFormModal from './components/MenuFormModal.vue';
  import { getMenuTree, deleteMenus } from '@/api/menu';
  import { onMounted } from 'vue';

  const proTable = ref();
  const menuFormModalRef = ref();
  const menuData = ref(authMenuList);
  const tableData = ref([]);

  // 表格配置项
  const config = {
    stripe: false, // tree 不支持 stripe
    treeConfig: {
      rowField: 'id',
      childrenField: 'children',
    },
    columns: [
      {
        field: 'title',
        title: '菜单名称',
        align: 'left',
        minWidth: 240,
        search: { el: 'input' },
        treeNode: true,
      },
      {
        field: 'icon',
        title: '菜单图标',
        minWidth: 120,
        slots: {
          default: ({ row }) => {
            return row.icon && <MenuIcon width={20} iconName={row.icon} />;
          },
        },
      },
      { field: 'name', title: '菜单 name', minWidth: 140, search: { el: 'input' } },
      { field: 'path', title: '菜单路径', width: 300, search: { el: 'input' } },
      { field: 'component', title: '组件路径', width: 300 },
      {
        field: 'operation',
        title: '操作',
        width: 250,
        fixed: 'right',
        slots: {
          default({ row }) {
            return (
              <>
                <ElButton type="primary" icon={EditPen} link onClick={() => handleEditClick(row)}>
                  编辑
                </ElButton>
                <ElButton type="primary" icon={Delete} link onClick={() => handleDelete(row)}>
                  删除
                </ElButton>
              </>
            );
          },
        },
      },
    ],
  };

  const onSuccess = () => {
    handleSearch();
  };
  const handleSearch = async (params) => {
    const { result } = await getMenuTree(params ?? {});
    tableData.value = result;
  };

  const handleEditClick = (row) =>
    menuFormModalRef.value.openModal(JSON.parse(JSON.stringify(row)));

  const handleDelete = async (row) => {
    await ElMessageBox.confirm('是否确认删除该菜单？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    });

    await deleteMenus(row.id);

    ElMessage({
      type: 'success',
      message: '删除成功！',
      plain: true,
    });
    handleSearch();
  };

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