<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>

<script>
import { departInterence } from "@/api/api.js";

export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      ongoingList: [],
      overList: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getDataList();
  },
  methods: {
    // 获取数据
    async getDataList() {
      const res = await departInterence.getResearchStatistics();
      if (res.Ret === 200) {
        this.ongoingList = res.Data.OngoingList || [];
        this.overList = res.Data.OverList || [];
      }
    },
    // 跳转详情
    goDetailHandler(item) {
      this.$router.push({
        path: "registrationDetails",
        query: {
          id: item.BannerId,
          name:item.Remark
        },
      });
    },
  },
};
</script>
<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>
