<template>
  <view class="scroll_indicator_container">
    <view class="scroll_indicator">
      <view class="indicator" :style="{ left: `${scroll_left}%` }"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
let getWindowInfo = uni.getWindowInfo()
import { defineProps, defineEmits, watch, ref } from 'vue'
const props = defineProps(['scroll_view'])
const scroll_left = ref(0)
watch(
  () => props?.scroll_view?.scrollLeft,
  e => {
    let res = props?.scroll_view
    let maxScrollLeft = res?.scrollWidth - getWindowInfo?.windowWidth
    let scrollPercentage = (res?.scrollLeft / maxScrollLeft) * 100
    scroll_left.value = (scrollPercentage / 100) * 25
  }
)
</script>

<style lang="scss" scoped>
.scroll_indicator_container {
  width: 100%;
}
.scroll_indicator {
  background-color: #eee;
  width: 60rpx;
  margin: 0 auto;
  margin-top: 15rpx;
  .indicator {
    background-color: #304483;
    border-radius: 100rpx;
    width: 35rpx;
    height: 8rpx;
    position: relative;
  }
}
</style>
