<template>
  <!-- 进度条 -->
  <div id="NinePatchBar" :style="{ top: rProps.top, left: rProps.left }">
    <div ref="rPressDetectDiv" :style="{ width: 800, height: 84 }">
      <JsvScrollBox
        ref="rJsvScrollBox"
        :linkName="cLinkName"
        :style="{
          width: 800,
          height: cBarHeight,
        }"
        :direction="HORIZONTAL"
        :sliderSize="{
          width: 84,
        }"
      >
        <!-- 用位置固定的区域来进度条展示(FixedBox) -->
        <template #FixedBox="{ boxWidth, boxHeight }">
          <!-- 正向进度的颜色条(.9形变) -->
          <JsvScrollFollow
            ref="rJsvScrollFlowA"
            :proxyType="ScrollBoxStyle.JsvNinePatch"
            :proxyProps="{
              imageUrl: `jsvtexturestore://${cLeftBarTexture.id}`,
              imageWidth: cBitMap.width,
              centerWidth: 1,
              borderOutset: cCircleBorderGap,
              waitForInit: false,
            }"
            :syncWith="cLinkName"
            :varWidth="{ start: cMiniWidth, end: boxWidth }"
            :varHeight="boxHeight"
          />

          <!-- 反向进度的颜色条(.9形变) -->
          <JsvScrollFollow
            :proxyType="ScrollBoxStyle.JsvNinePatch"
            :syncWith="cLinkName"
            :varLeft="boxWidth /* 将left置于进度条最右边 */"
            :varWidth="{ start: -cMiniWidth, end: -boxWidth }"
            :varHeight="boxHeight"
            :syncType="ScrollBoxStyle.SyncReverse"
            :proxyProps="{
              imageUrl: `jsvtexturestore://${cRightBarTexture.id}`,
              imageWidth: cBitMap.width,
              centerWidth: 1,
              borderOutset: cCircleBorderGap,
              waitForInit: false,
            }"
          />

          <!-- 进度文字 -->
          <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, onUnmounted } from "vue";
import { DrawCircle } from "./DrawCircle";
import {
  JsvScrollBox,
  JsvScrollFollow,
  ScrollBoxStyle,
  HORIZONTAL,
} from "jsview";

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

const cLinkName = "ScrollBoxTest_NinePatchSlider";
const cBarHeight = 84;
const cMiniWidth = cBarHeight; // 进度条最小宽度和高度相同，形成一个.9的原点

/***** 构建NinePatch的图元 *****/
const cBitMap = {
  width: cBarHeight,
  height: cBarHeight,
};
const cCircleBorderGap = 2;
const cRadius = Math.floor((cBarHeight - 2 * cCircleBorderGap) / 2);
//相应Texture赋值
const cLeftBarTexture = DrawCircle(
  cBitMap.width,
  cBitMap.height,
  cRadius + cCircleBorderGap,
  cRadius + cCircleBorderGap,
  cRadius,
  "rgba(128,128,0,0.7)"
);
const cRightBarTexture = DrawCircle(
  cBitMap.width,
  cBitMap.height,
  cRadius + cCircleBorderGap,
  cRadius + cCircleBorderGap,
  cRadius,
  "rgba(0,128,255,0.7)"
);

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

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

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.5);

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

  rJsvScrollFlowA.value.setSensor((percent, x, y) => {
    console.log(
      `follow onProgress dragged percent=${percent} \
x=${Math.floor(x)} \
y=${Math.floor(y)}`
    );
  }, 15);
});

onUnmounted(() => {
  // 销毁记录在全局的texture
  cLeftBarTexture?.doRecycle();
  cRightBarTexture?.doRecycle();
});
</script>

<style scoped></style>
