<script setup lang="ts" name="Rebate">
// $import
import { onBeforeMount, onMounted, onActivated, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";

import ic_rebate from "@/assets/images/ic_rebate.png";
import bg_rebate_placard from "@/assets/images/bg_rebate_placard.png";
// $import

// $type

// $type

// $data
const route = useRoute();
const router = useRouter();
const store = useStore();
const common_data = ref(store.state.common_data);
const game_id = ref(route.query.yiqiuid);
const page_loading = ref(false);
const page_width = ref(769);
// $data

// $computed

// $computed

// $watch

// $watch

// $methods
const backRoute = () => {
  //调用android原生方法
  if ((window as any).Android?.onBack) {
    (window as any).Android?.onBack();
    return;
  }
  router.back();
};

const onPageRefresh = () => {
  page_loading.value = false;
};
// $methods

// $lifecycle
onBeforeMount(() => {});

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

// 缓存后再次被激活
onActivated(async () => {
  window.scrollTo(0, 0); // 页面加载后滚动到顶部
});
// $lifecycle
</script>

<template>
  <van-pull-refresh
    class="rebate-detail-page"
    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="page">
      <header
        :style="`padding-top:${common_data.appHeight}px; max-width: ${page_width}px`"
        class="header-box-wrapper"
      >
        <div
          :style="`margin-top:${common_data.appHeight}px; max-width: ${page_width}px`"
          class="header-box"
        >
          <div class="tool-left">
            <span class="back" @click="backRoute">
              <svg-icon iconName="back"></svg-icon>
            </span>
          </div>
          <div class="center-content">首单不红返</div>
        </div>
        <div
          class="reserve-box"
        ></div>
      </header>
      <main class="rebate-content">
        <div class="placard-wrapper">
          <img class="photo" :src="bg_rebate_placard" alt="不中返" />
        </div>
        <div class="content-wrapper">
          <div class="content-container">
            <div class="label-row">
              活动说明：
              <div class="tag item-1"></div>
            </div>
            <div class="desc-content">
              <pre class="pre-content batch">
1、用户购买带<div :style="`background-image: url(${ic_rebate});`" class="bg-icon rebate-tag"></div>标识的专家方案后，如推荐与实际赛果不符，可全额返券。
2、后续下单即可用券0元购买同金额的推荐方案。
3、如0元购买的推荐还不正确，可免费体验会员3天。
              </pre>
            </div>
            <div class="label-row">
              规则：
              <div class="tag item-2"></div>
            </div>

            <div class="desc-content">
              <pre class="pre-content batch">
1、2025年3月1日起首次下单均专家方案可参与；
2、所有用户均可参与1次；
3、退还时间：比赛结果公布24小时内，自动退至我的-卡券；
4、不红返活动不支持提现、退款，返还卷7天内使用有效；
5、更多问题，请留言或<a class="a-link" href="https://m.ydn.com/user/online_service">咨询客服</a>。
              </pre>
            </div>
          </div>
        </div>
        <!-- <div class="tool-wrapper">
          <div class="tool-btn" @click="backRoute">立即参与</div>
        </div> -->
      </main>
    </div>
  </van-pull-refresh>
</template>

<style lang="scss">
.rebate-detail-page {
  height: 100vh;
  position: relative;
  overflow-y: auto;
  background-image: linear-gradient(to bottom, #dc0f42,  #dc0f42, #FF5F3A);

  &::-webkit-scrollbar {
    display: none;
  }

  .header-box-wrapper {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    background-color: #ebf4fe;
  }

  .header-box {
    z-index: 9998;
    position: fixed;
    top: 0;
    width: 100%;
    height: 44px;
    min-width: 320px !important;
    overflow: hidden;
    color: #000;
    background-color: #eaf4fe;
  }

  .tool-left {
    position: absolute;
    left: 10px;
    top: 50%;
    font-size: 16px;
    transform: translateY(-50%);
  }

  .reserve-box {
    width: 100%;
    min-height: 44px;
    background-color: #eaf4fe;
  }

  .center-content {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 16px;
    font-family: PingFangSC-Regular;
    transform: translate(-50%, -50%);
  }

  .rebate-content {
    overflow: auto;
    .placard-wrapper {
      height: 155px;
      background-color: #e8e8e8;

      .photo {
        height: 155px;
      }
    }

    .pre-content {
      white-space: pre-wrap;
      font-family: PingFangSC-Regular;

      &.batch {
        line-height: 28px;
      }
    }

    .content-wrapper {
      padding: 0 16px 30px 16px;
    }

    .content-container {
      padding: 18px 16px 0 16px;
      position: relative;
      border-radius: 12px;
      background-color: rgba(#fff, 0.9);
    }

    .label-row {
      position: relative;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      font-weight: 700;
      font-style: italic;
      z-index: 2;
      background-color: transparent;

      .tag {
        position: absolute;
        bottom: 1px;
        height: 10px;
        z-index: -1;
        border-radius: 10px;
        background-color: #ff2b2c;
      }

      .item-1 {
        width: 72px;
      }

      .item-2 {
        width: 40px;
      }
    }

    .desc-content {
      padding-top: 6px;
      font-size: 14px;
    }
  }

  .tool-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;

    .tool-btn {
      width: 128px;
      height: 36px;
      border-radius: 18px;
      color: #fff;
      font-size: 18px;
      line-height: 36px;
      text-align: center;
      background-color: #bb332a;
    }
  }

  .rebate-tag {
    display: inline-block;
    width: 75px;
    height: 16px;
    margin-right: 6px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;

    vertical-align: middle;
    margin-bottom: 4px;
  }

  .a-link {
    color: #2778FF;
  }
}
</style>