<template>
  <scroll-view ref="pageScrollView" class="page" :bounces="false" type="nested">
    <nested-scroll-header>
      <swiper ref="header" indicator-dots="true" circular="true">
        <swiper-item v-for="i in 3" :item-id="i">
          <image src="/static/shuijiao.jpg" style="width:100% ;height: 240px;"></image>
        </swiper-item>
      </swiper>
    </nested-scroll-header>
    <nested-scroll-body style="height: 100%;">
      <view style="flex: 1;">
        <scroll-view ref="tabScroll" class="swiper-tabs" direction="horizontal" :show-scrollbar="false">
          <view class="flex-row" style="align-self: flex-start;">
            <text ref="swipertab" class="swiper-tabs-item" :class="swiperIndex==index ? 'swiper-tabs-item-active' : ''"
              v-for="(item, index) in swiperList" :key="index" @click="onTabClick(index)">
              {{item.name}}
            </text>
          </view>
          <view ref="indicatorNode" class="swiper-tabs-indicator"></view>
        </scroll-view>
        <swiper ref="swiper" class="swiper-view" :current="swiperIndex" @transition="onSwiperTransition"
          @animationfinish="onSwiperAnimationfinish">
          <swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
            <long-page ref="longPageRef" :id="item.id" :type="item.type" :preload="item.preload"></long-page>
          </swiper-item>
        </swiper>
      </view>
    </nested-scroll-body>
  </scroll-view>
</template>

