<template>
  <!-- 进度条 -->
  <div :style="{ top: rProps.top, left: rProps.left }">
    <div ref="rPressDetectDiv" :style="{ width: 800, height: 84 }">
      <JsvScrollBox
        ref="rJsvScrollBox"
        :linkName="cLinkName"
        :style="{
          width: 800,
          height: 84,
        }"
        :direction="HORIZONTAL"
        :sliderSize="{
          width: 84,
        }"
      >
        <!-- 用位置固定的区域来进行进度条展示(FixedBox) -->
        <template #FixedBox="{ boxWidth, boxHeight }">
          <!-- 正向进度的颜色(对圆角div进行剪切) -->
          <JsvScrollFollow
            :proxyType="ScrollBoxStyle.SizeClip"
            :syncWith="cLinkName"
            :varWidth="{ start: 0, end: boxWidth }"
            :varHeight="boxHeight"
          >
            <div
              :style="{
                width: boxWidth,
                height: boxHeight,
                backgroundColor: 'rgba(128,128,0,0.7)',
                borderRadius: Math.floor(boxHeight / 2),
              }"
            />
          </JsvScrollFollow>

          <!-- 反向进度的颜色(对圆角div进行剪切) -->
          <JsvScrollFollow
            :proxyType="ScrollBoxStyle.SizeClip"
            :varMode="ScrollBoxStyle.Size"
            :syncWith="cLinkName"
            :varLeft="boxWidth /* 将left置于进度条最右边 */"
            :varWidth="{ start: 0, end: -boxWidth }"
            :varHeight="boxHeight"
            :syncType="ScrollBoxStyle.SyncReverse"
          >
            <div
              :style="{
                left: -boxWidth,
                width: boxWidth,
                height: boxHeight,
                backgroundColor: 'rgba(0,128,255,0.7)',
                borderRadius: Math.floor(boxHeight / 2),
              }"
            />
          </JsvScrollFollow>

          <!-- 进度文字 -->
          <div
            :style="{
              width: boxWidth,
              height: boxHeight,
              lineHeight: boxHeight,
              fontSize: Math.floor(boxHeight * 0.5),
              textAlign: 'center',
              color: 'rgba(0,0,0,1)',
            }"
          >
            {{
              `左黄色:${rPercentDisp} 右蓝色:${
                Math.floor((1 - rPercentDisp) * 100) / 100
              }`
            }}
          </div>
        </template>

        <!-- 进度游标球(SliderBox) -->
        <template #SliderBox="{ boxWidth, boxHeight }">
          <div
            :style="{
              top: -15,
              left: -15,
              width: boxWidth + 30,
              height: boxHeight + 30,
              backgroundColor: 'rgba(255, 0,0,0.5)',
              borderRadius: Math.floor((boxHeight + 30) / 2),
            }"
            @click="fncOnClick"
          />
        </template>
      </JsvScrollBox>
    </div>
  </div>
</template>

<script setup>
import { shallowRef, onMounted } from "vue";
import {
  JsvScrollBox,
  JsvScrollFollow,
  ScrollBoxStyle,
  HORIZONTAL,
} from "jsview";
import { numberCheckSet } from "../../jsview-vue/utils";

let rProps = defineProps({
  top: {
    Type: Number,
    default: 0,
  },
  left: {
    Type: Number,
    default: 0,
  },
});

const cLinkName = "ScrollBoxTest_ClipSlider";

//进度百分比
let myProgress = shallowRef(20);

let fncOnClick = () => {
  console.log("ClipBar slider OnClicked");
};

let rJsvScrollBox = shallowRef(null);
let rPressDetectDiv = shallowRef(null);
let rPercentDisp = shallowRef(0);

onMounted(() => {
  rJsvScrollBox.value.setSensor((percent, x, y) => {
    rPercentDisp.value = Math.floor(percent * 100) / 100;
    console.log(
      `onProgress dragged percent=${percent} \
x=${Math.floor(x)} \
y=${Math.floor(y)}`
    );
  }, 15);

  // 通过代码设计进度条位置, 同理按键操作下来的进度条调整也可以这么处理
  rJsvScrollBox.value.updatePercent(0.7);

  // 注册按下抬起的监听
  rPressDetectDiv.value.jsvSetTapListener({
    onTouchStart: () => {console.log(" touch start")},
    onTouchEnd: () => {
      rPercentDisp.value =
        Math.floor(rJsvScrollBox.value.currentPercent() * 100) / 100;
      console.log("ClipBar release percent=" + rPercentDisp.value);
    },
  });
});
</script>

<style scoped></style>
