<template>
  <view class="competition">
    <view
      class="avtivity-item"
      v-for="item in competitionList"
      :key="item.id"
      @click="goPage(item)"
    >
      <image class="activity-img" mode="aspectFill" :src="item.imgUrl" />
      <view class="activity-text">
        <view class="text">{{ item.name }}</view>
        <text class="date"> {{ item.startTime }}-{{ item.endTime }} </text>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getCompetitionDate,
  getCompetitionId,
  getAllCompetition,
} from "@/api/competition";
import Tip from "@/utils/tip.js";
export default {
  name: "competition",
  async onLoad() {
    await this.getAllCompetition();
  },
  data() {
    return {
      startStr: "",
      endStr: "",
      competitionId: "",
      competitionList: [], // 赛事列表
    };
  },
  methods: {
    goPage(item) {
      const { progress, id, name } = item;
      if (progress) {
        uni.navigateTo({
          url: `/pages/competition/apply?competitionId=${id}&name=${name}`,
        });
      } else {
        Tip.error("该比赛已结束");
      }
    },
    // 查询所有赛事
    async getAllCompetition() {
      const { status, data } = await getAllCompetition();
      if (status === 200) {
        // console.log(data, "data");
        this.competitionList = data.map((item) => {
          item.startTime = item.startTime.split(" ")[0].replace(/\-/g, "/");
          item.endTime = item.endTime.split(" ")[0].replace(/\-/g, "/");
          return item;
        });
      }
    },
    // 获取赛事id
    async getCompetitionId() {
      const { status, data } = await getCompetitionId();
      if (status === 200) {
        // console.log(data);
        this.competitionId = data;
      }
    },
    // async getCompetitionDate () {
    //   const { status, data } = await getCompetitionDate({competitionId: this.competitionId})
    //   if (status === 200) {
    //     console.log(data);
    //     const [ startStr, endStr ] = data
    //     this.startStr = startStr.split(' ')[0].replace(/\-/g, '/')
    //     this.endStr = endStr.split(' ')[0].replace(/\-/g, '/')
    //   }
    // },
  },
};
</script>

<style lang="less" scoped>
.competition {
  padding-top: 20px;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background: linear-gradient(145deg, #bfd6ff 0%, #fefefe 100%);
  overflow-y: auto;
  .avtivity-item {
    position: relative;
    margin: 40rpx auto 0;
    width: 686rpx;
    min-height: 442rpx;
    background: #ffffff;
    box-shadow: 0px 4rpx 40rpx 0px rgba(191, 216, 255, 0.7);
    border-radius: 40rpx;
    overflow: hidden;
    .activity-img {
      display: block;
      width: 100%;
      height: 292rpx;
      object-fit: cover;
    }
    .activity-text {
      margin: 26rpx 24rpx;
      .text {
        min-height: 46rpx;
        font-size: 30rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 46rpx;
      }
      .date {
        margin-top: 4rpx;
        height: 40rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 40rpx;
      }
    }
  }
}
</style>