<script setup lang="ts">
  import longPage from '../long-list/long-list-page.uvue';

  type SwiperTabsItem = {
    x : number,
    w : number
  }

  type SwiperViewItem = {
    type : string,
    name : string,
    id : string,
    preload : boolean,
  }

  /**
   * 根据权重在两个值之间执行线性插值.
   * @constructor
   * @param {number} value1 - 第一个值，该值应为下限.
   * @param {number} value2 - 第二个值，该值应为上限.
   * @param {number} amount - 应介于 0 和 1 之间，指示内插的权重.
   * @returns {number} 内插值
   */
  function lerpNumber(value1 : number, value2 : number, amount : number) : number {
    return (value1 + (value2 - value1) * amount)
  }

  const swiperList = ref([
    {
      type: 'UpdatedDate',
      name: '最新上架',
      id: "list-id-1",
      preload: true
    } as SwiperViewItem,
    {
      type: 'FreeHot',
      name: '免费热榜',
      id: "list-id-2",
      preload: false
    } as SwiperViewItem,
    {
      type: 'PaymentHot',
      name: '付费热榜',
      id: "list-id-3",
      preload: false
    } as SwiperViewItem,
    {
      type: 'HotList',
      name: '热门总榜',
      id: "list-id-4",
      preload: false
    } as SwiperViewItem
  ] as SwiperViewItem[]);
  const swiperIndex = ref(0);
  const headerHeight = ref(0);
  const animationFinishIndex = ref(0);
  const tabScrollView = ref<UniElement | null>(null);
  const indicatorNode = ref<UniElement | null>(null);
  const swiperWidth = ref(0);
  const swiperTabsRect = ref([] as SwiperTabsItem[]);
  const nestedScrollChildId = ref("");

  const pageScrollView = ref<UniScrollViewElement | null>(null);
  const header = ref<UniSwiperElement | null>(null);
  const tabScroll = ref<UniScrollViewElement | null>(null);
  const swipertab = ref<UniElement[]>([]);
  const swiper = ref<UniSwiperElement | null>(null);
  const longPageRef = ref<ComponentPublicInstance[]>([]);

  function initSwiperItemData(index : number) {
    if (!swiperList.value[index].preload) {
      swiperList.value[index].preload = true;
      longPageRef.value[index].$callMethod('loadData', null)
    }
    //swiper页面切换需要重新赋值嵌套滚动子元素的id
    nestedScrollChildId.value = swiperList.value[index].id
  }

  function updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
    const current_size = swiperTabsRect.value[current_index]
    const move_to_size = swiperTabsRect.value[move_to_index]

    // 计算指示线 左边距 和 宽度 在移动过程中的线性值
    const indicator_line_x = lerpNumber(current_size.x, move_to_size.x, percentage)
    const indicator_line_w = lerpNumber(current_size.w, move_to_size.w, percentage)

    // 更新指示线
    // #ifdef APP
    const x = indicator_line_x + indicator_line_w / 2
    indicatorNode.value?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
    // #endif
    // #ifdef WEB
    // TODO chrome windows系统 transform scaleX渲染bug
    const x = indicator_line_x
    indicatorNode.value?.style?.setProperty('width', `${indicator_line_w}px`)
    indicatorNode.value?.style?.setProperty('transform', `translateX(${x}px)`)
    // #endif

    // 滚动到水平中心位置
    const scroll_x = x - swiperWidth.value / 2
    if (tabScrollView.value !== null) {
      tabScrollView.value!.scrollLeft = scroll_x
    }
  }

  function setSwiperIndex(index : number, updateIndicator : boolean) {
    if (swiperIndex.value === index) {
      return
    }

    swiperIndex.value = index

    initSwiperItemData(index)

    if (updateIndicator) {
      updateTabIndicator(index, index, 1)
    }
  }

  function onTabClick(index : number) {
    setSwiperIndex(index, false)
  }

  function onSwiperTransition(e : SwiperTransitionEvent) {
    // 微信 skyline 每项完成触发 Animationfinish，偏移值重置
    // 微信 webview 全部完成触发 Animationfinish，偏移值累加
    // 在滑动到下一个项的过程中，再次反向滑动，偏移值递减
    // uni-app-x 和微信 webview 行为一致

    const offset_x = e.detail.dx

    // 计算当前索引并重置差异
    const current_offset_x = offset_x % swiperWidth.value
    const current_offset_i = offset_x / swiperWidth.value
    const current_index = animationFinishIndex.value + parseInt(current_offset_i + '')

    // 计算目标索引及边界检查
    let move_to_index = current_index
    if (current_offset_x > 0 && move_to_index < swiperList.value.length - 1) {
      move_to_index += 1
    } else if (current_offset_x < 0 && move_to_index > 0) {
      move_to_index -= 1
    }

    // 计算偏移百分比
    const percentage = Math.abs(current_offset_x) / swiperWidth.value

    // 通知更新指示线
    if (current_index != move_to_index) {
      updateTabIndicator(current_index, move_to_index, percentage)
    }

    // 首次可见时初始化数据
    initSwiperItemData(move_to_index)
  }

  function onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
    setSwiperIndex(e.detail.current, true)
    animationFinishIndex.value = e.detail.current
  }

  function cacheTabItemsSize() {
    swiperTabsRect.value.length = 0
    swipertab.value.forEach((node) => {
      swiperTabsRect.value.push({
        x: node.offsetLeft,
        w: node.offsetWidth
      } as SwiperTabsItem)
    })
  }

  onReady(() => {
    headerHeight.value = header.value!.offsetHeight
    swiperWidth.value = swiper.value!.getBoundingClientRect().width
    cacheTabItemsSize()
    updateTabIndicator(swiperIndex.value, swiperIndex.value, 1)
  });

  onPullDownRefresh(() => {
    longPageRef.value[swiperIndex.value].$callMethod('refreshData', () => {
      uni.stopPullDownRefresh()
    })
  });
</script>

<style>
  .flex-row {
    flex-direction: row;
  }

  .page {
    flex: 1;
  }

  .search-bar {
    padding: 10px;
  }

  .swiper-list {
    height: 100%;
    /* #ifdef WEB */
    flex: 1;
    /* #endif */
  }

  .swiper-tabs {
    background-color: #ffffff;
    flex-direction: column;
  }

  .swiper-tabs-item {
    color: #555;
    font-size: 16px;
    padding: 12px 25px;
    white-space: nowrap;
  }

  .swiper-tabs-item-active {
    color: #007AFF;
  }

  .swiper-tabs-indicator {
    width: 1px;
    height: 2px;
    background-color: #007AFF;
  }

  .swiper-view {
    flex: 1;
  }

  .swiper-item {
    /* flex: 1; harmony 高度异常 */
    height: 100%;
  }
</style>