<script setup lang="ts" name="GameProposal">
import {
  ref,
  toRef,
  watch,
  onBeforeMount,
  nextTick,
  onActivated,
  onBeforeUnmount,
  onDeactivated,
  computed,
} from "vue";

import { useGamePropsal } from "@/hooks/game/use-game-propsal";
import { debounce } from "@/until/index";
import { useRouter } from "vue-router";

import bg_rebate_tag from "@/assets/images/bg_rebate_tag.png";
import bg_rebate_80_tag from "@/assets/images/bg_rebate_80_tag.png";

import ProposalList from "./component/proposal-list.vue";
import DataModel from "./component/data-model.vue";
import SeriesConnection from "./component/series-connection.vue";

interface GameProposalProps {
  yiqiu_id: string | number;
}

// $props
const props = withDefaults(defineProps<GameProposalProps>(), {
  yiqiu_id: "",
});
// $props

// $data
const componentRef = ref();
const ProposalListRef = ref();
const router = useRouter();

const {
  loading,
  experts,
  zq_coin,
  user_info,
  list_loading,
  all_data_flag,
  err_data_flag,
  game_predict_list,
  nnjq_data_list,
  hwyc_predict_list,
  ssyc_detail,
  nnjq_detail,
  hwyc_detail,
  refresh_data,
  checkUserInfo,
  is_look,
  init_data,
  load_schemes_data_debounce,
} = useGamePropsal();
const yiqiu_id: any = toRef(props, "yiqiu_id");
const activeNav = ref<string>("0");
const cache_nav = ref<string[]>([]);
const refresh_falg = ref<boolean>(false);
  const banner_list = ref<any[]>([
  {
    src: bg_rebate_tag,
    link: '/rebate',
    type: 'route'
  },
  {
    src: bg_rebate_80_tag,
    link: 'https://m.ydn.com/user/coupons',
    type: 'link'
  },
]);

// $data

// $computed
const list_tip_txt = computed(() => {
  if (err_data_flag.value) {
    return "加载错误，点击重试";
  }

  if (list_loading.value) {
    return "加载中...";
  }

  if (all_data_flag.value) {
    return "没有更多数据了";
  }
  return "";
});
// const currentComponent = computed(() => {
//   if (activeNav.value === '0') {
//     return ProposalList
//   } else if (activeNav.value === '1') {
//     return DataModel;
//   }
// })
// $computed

// $watch
watch(
  () => user_info.value?.user_id,
  (newVal, oldVal) => {
    if (newVal !== oldVal || (newVal && !experts?.hongdan?.length)) {
      resetComponent();
    }
  },
  { immediate: true }
);

watch(
  () => props.yiqiu_id,
  (newVal, oldVal) => {
    if (!newVal) {
      experts.value.hongdan = [];
      return;
    } 
    if (newVal !== oldVal || (newVal && !experts?.hongdan?.length)) {
      resetComponent();
    }
  },
  { immediate: true }
);

watch(activeNav, (newVal, oldVal) => {
  if (!cache_nav.value.includes(newVal)) {
    if (activeNav.value == "0" && (refresh_falg.value || list_loading.value)) return;
    refresh_falg.value = true;
    const timer = setTimeout(() => {
      refresh_falg.value = false;
      clearTimeout(timer);
    }, 800);
    cache_nav.value.push(newVal);
    refresh_data(props.yiqiu_id as string, newVal);
  }
});
// $watch

// $methods
const handleSwipeClick = (item: any) => {
  if (item.type == 'link') {
    (window as any).location.href = item.link
  } else if (item.type == 'route') {
    router.push({
      path: item.link,
      query: {},
    });
  }
}
const onRefresh = () => {
  refresh_data(yiqiu_id.value, activeNav.value);
};
// 监听滚动事件
const onScroll = (event: Event) => {
  const { target } = event as any;
  if (
    !target ||
    activeNav.value !== "0" ||
    list_loading.value ||
    all_data_flag.value ||
    refresh_falg.value
  )
    return;
  const { scrollTop, scrollHeight, clientHeight } = target;
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    load_schemes_data_debounce(props.yiqiu_id as string);
  }
};

// 重新加载
const reload_list = () => {
  if (err_data_flag.value) {
    load_schemes_data_debounce(props.yiqiu_id as string);
  }
};

const reload_list_debounce = debounce(reload_list, 500);

const onScrollDebounce = debounce(onScroll, 500);

function resetComponent() {
  if (activeNav.value == "0" && (refresh_falg.value || list_loading.value)) return;
  refresh_falg.value = true;
  const timer = setTimeout(() => {
    refresh_falg.value = false;
    clearTimeout(timer);
  }, 800);
  activeNav.value = "0";
  cache_nav.value = ["0"];
  ProposalListRef?.value?.resetFilter?.();
  refresh_data(props.yiqiu_id as string, "0");
}

nextTick(() => {
  document
    .querySelector("#game-page")
    ?.addEventListener("scroll", onScrollDebounce, { passive: true });
});

// $methods

