<template>
  <view class="swiper-list">
    <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.title}}
        </text>
      </view>
    </scroll-view>
    <swiper ref="swiper" class="swiper-view" :current="swiperIndex" @transition="onSwiperTransition"
      @animationfinish="onSwiperAnimationfinish">
      <swiper-item class="swiper-item" v-for="(_, index) in swiperList" :key="index">
        <text class="swiper-item-text">{{index}}</text>
        <!-- 可以将上述text组件替换为list组件，实现可左右滑动的长列表 -->
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup lang="ts">
type SwiperViewItem = {
  title : string,
}

/**
 * 根据权重在两个值之间执行线性插值.
 * @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<SwiperViewItem[]>([])
const swiperIndex = ref(0)
const tabScroll = ref<UniScrollViewElement | null>(null)
const swipertab = ref<UniTextElement[] | null>(null)
const swiper = ref<UniSwiperElement | null>(null)
const animationFinishIndex = ref(0)
const swiperWidth = ref(0)

function updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
  if (percentage == 0) {
    return
  }
  const min_ratio = 1
  const max_ratio = 1.3
  const tabs = swipertab.value as UniTextElement[]
  const current_node = tabs[current_index]
  const move_to_node = tabs[move_to_index]
  const current_scale = lerpNumber(min_ratio, max_ratio, 1 - percentage)
  current_node.style.setProperty('transform', `scale(${current_scale})`)
  const move_to_scale = lerpNumber(min_ratio, max_ratio, percentage)
  move_to_node.style.setProperty('transform', `scale(${move_to_scale})`)
  const target_x = lerpNumber(current_node.offsetLeft, move_to_node.offsetLeft, percentage)
  const center_x = target_x + move_to_node.offsetWidth / 2 - swiperWidth.value / 2
  // app 平台后续支持 scrollTo()
  // #ifndef MP-WEIXIN
  tabScroll.value!.scrollLeft = center_x
  // #endif
  // #ifdef MP-WEIXIN
  tabScroll.value!.scrollTo({
    left: center_x
  })
  // #endif
}

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

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

function onSwiperTransition(e : SwiperTransitionEvent) {
  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)
  }
}

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

onLoad(() => {
  for (let i = 0; i < 4; i++) {
    swiperList.value.push({
      title: "Tab " + i
    } as SwiperViewItem)
  }
})

onReady(() => {
  (swiper.value as UniSwiperElement).getBoundingClientRectAsync()!.then((res : DOMRect) => {
    swiperWidth.value = res.width
    updateTabIndicator(swiperIndex.value, swiperIndex.value, 1)
  });
})

</script>

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

  .swiper-list {
    flex: 1;
  }

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

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

  .swiper-view {
    flex: 1;
  }

  .swiper-item {
    flex: 1;
    align-items: center;
    justify-content: center;
  }

  .swiper-item-text {
    font-size: 72px;
    font-weight: bold;
  }
</style>