<template>
  <m-nav-bar :title="query.title" />
  <div class="cell-box">
    <van-cell
      class="cell"
      :title="
        item.placeIssueName ||
        item.classIssueName ||
        item.excellIssueName ||
        item.sequeIssueName
      "
      is-link
      center
      v-for="(item, index) in classData"
      :key="index"
      :border="false"
      @click="
        push({
          name: 'exercise',
          query: {
            ...query,
            placeIssue: item.placeIssue,
            classIssue: item.classIssue,
            excellIssue: item.excellIssue,
            sequeIssue: item.sequeIssue,
          },
        })
      "
    >
      <template #icon>
        <div class="icon">{{ index + 1 }}</div>
      </template>
    </van-cell>
  </div>
</template>

<script setup lang="ts">
import { getTopicClass } from "@/api";
import { ref } from "vue";
import { RouterBus } from "@/hooks";
const {
  route: { query },
  router: { push },
} = new RouterBus();
const classData = ref();
getTopicClass(query.path as string, query).then(({ data }) => {
  data.shift();
  classData.value = data;
});
</script>

<style lang="scss" scoped>
.cell-box {
  display: flex;
  padding: 5px 15px;
  flex-wrap: wrap;
  justify-content: space-between;
  .cell {
    width: 167px;
    margin-top: 10px;
    box-shadow: 0px 0px 10px rgba(124, 129, 136, 0.2);
  }
  .icon {
    width: 20px;
    height: 20px;
    background: #498ef5;
    border-radius: 50%;
    font-weight: 500;
    font-family: PingFang SC;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    margin-right: 5px;
  }
}
</style>
