<template>
  <van-sticky>
    <van-nav-bar title="积分排名" />
  </van-sticky>

  <van-overlay :show="overlayloading">
    <div class="wrapper">
      <van-loading color="#0094ff"> 加载中... </van-loading>
    </div>
  </van-overlay>
  <div class="common-flex ranking-container">
    <van-list v-if="rankings.length !== 0">
      <van-cell
        v-for="(ranking, index) in rankings"
        :key="index"
        class="ranking-item deep"
      >
        <template #title>
          {{ ranking.createName }}
        </template>
        <template #label>
          <div>部门: {{ ranking.deptName }}</div>
          <div>积分: {{ ranking.answerScore }}</div>
        </template>

        <!--        <div class="ranking-content">-->
        <!--          <p class="user-info">{{ ranking.createName }} </p>-->
        <!--          <p class="course-info">课程: {{ ranking.name }}</p>-->
        <!--          <p class="dept-name">部门: {{ ranking.deptName }}</p>-->
        <!--          <p class="score">积分: {{ ranking.answerScore }}</p>-->
        <!--&lt;!&ndash;          <p class="status">&ndash;&gt;-->
        <!--&lt;!&ndash;            状态: {{ ranking.isNewRecord ? '新记录' : '旧记录' }}&ndash;&gt;-->
        <!--&lt;!&ndash;          </p>&ndash;&gt;-->
        <!--        </div>-->
      </van-cell>
    </van-list>
    <div v-else class="no-results">暂无积分排名</div>
  </div>
</template>

<script setup>
import { sortData } from "@/api/dati";

import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
const router = useRouter();
const overlayloading = ref(false);
const rankings = ref([]);
const getSortData = async (name, pageSize = 20, pageNo = 1) => {
  try {
    const res = await sortData({
      // name: "全员日常抽考",
      // sortType:"1",
      name: name,
      pageSize: pageSize,
      pageNo: pageNo,
      __ajax: "json",
    });
    console.log("res44----------->", res);
    if (res && res.list) {
      rankings.value = res.list;
    }
  } catch (error) {
    console.error("出错：", error);
    showToast("获取失败，请稍后重试");
  }
  console.log("考试结果:", rankings.value);
};

const go = () => {
  router.replace("/dailyproblem");
};

// 在组件挂载时
onMounted(() => {
  getSortData();
});
</script>

<style scoped>
.ranking-container {
  background: #ffffff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.ranking-item {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-content {
  color: #333;
  text-align: left;
}

.user-info {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
}

.course-info {
  margin: 5px 0;
}

.dept-name {
  color: #888;
  font-size: 14px;
}

.score {
  color: #007aff;
  margin: 5px 0;
}

.status {
  font-size: 14px;
  color: #555;
}

.no-results {
  text-align: center;
  color: #888;
  font-size: 16px;
  margin-top: 20px;
}
/* 遮罩 */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.van-overlay {
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
