<template>
  <!-- #ifdef APP -->
  <scroll-view class="page">
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="grid-view">
      <slider ref="sliderRef" class="slider" v-for="(_, index) in 100" :key="index" @changing="sliderChanging"
        @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
  <view :style="{'height': safeAreaInsetsBottom}"></view>
</template>

<script setup lang="uts">
const title = ref('sliderx100通信性能测试(小程序卡为正常)')
const sliderValue = ref(50)
const safeAreaInsetsBottom = ref(0)
const sliderRef = ref<UniSliderElement[]>([])


function updateSliderValue(value: number) {
  // #ifndef MP
  // TODO 跳过vue框架，直接修改原生组件
  sliderRef.value.forEach((item) => {
    item.value = value
  })
  // #endif

  // #ifdef MP
  sliderValue.value = value
  // #endif
}

function sliderChange(e: UniSliderChangeEvent) {
  updateSliderValue(e.detail.value)
}

function sliderChanging(e: UniSliderChangeEvent) {
  updateSliderValue(e.detail.value)
}

onReady(() => {
  safeAreaInsetsBottom.value = uni.getWindowInfo().safeAreaInsets.bottom
})

// 自动化测试
const updateSliderValueTest = (value : number) => {
  sliderValue.value = value
}
defineExpose({updateSliderValueTest})
</script>

<style>
  .page {
    flex: 1;
  }

  .grid-view {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .slider {
    width: 25%;
    margin-top: 1px;
    margin-left:0;
    margin-right: 0;
    margin-bottom: 1px;
  }
</style>