<template>
  <div>
    <n-card :bordered="false" class="proCard" title="活动">
      <n-data-table ref="table" :columns="columns" :data="data" :pagination="pagination" />
    </n-card>

    <n-card :bordered="false" class="proCard" title="其他活动">
      <n-data-table ref="table" :columns="columns2" :data="data2" :pagination="pagination" />
    </n-card>
  </div>
</template>

<script>
  import { defineComponent, ref, onMounted } from 'vue';
  import { downloadJsonStoreWidthOut } from '@/store/modules/downloadJson';
  import { getJsonVersion } from '../../../utils/admin';
  const downloadJsonStore = downloadJsonStoreWidthOut();
  const columns = [
    {
      title: '序号',
      dataIndex: 'ID',
      key: 'ID',
    },
    {
      title: '章节ID',
      dataIndex: 'MapChapter',
      key: 'MapChapter',
    },
    {
      title: '活动名称',
      dataIndex: 'Name',
      key: 'Name',
    },
    {
      title: '排序',
      dataIndex: 'Sort',
      key: 'Sort',
    },
    {
      title: '开放时段',
      dataIndex: 'timeInterval',
      key: 'timeInterval',
      render(row) {
        return JSON.stringify(row.timeInterval);
      },
    },
    {
      title: '体力消耗',
      dataIndex: 'TL',
      key: 'TL',
    },
    {
      title: '免费开放次数',
      dataIndex: 'OpenTimes',
      key: 'OpenTimes',
    },
    {
      title: '关卡规则文本',
      dataIndex: 'ruleText',
      key: 'ruleText',
    },
  ];

  const data = ref([]);

  const columns2 = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '活动名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '开放等级',
      dataIndex: 'openLevel',
      key: 'openLevel',
    },
    {
      title: '开放时间',
      dataIndex: 'startTime',
      key: 'startTime',
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      key: 'endTime',
    },
  ];

  const data2 = ref([]);

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

      function loadLevelData() {
        data.value = downloadJsonStore.activity;
        if (data.value.length === 0) {
          downloadJsonStore.downloadActivity(getJsonVersion()).then((res) => {
            data.value = res;
          });
        }

        data2.value = downloadJsonStore.activity2;
        if (data2.value.length === 0) {
          downloadJsonStore.downloadActivity2(getJsonVersion()).then((res) => {
            data2.value = res;
          });
        }
      }
      onMounted(() => {
        loadLevelData();
      });

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