<script setup lang="ts" name="Integral">
// $import
import { computed, onBeforeMount, onMounted, onActivated, ref } from "vue";
import { useRoute } from "vue-router";
import IntegralHeader from "@/views/integral/component/IntegralHeader.vue";

import { usePointsRanking } from "@/hooks/Integral/use-points-ranking";
// $import

// $type

// $type

// $data
const { stageId, page_loading, col_prefix, competitionType,  pointsRankData, pointsRankList, load_points_data } = usePointsRanking();
const route = useRoute();
const game_id = ref(route.query.yiqiuid);
const competition_id = ref(route.query.comid);
// $data

// $computed
const tip_content = computed(() => {
  if (page_loading.value) {
    return '加载中...'
  } else {
    return pointsRankList.value?.length === 0 && '暂无数据'
  }
})


// $computed


// $watch

// $watch

// $methods
const onPageRefresh = () => {
  load_points_data({
    nm_competition_id: competition_id.value,
    yiqiu_id: game_id.value,
  });
};
// $methods

// $lifecycle
onBeforeMount(() => {
  load_points_data({
    nm_competition_id: competition_id.value,
    yiqiu_id: game_id.value,
  });
});

onMounted(() => {
  window.scrollTo(0, 0);  // 页面加载后滚动到顶部
  setTimeout(() => {
    window.scrollTo(0, 0);  // 页面加载后滚动到顶部
  }, 0);
});

// 缓存后再次被激活
onActivated(async () => {
  window.scrollTo(0, 0);  // 页面加载后滚动到顶部
  if(game_id.value !== route.query.yiqiuid){
    game_id.value = route.query.yiqiuid;
    await load_points_data({
      yiqiu_id: game_id.value
    });
  } else {
    console.info('访问相同积分排名 active 激活')
  }
  pointsRankData.value?.nami_data?.tables.length || load_points_data({
      yiqiu_id: game_id.value
    });
});
// $lifecycle
</script>

<template>
  <van-pull-refresh v-model="page_loading" @refresh="onPageRefresh">
    <template #loosing>
      <div class="refresh-txt">
        <svg-icon
          className="icon"
          iconName="loading"
          :class="{ 'is-spinning': page_loading }"
        ></svg-icon>
        <span>释放即可刷新</span>
      </div>
    </template>

    <template #loading>
      <div class="refresh-txt">
        <svg-icon
          className="icon"
          iconName="loading"
          :class="{ 'is-spinning': page_loading }"
        ></svg-icon>
        <span>加载中……</span>
      </div>
    </template>

    <template #success>
      <div class="refresh-txt">
        <svg-icon
          className="icon"
          iconName="loading"
          :class="{ 'is-spinning': page_loading }"
        ></svg-icon>
        <span>加载完成</span>
      </div>
    </template>
    <div class="integral-ranking-page">
      <header class="header-wrapper">
        <integral-header :points-info="pointsRankData?.nami_data"></integral-header>
      </header>

      <main class="main-wrapper">
        <!-- 排名列表 -->
        <section class="integral-ranking">
          <aside v-if="pointsRankData?.nami_data?.competition_type === 1" class="aside-box">
            <div class="title">
              <h3>积分排名</h3>
            </div>
            <div class="button-box">
              <div :class="['rounded-button', competitionType === '0' && 'active']" @click="competitionType = '0'">全部</div>
              <div :class="['rounded-button', competitionType === '1' && 'active']" @click="competitionType = '1'">主场</div>
              <div :class="['rounded-button', competitionType === '2' && 'active']" @click="competitionType = '2'">客场</div>
            </div>
          </aside>

          <!-- 类型列表 -->
          <aside v-if="pointsRankData?.nami_data?.competition_type === 3" class="aside-box">
            <div class="button-box">
              <template v-for="item in pointsRankData.stage_list" :key="item.id">
                <div :class="['rounded-button',  stageId === item.id && 'active']" @click="stageId = item.id">{{ item.name_zh }}</div>
              </template>
            </div>
          </aside>

          <div class="table-box">
            <div v-if="!tip_content" class="ranking-table">
              <template v-for="(tableInfo) in pointsRankList">
                <h3 v-if="pointsRankData?.nami_data?.competition_type === 2 && tableInfo.group_label" class="team-label">{{ tableInfo.group_label }}组</h3>
                <div style="background-color: #fff !important;" class="rk-table-row header">
                <div class="rk-table-col"></div>
                <div class="rk-table-col">球队</div>
                <div class="rk-table-col">已赛</div>
                <div class="rk-table-col">胜/平/负</div>
                <div class="rk-table-col">进/失</div>
                <div class="rk-table-col">积分</div>
              </div>
              <template v-for="(item, index) in tableInfo.rows" :key="item.team_id" >
                <div v-if="competitionType === '0' && item?.promotion_info" :style="{backgroundColor: item.promotion_info?.mainColor}" class="rk-table-nav">{{ item.promotion_info?.title }}</div>
                <div class="rk-table-row">
                  <div :style="`background-color: ${competitionType === '0' && item?.promotion_color}`" class="rk-table-col">{{ index + 1 }}</div>
                  <div :style="`background-color: ${competitionType === '0' && item?.promotion_color}`" class="rk-table-col label-logo">
                    <div
                      class="col-logo"
                      :style="`background-image: url(${item.logo});`"
                    ></div>
                    <div class="text">{{ item.name_zh || '—--—' }}</div>
                  </div>
                  <div :style="`background-color: ${competitionType === '0' && item?.promotion_color}`" class="rk-table-col">{{ item[`${col_prefix}total`] }}</div>
                  <div :style="`background-color: ${competitionType === '0' && item?.promotion_color}`" class="rk-table-col">{{ item[`${col_prefix}won`] }}/{{ item[`${col_prefix}draw`] }}/{{ item[`${col_prefix}loss`] }}</div>
                  <div :style="`background-color: ${competitionType === '0' && item?.promotion_color}`" class="rk-table-col">{{ item[`${col_prefix}goals`] }}/{{ item[`${col_prefix}goals_against`] }}</div>
                <div :style="`color: #ff6858; background-color: ${competitionType === '0' && item?.promotion_color}`" class="rk-table-col">{{ item[`${col_prefix}points`] }}</div>
              </div>
              </template>
              </template>
            </div>
            <div v-else class="tip-content">
              <div class="content">{{ tip_content }}</div>
            </div>
          </div>
        </section>

        <!-- 赛事说明 -->
        <section v-if="pointsRankData?.nami_data?.competition_rule" class="competition-specification">
          <h3>赛制说明</h3>
          <pre class="pre-content">
{{ pointsRankData.nami_data?.competition_rule }}
          </pre>
        </section>
      </main>
    </div>
  </van-pull-refresh>
