<script setup>
import { departInterence } from "@/api/api.js";
import { ref } from 'vue'
import { useRouter } from "vue-router";

const router=useRouter()

const ongoingList = ref([])
const overList = ref([])

// 获取数据
async function getDataList() {
  const res = await departInterence.getResearchStatistics();
  if (res.Ret === 200) {
    ongoingList.value = res.Data.OngoingList || [];
    overList.value = res.Data.OverList || [];
  }
}
getDataList()

// 跳转详情
function goDetailHandler(item) {
  router.push({
    path: "/registrationDetails",
    query: {
      id: item.BannerId,
      name: item.Remark
    },
  });
}

</script>

<template>
  <div class="container research-statistics-content">
    <p class="lable-txt">进行中</p>
    <div class="progress-box">
      <div
        class="progress-item"
        v-for="item in ongoingList"
        :key="item.BannerId"
        @click="goDetailHandler(item)"
      >
        <p class="title">{{ item.Remark }}</p>
        <p class="time">{{ item.StartDate }}～{{ item.EndDate }}</p>
        <p class="num">报名人数：{{ item.Count }}</p>
      </div>
    </div>
    <p class="lable-txt">已结束</p>
    <div class="progress-box">
      <div
        class="progress-item item-end"
        v-for="item in overList"
        :key="item.BannerId"
        @click="goDetailHandler(item)"
      >
        <p class="title">{{ item.Remark }}</p>
        <p class="time">{{ item.StartDate }}～{{ item.EndDate }}</p>
        <p class="num">报名人数：{{ item.Count }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.research-statistics-content {
  .lable-txt {
    margin-bottom: 20px;
  }
  .progress-box {
    display: flex;
    flex-wrap: wrap;
    .progress-item {
      width: 292px;
      height: 126px;
      padding: 20px;
      color: #409eff;
      border-radius: 4px;
      border: 1px solid #b3d8ff;
      background-color: #ecf5ff;
      margin: 0 20px 20px 0;
      box-sizing: border-box;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .item-end {
      color: #666666;
      border: 1px solid #c0c4cc;
      background-color: #f2f6fa;
      &:hover {
        color: #409eff;
        border: 1px solid #b3d8ff;
        background-color: #ecf5ff;
      }
    }
  }
}
</style>