<template>
  <view class="competition-apply">
    <view class="tabs">
      <van-tabs
        class="van-tabs"
        color="#fff"
        :active="tabsActive"
        @change="onChangeTabs"
        title-active-color="#fff"
        title-inactive-color="rgba(255, 255, 255, 0.5)"
      >
        <van-tab title="活动列表">
          <view class="competition-title">
            <image mode="aspectFill" :src="staticImg.competitionTitleText">
              <text class="competition-title-text">第17届“逻辑狗杯”全国儿童思维魔法嘉年华</text>
          </view>

          <view class="competition-list">
            <!-- 地区 -->
            <view
              class="region"
              v-for="(item, index) in competitionList"
              :key="item.id"
            >
              <image
                class="apply1"
                :src="require(`@/static/activity/apply${index + 1}.png`)"
              />
              <view class="label region-label">{{ item.name }}</view>
              <view
                class="date region-date"
                :style="{
                  marginBottom: index === 0 ? '16rpx' : '26rpx',
                }"
                >{{ item.startTime | filterStartTime }}</view
              >
              <view
                v-if="index === 0"
                class="select-button region-button"
                @click="handleGoSignUp"
              >
                <image
                  class="select-button"
                  src="@/static/activity/select-button.png"
                />
                <text class="button-text">承办单位报名入口</text>
              </view>
              <view
                :class="[
                  formatDate(item.startTime, item.endTime)
                    ? 'select-button'
                    : 'unselect-button',
                  'region-button',
                ]"
                @click="goApplySchoolPage(item, index)"
              >
                <image
                  :class="[
                    formatDate(item.startTime, item.endTime)
                      ? 'select-button'
                      : 'unselect-button',
                  ]"
                  :src="
                    require(`@/static/activity/${
                      formatDate(item.startTime, item.endTime)
                        ? 'select-button'
                        : 'button'
                    }.png`)
                  "
                />
                <text class="button-text">
                  {{ (index + 1) | filterButton }}
                </text>
              </view>
            </view>
          </view>
        </van-tab>
        <van-tab title="我的报名">
          <my-register-list :list="agentRegisterList" />
        </van-tab>
      </van-tabs>
    </view>

    <van-toast id="van-toast" />
  </view>
</template>

<script>
import {
  getCompetitionList,
  getCompetitionId,
  getAgentRegisterListByPage,
} from "@/api/competition";
// import Toast from 'path/to/@vant/weapp/dist/toast/toast';
import Toast from "@/wxcomponents/toast/toast";
import dayjs from "dayjs";
import Tip from "@/utils/tip.js";
import MyRegisterList from "./components/myRegisterList.vue";
const staticImg = {
  competitionTitleText: require("@/static/image/competitionTitleText.png"),
};

