<template>
  <!-- 进度条 -->
  <div :style="{ top: rProps.top, left: rProps.left }">
    <JsvScrollBox
      ref="rJsvScrollBox"
      :style="{
        width: 800,
        height: 84,
      }"
      :direction="HORIZONTAL"
      :sliderSize="{
        width: 84,
      }"
    >
      <template #FixedBox="{ boxWidth, boxHeight }">
        <div
          :style="{
            width: boxWidth,
            height: boxHeight,
            lineHeight: boxHeight,
            backgroundColor: 'rgba(255,255,255,0.3)',
            borderRadius: Math.floor(boxHeight / 2),
            fontSize: Math.floor(boxHeight * 0.5),
            textAlign: 'center',
            color: 'rgba(0,0,0,1)',
          }"
        >
          {{ `进度:${rPercentDisp}` }}
        </div>
      </template>
      <template #SliderBox="{ boxWidth, boxHeight }">
        <div
          :style="{
            top: -15,
            left: -15,
            width: boxWidth + 30,
            height: boxHeight + 30,
            backgroundColor: 'rgba(255, 0,0,0.8)',
            borderRadius: Math.floor((boxHeight + 30) / 2),
          }"
          @click="fncOnClick"
        />
      </template>
    </JsvScrollBox>
  </div>
</template>

<script setup>
import { shallowRef, onMounted } from "vue";
import { JsvScrollBox, HORIZONTAL } from "jsview";

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

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

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

let rJsvScrollBox = 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);
});
</script>

<style scoped>
.bgSty {
  background-color: #5490d1;
  width: 1280;
  height: 720;
}
.logo-bg {
  width: 800;
  height: 400;
}
.text {
  width: 800;
  height: 200;
  font-size: 24;
  font-weight: bold;
  line-height: 32;
  color: #ffffff;
  text-align: center;
}
.bg1 {
  left: 0;
  top: 0;
  height: 400;
  width: 267;
  background-color: #007f00;
}
.bg2 {
  left: 267;
  top: 0;
  height: 400;
  width: 267;
  background-color: #3049b8;
}
.bg3 {
  left: 534;
  top: 0;
  height: 400;
  width: 266;
  background-color: #d12b8c;
}
</style>
