<script setup lang="ts">
import { computed, ref } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
const dvMainStore = dvMainStoreWithOut()
const wRuleRef = ref(null)
const props = defineProps({
  tickLabelFormatter: {
    type: Function,
    default: value => value.toString() // 刻度标签格式化函数，默认直接转为字符串
  },
  direction: {
    type: String,
    default: 'horizontal' // 尺子方向
  }
})

const labelInterval = 5

const { canvasStyleData } = storeToRefs(dvMainStore)

const ticks = computed(() => {
  const result = []
  let currentValue = 0
  while (currentValue <= canvasStyleData.value.height) {
    const isLong = currentValue % (labelInterval * tickSize.value) === 0
    const label = isLong ? props.tickLabelFormatter(currentValue) : ''
    result.push({ position: (currentValue * canvasStyleData.value.scale) / 100, label, isLong })
    currentValue += tickSize.value
  }
  return result
})

const hStyle = computed(() => {
  return {
    height: canvasStyleData.value.height * 1.5 + 'px'
  }
})
const tickSize = computed(
  () =>
    10 *
    Math.max(Math.floor(200000 / (canvasStyleData.value.height * canvasStyleData.value.scale)), 1)
)

const scaleHeight = computed(
  () => (canvasStyleData.value.height * canvasStyleData.value.scale) / 100
)

const rulerScroll = e => {
  wRuleRef.value.scrollTo(0, e.scrollHeight)
}

defineExpose({
  rulerScroll
})
</script>

<template>
  <div class="ruler-outer-vertical" ref="wRuleRef">
    testtest
    <!--覆盖着尺子上方防止鼠标移到尺子位置滑动-->
    <div class="ruler-shadow-vertical"></div>
    <div :style="hStyle" class="ruler-outer-vertical-scroll">
      <div class="ruler" :style="{ height: `${scaleHeight}px` }">
        <div class="ruler-line" :style="{ height: `${scaleHeight}px` }"></div>
        <div
          v-for="(tick, index) in ticks"
          :key="index"
          class="ruler-tick"
          :class="{ 'long-tick': tick.isLong }"
          :style="{ left: `${tick.position}px` }"
        >
          <span v-if="tick.isLong" class="tick-label">{{ tick.label }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.ruler-shadow-vertical {
  position: absolute;
  width: 30px;
  height: 100%;
  z-index: 10;
  overflow: hidden;
}

.ruler-outer-vertical {
  position: absolute;
  width: 30px;
  height: 100%;
  overflow-y: auto;
  background-color: #2c2c2c;
  &::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }
}

.ruler-outer-vertical-scroll {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ruler {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  border-left: 1px solid #974e4e;
  background-color: #2c2c2c;
}

.ruler-line {
  position: absolute;
  bottom: 0;
  height: 1px;
  background-color: #ac2a2a;
}

.ruler-tick {
  position: absolute;
  bottom: 1px;
  height: 3px;
  width: 1px;
  background-color: #e38a8a;
}

.long-tick {
  width: 1px;
  height: 15px;
}

.tick-label {
  position: absolute;
  bottom: 2px;
  font-size: 8px;
  left: 50%;
  transform: translateX(2%);
  white-space: nowrap;
}
</style>