// $lifecycle
onActivated(() => {
  checkUserInfo();
});
onBeforeMount(() => {
  checkUserInfo();
  // localStorage.getItem('propsal_back') && (activeNav.value = '1');
});
onBeforeUnmount(() => {
  localStorage.removeItem("propsal_back");
});
onDeactivated(() => {
  localStorage.removeItem("propsal_back");
});
// $lifecycle

// $expose
defineExpose({ resetComponent });
// $expose
</script>

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

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

    <template #success>
      <div class="refresh-txt">
        <svg-icon
          className="icon"
          iconName="loading"
          :class="{ 'is-spinning': loading }"
        ></svg-icon>
        <span>刷新成功</span>
      </div>
    </template>
    <article class="box-model">
      <van-swipe v-if="user_info?.is_bzf" class="advertisement-wrapper" :autoplay="3000">
        <van-swipe-item v-for="(item, index) in banner_list" :key="index" @click="handleSwipeClick(item)">
          <img class="placard-photo" v-lazy="item.src" />
        </van-swipe-item>
      </van-swipe>
    </article>
    <!-- 模块导航 -->
    <div class="nav-wrapper">
      <div class="trapezium-nav">
        <div
          :class="['nav-bar-item', activeNav === '0' && 'active']"
          @click="activeNav = '0'"
        >
          <span>专家推荐</span>
        </div>
        <div
          :class="['nav-bar-item', activeNav === '1' && 'active']"
          @click="activeNav = '1'"
        >
          <span>数据模型</span>
        </div>
        <div
          :class="['nav-bar-item', activeNav === '2' && 'active']"
          @click="activeNav = '2'"
        >
          <span>定期串关</span>
        </div>
      </div>
    </div>
    <div class="model-content">
      <proposal-list
        ref="ProposalListRef"
        v-if="activeNav === '0'"
        :loading="list_loading"
        :user_info="user_info"
        :data-list="experts?.hongdan"
        :list-tip-txt="list_tip_txt"
        @reload-list="reload_list_debounce"
      />
      <data-model
        v-if="activeNav === '1'"
        :yiqiu_id="yiqiu_id"
        :user_info="user_info"
        :game_predict_list="game_predict_list"
        :nnjq_data_list="nnjq_data_list"
        :hwyc_predict_list="hwyc_predict_list"
        :ssyc_detail="ssyc_detail"
        :nnjq_detail="nnjq_detail"
        :hwyc_detail="hwyc_detail"
        :is_look="is_look"
      />
      <series-connection
        v-if="activeNav === '2'"
        :yiqiu_id="yiqiu_id"
        :zq_coin="zq_coin"
        :experts-list="experts.chuanguan"
      />
    </div>
  </van-pull-refresh>
</template>

<style lang="scss">
@use "@/common/style/common" as *;
.game-proposal-content {
  font-family: PingFangSC, PingFang SC !important;

  .box-model {
    margin-top: 10px;
    /* padding: 10px; */
    background-color: #fff;
    // border-top: 10px solid #f8f6f6;

    .advertisement-wrapper {
      height: 76px;
      margin-bottom: 4px;
    }

    .placard-photo {
      width: 100%;
      height: 76px;
    }
  }

  .nav-wrapper {
    /* padding: 10px 0 0 6px; */
    padding-left: 6px;
    background-color: #f6f6f6;
  }

  .model-content {
    min-height: 50vh;
    background-color: #fff;
  }

  .trapezium-nav {
    position: relative;
    color: #7d7c82;
    background-color: #e6e8ec;
    width: 240px;

    height: 32px; /* 设置高度 */
    border-radius: 10px; /* 圆角效果 */

    display: flex;

    .nav-bar-item {
      position: relative;
      flex: 1;
      height: 100%;
      width: 80px;
      background-color: #e6e8ec;
      border-radius: 10px; /* 圆角效果 */

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

      span {
        margin-top: 5px;
        position: relative;
        z-index: 9;
        font-size: 14px;
      }

      &::before {
        content: "";
        position: absolute;
        bottom: 0px; /* 将伪元素定位到顶部 */
        left: -7px;
        right: -7px;
        height: 80%;
        z-index: -1;
        background-color: #e6e8ec; /* 顶边颜色 */
        clip-path: polygon(
          7% 0%,
          93% 0%,
          100% 100%,
          0% 100%
        ); /* 使用clip-path实现梯形 */
      }
    }

    .nav-bar-item.active {
      color: #000;
      background-color: #fff;
      &::before {
        z-index: 1;
        background-color: #fff !important; /* 顶边颜色 */
      }
    }

    &::before {
      content: "";
      position: absolute;
      bottom: 0px; /* 将伪元素定位到顶部 */
      left: -7.5px;
      right: -7.5px;
      height: 80%;
      background-color: #e6e8ec; /* 顶边颜色 */
      clip-path: polygon(
        3% 0%,
        97% 0%,
        100% 100%,
        0% 100%
      ); /* 使用clip-path实现梯形 */
    }
  }

  .list-loading-tip {
    color: #cccccc;
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}
</style>