export default {
  name: "competition-apply",
  components: {
    MyRegisterList,
  },
  filters: {
    filterStartTime(records) {
      const [dayStr] = records.split(" ");
      const [year, month, day] = dayStr.split("-");
      return year + "年" + month + "月" + day + "日";
    },
    filterButton(index) {
      switch (String(index)) {
        case "1":
          return "我的地区选手报名详情";

        case "2":
          return "提交晋级名单";

        case "3":
          return "成绩/排名";
      }
    },
  },
  async onLoad(options) {
    const { competitionId, name } = options;
    this.competitionId = competitionId;
    this.name = name;
    await this.getCompetitionList();
    await this.getAgentRegisterListByPage();
  },
  data() {
    return {
      staticImg,
      tabsActive: 0,
      competitionList: [],
      name: "",
      competitionId: "",
      queryParams: {
        page: 1,
        pageSize: 1000000,
      },
      agentRegisterList: [], // 园所报名列表
    };
  },
  methods: {
    // 我的报名列表
    async getAgentRegisterListByPage() {
      const { data, msg, status } = await getAgentRegisterListByPage(
        this.queryParams
      );
      if (status === 200) {
        // console.log(data, "getAgentRegisterListByPage");
        this.agentRegisterList = data.entityList;
      } else {
        Tip.error(msg);
      }
    },
    // 去报名
    handleGoSignUp() {
      uni.navigateTo({
        url: `/pages/competitionRegister/index?competitionId=${this.competitionId}`,
      });
    },
    onChangeTabs(e) {
      // console.log(e);
    },
    // 解析对比时间
    formatDate(startStr, endStr) {
      return (
        dayjs().isBefore(dayjs(endStr)) && dayjs().isAfter(dayjs(startStr))
      );
    },
    // 参赛时间对比
    applyFormatDate(startStr, endStr) {
      return [
        dayjs().isAfter(dayjs(startStr)),
        dayjs().isBefore(dayjs(endStr)),
      ];
    },
    // 跳转页面
    goApplySchoolPage(records, index) {
      const { id, startTime, endTime } = records;
      const competiitionLabel =
        index + 1 === 2
          ? this.competitionList[1].name
          : index + 1 === 3
          ? this.competitionList[2].name
          : this.competitionList[0].name;
      const [startState, endState] = this.applyFormatDate(startTime, endTime);
      console.log(startTime, endTime, startState, endState);

      if (!endState) {
        Toast(`${competiitionLabel}已结束\n ${this.formatStr(endTime)}`);
      } else if (!startState) {
        Toast(`${competiitionLabel}还未开始\n ${this.formatStr(startTime)}`);
      } else if (startState && endState) {
        if (index === 0) {
          uni.navigateTo({
            url: `/pages/competition/applySchool?id=${id}`,
          });
        } else if (index === 1) {
          uni.navigateTo({
            url: `/pages/promoted/index?stageId=${id}`,
          });
        }
      }
    },
    formatStr(records) {
      const [dayStr] = records.split(" ");
      const [year, month, day] = dayStr.split("-");
      return year + "年" + month + "月" + day + "日";
    },
    // 获取参赛列表
    async getCompetitionList() {
      const { status, data } = await getCompetitionList({
        competitionId: this.competitionId,
      });
      if (status === 200) {
        this.competitionList = data;
      }
    },
    // 获取赛事id
    async getCompetitionId() {
      const { status, data } = await getCompetitionId();
      if (status === 200) {
        console.log(data);
        this.competitionId = data;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.absoluted {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.competition-apply {
  width: 100vw;
  min-height: 100vh;
  background: #1677ff;
  position: relative;
  overflow: hidden;
  padding-bottom: 100rpx;

  .competition-title {
    position: relative;
    margin: 16rpx auto 0;
    width: 718rpx;
    height: 118rpx;
    image {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .competition-title-text {
      position: absolute;
      top: 42rpx;
      left: 0;
      right: 0;
      z-index: 1;
      margin: 0 auto;
      height: 36rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #868585;
      line-height: 36rpx;
      text-align: center;
    }
  }
  .region {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    position: relative;
    width: 718rpx;
    height: 416rpx;
    .apply1 {
      position: absolute;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .region-label {
      position: relative;
      z-index: 2;
    }
    .region-date {
      position: relative;
      z-index: 2;
      margin-top: 10rpx;
    }
    .region-button {
      position: relative;
      z-index: 2;
      .button-text {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
      }
    }
  }

  .label {
    font-size: 40rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    line-height: 56rpx;
  }
  .date {
    width: 100%;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .apply-button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    .button-img {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
    }
  }
  .button-text {
    position: absolute;
    top: 28rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 40rpx;
  }
  .select-button {
    width: 432rpx;
    height: 100rpx;
    object-fit: cover;
  }
  .unselect-button {
    position: absolute;
    top: 12rpx;
    width: 404rpx;
    height: 70rpx;
    object-fit: cover;
  }
}

/deep/ .van-tabs__scroll {
  background-color: transparent;
}

/deep/ .van-tabs {
  background-color: transparent !important;
}
</style>