<template>
  <n-space vertical :size="12">
    <n-data-table ref="table" :columns="columns" :data="data" :pagination="pagination" />
  </n-space>
</template>

<script>
  import { defineComponent, ref, onMounted, h } from 'vue';
  import { downloadJsonStoreWidthOut } from '@/store/modules/downloadJson';
  import { NTag } from 'naive-ui';
  import { getJsonVersion } from '@/utils/admin';
  const downloadJsonStore = downloadJsonStoreWidthOut();
  const columns = [
    {
      title: '等级',
      key: 'level',
      defaultSortOrder: 'ascend',
      sorter: 'default',
      render(row) {
        return h(
          NTag,
          {
            style: {
              marginRight: '6px',
            },
            type: 'info',
            bordered: false,
          },
          {
            default: () => 'Lv.' + row.level,
          }
        );
      },
    },
    {
      title: '经验值',
      key: 'exp',
    },
  ];

  const data = ref([]);

  export default defineComponent({
    setup() {
      const tableRef = ref(null);

      function loadLevelData() {
        data.value = downloadJsonStore.playerLevel;
        if (data.value.length === 0) {
          downloadJsonStore.downloadPlayerLevel(getJsonVersion()).then((res) => {
            data.value = res;
          });
        }
      }
      onMounted(() => {
        loadLevelData();
      });

      return {
        table: tableRef,
        data,
        columns,
        pagination: { pageSize: 10 },
      };
    },
  });
</script>
