<script setup lang="ts">
import { h, onMounted, ref } from 'vue';
import type { DataTableColumns, DataTableRowKey } from 'naive-ui';
import { NCard, NDataTable, NPagination, NSpin, useMessage } from 'naive-ui';
import { api_menuPageGet } from '@/api/index';

const tableData = ref([]);
// 选中的行
const checkedRowKeysRef = ref<DataTableRowKey[]>([]);
const message = useMessage();
// 分页相关数据
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(10);
const pageSizes = ref([10, 20, 50, 100]);
const show = ref(false);
const data = ref({
  pageNum: 1,
  pageSize: 10
});
// 处理行选择
function handleCheck(rowKeys: DataTableRowKey[]) {
  checkedRowKeysRef.value = rowKeys;
}

// 定义行键函数
function rowKey(row: any) {
  console.log(row);

  return row.index;
}

// 表格列配置
const tableColumn: DataTableColumns<any> = [
  {
    type: 'selection'
  },
  {
    title: '排序',
    key: 'index',
    align: 'center',
    width: 200,
    tree: false
  },
  {
    title: '菜单标题',
    key: 'name',
    // align: 'center',
    minWidth: 200,
    tree: true,
    treeConfig: {
      indent: 20,
      expandable: (row: any) => Boolean(row.children) && row.children.length > 0
    }
  },
  {
    title: '组件路径',
    key: 'path',
    // align: 'center',
    minWidth: 200
  },
  {
    title: '外链',
    key: 'isLink',
    align: 'center',
    minWidth: 80,
    render(row: any) {
      return row.externalLink ? '是' : '否';
    }
  },
  {
    title: '缓存',
    key: 'isCache',
    align: 'center',
    minWidth: 80,
    render(row: any) {
      return row.cache ? '是' : '否';
    }
  },
  {
    title: '创建日期',
    key: 'createTime',
    align: 'center',
    minWidth: 180
  }
];

async function getMenuPage() {
  const res = await api_menuPageGet(data.value);
  if (res.data.code == 200) {
    const data = res.data.data.data[0].children;
    tableData.value = data;
  } else {
    message.error(res.message);
  }
}

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

<template>
  <div id="MenuPage">
    <NSpin :show="show">
      <NCard size="medium">
        <NDataTable
          :row-key="rowKey"
          :columns="tableColumn"
          :data="tableData"
          :bordered="true"
          :pagination="false"
          default-expand-all
          @update:checked-row-keys="handleCheck"
          @expand-change="handleExpandChange"
        />

        <div style="display: flex; justify-content: end; margin-top: 30px;">
            <ElPagination v-model:current-page="pageNum" v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 40]" background="#2196f3" layout="sizes, prev, pager, next"
              :total="total" />
          </div>
      </NCard>
    </NSpin>
  </div>
</template>

<style scoped>
:deep(.n-pagination .n-pagination-item.n-pagination-item--active) {
  background-color: #2196ed !important;
  color: white !important;
  border-color: #2196ed !important;
}
</style>
