<template>
  <div>
    <n-card :bordered="false" class="proCard" title="普通关卡">
      <BasicTable
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        ref="actionRef"
        @update:checked-row-keys="onCheckedRow"
        :scroll-x="1090"
        :flex-height="false"
        :pagination="false"
        :resizeHeightOffset="-2000"
      />
    </n-card>
    <Activity :userId="userId" :userInfo="userInfo" />
  </div>
</template>

<script lang="ts" setup>
  import { h, ref } from 'vue';
  import { BasicTable } from '@/components/Table';
  import { OrdinaryList } from '@/api/echarts/LevelProgress';
  import { userInfoObj } from '@/views/account/accountList/userInfo';
  import { NTag } from 'naive-ui';
  import Activity from './Activity.vue';
  import {getDifficultName} from "@/utils/index";

  const props = withDefaults(defineProps<Props>(), { userId: 0, userInfo: userInfoObj });

  interface Props {
    userId?: number | string;
    userInfo?: any;
  }

  const columns = [
    {
      title: '关卡',
      render: (rows, _) => {
        return rows.name;
      },
    },
    {
      title: '困难度',
      dataIndex: 'difficulty',
      key: 'difficulty',
      render: (rows, _) => {
        return getDifficultName(rows.difficulty);
      },
    },
    {
      title: '房间数',
      dataIndex: 'roomCount',
      key: 'roomCount',
    },
    {
      title: '已通过房间数',
      dataIndex: 'count',
      key: 'count',
    },
    {
      title: '最大探索度',
      dataIndex: 'maxRoomId',
      key: 'maxRoomId',
      render: (rows, _) => {
        return ((rows.count / rows.roomCount) * 100).toFixed(0) + '%';
      },
    },
    {
      title: '是否通关',
      dataIndex: 'pass',
      key: 'pass',
      render: (rows, _) => {
        return h(
          NTag,
          {
            style: {
              marginRight: '6px',
            },
            type: rows.pass == false ? 'error' : 'info',
            bordered: false,
          },
          {
            default: () => (rows.pass == false ? '否' : '是'),
          }
        );
      },
    },
  ];

  const actionRef = ref();

  const loadDataTable = async (_res) => {
    let lists = await OrdinaryList({
      ...{ player_id: props.userId },
    });
    console.log('lists:' + JSON.stringify(lists));
    lists.list.sort((a, b) => {
      return a.id < b.id ? -1 : 1;
    });

    return lists;
  };

  function onCheckedRow(rowKeys) {
    console.log(rowKeys);
  }
</script>

<style lang="less" scoped></style>