</template>

<style lang="scss">
.integral-ranking-page {
  position: relative;
  background-color: #fff;

  .header-wrapper {
    position: relative;
    max-width: 100%;
    overflow: hidden;
  }

  .main-wrapper {
    .aside-box {
      padding: 12px 8px;
    }

    .competition-specification {
      padding: 22px 10px;
    }

    .pre-content {
      white-space: pre-wrap;
    }

    .loading-box, .no-data-box {
      width: 100%;
      height: 50vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .col-logo {
    margin: 0 4px;
    width: 22px;
    height: 22px;
    flex-grow: 0;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
  }

  .aside-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .button-box {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 1px;
      box-sizing: border-box;
      border-radius: 15px;
      overflow: hidden;

      font-family: -apple-system;

      .rounded-button {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #777777;
        width: 64px;
        height: 28px;
        line-height: 17px;
        margin: 2px 3px;
        font-family: -apple-system;
        border-radius: 25px;

        cursor: pointer;
        border: 1px solid rgba(245, 245, 245, 1);

        &.active {
          color: #267bfb;
          background-color: #e8f0fa;
          box-shadow: 0px 1 4px 0px rgba(34, 122, 255, 0.3);
          overflow: hidden;
        }
      }
    }
  }

  .ranking-table {
    position: relative;
    overflow: auto;
    text-align: center;
    color: #999999;
    font-size: 12px;
    // border-top: 1px solid #eaeaea;

    .rk-table-nav {
      color: #fff;
      width: 100%;
      text-align: center;
      background: #ff7676;
    }

    .team-label {
      position: relative;
      color: #000;
      padding: 10px 22px;
      text-align: left;

      &::before {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        background-color: #347bfb;
      }
    }

    .rk-table-row {
      position: relative;
      display: flex;

      .rk-table-col {
        flex: 1;
        padding: 8px 0;
        min-width: 36px;
        border-bottom: 1px solid #eaeaea;
        border-right: 1px solid #eaeaea;

        display: flex;
        align-items: center;
        justify-content: center;

        &.label-logo {
          justify-content: flex-start;
        }

        &:nth-child(1) {
          width: 22px;
          min-width: 22px;
        }
        &:nth-child(2) {
          border: none;
          min-width: 108px;
          border-bottom: 1px solid #eaeaea;
        }
        &:nth-child(3) {
          border: none;
          min-width: 44px;
          border-bottom: 1px solid #eaeaea;
        }
        &:nth-child(4) {
          min-width: 66px;
        }
      }

    }

    .rk-table-row:nth-child(odd) .rk-table-col {
      background-color: #f6faff;
    }

    .rk-table-row.header {
      border-top: 1px solid #eaeaea;
      background-color: #fff !important;
    }

    .rk-table-row:not(.header) {
      display: flex;

      .rk-table-col:nth-child(2) {
        color: #000000;
        padding: 12px 0;
        font-weight: 600;
      }
      .rk-table-col::nth-child(3) {
        padding: 12px 0;
      }
      .rk-table-col::nth-child(4) {
        padding: 12px 0;
      }
    }
  }

  .tip-content {
    height: 50vh;

    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    border: 1px solid #eee;

    .content {
      font-size: 22px;
      font-weight: 700;
      color: #ccc;
    }
  }
}
</style>