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

    <MenuFormModal ref="menuFormModalRef" :menuList="authMenuList" />
  </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 } from 'element-plus';
  import MenuIcon from './components/MenuIcon.vue';
  import MenuFormModal from './components/MenuFormModal.vue';

  const proTable = ref();
  const menuFormModalRef = ref();
  const menuData = ref(authMenuList);

  // 表格配置项
  const config = {
    height: 'auto',
    stripe: false, // tree 不支持 stripe
    treeConfig: {
      rowField: 'name',
      childrenField: 'children',
    },
    columns: [
      {
        field: 'meta.title',
        title: '菜单名称',
        align: 'left',
        minWidth: 240,
        search: { el: 'input' },
        treeNode: true,
      },
      {
        field: 'meta.icon',
        title: '菜单图标',
        minWidth: 120,
        slots: {
          default: ({ row }) => {
            return <MenuIcon width={20} iconName={row.meta.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>
                  删除
                </ElButton>
              </>
            );
          },
        },
      },
    ],
  };

  const handleEditClick = (row) => {
    menuFormModalRef.value.openModal(JSON.parse(JSON.stringify(row)));
  };
</script>
