<template>
  <div :style="styleMap?.mainStyle" class="w-full h-full box-border relative">
    <ImageBg
      :src="styleMap?.mainStyle?.imageSrc"
      :image-color-style="styleMap?.mainStyle?.imageStyle"
    />
    <div class="absolute" :style="{ ...(styleMap?.indicatorStyle || {}), ...otherStyle.barStyle }">
      <ImageBg
        :src="styleMap?.indicatorStyle?.imageSrc"
        :image-color-style="styleMap?.indicatorStyle?.imageStyle"
      />
      <!-- 左边值 -->
      <div
        v-if="mode === 'range'"
        :style="{
          ...styleMap?.knobStyle,
          ...otherStyle.startKnobStyle
        }"
        class="absolute aspect-square"
      >
        <ImageBg
          :src="styleMap?.knobStyle?.imageSrc"
          :image-color-style="styleMap?.knobStyle?.imageStyle"
        />
      </div>
      <!-- 右边值 -->
      <div
        :style="{
          ...styleMap?.knobStyle,
          ...otherStyle.endKnobStyle
        }"
        class="absolute aspect-square"
      >
        <ImageBg
          :src="styleMap?.knobStyle?.imageSrc"
          :image-color-style="styleMap?.knobStyle?.imageStyle"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useWidgetStyle } from '../hooks/useWidgetStyle'
import ImageBg from '../ImageBg.vue'

const props = defineProps<{
  width?: number
  height?: number
  text?: string
  styles: any
  state?: string
  part?: string
  min: number
  max: number
  value: number
  mode: 'normal' | 'symmetrical' | 'range'
  startValue: number
}>()

const styleMap = useWidgetStyle({
  widget: 'lv_slider',
  props
})

const otherStyle = computed(() => {
  const { value = 0, max: e = 100, min: s = 0, width = 0, height = 0, mode, startValue } = props
  // 不管范围值如何，都取实际最小值和最大值
  const min = Math.min(e, s)
  const max = Math.max(e, s)
  const count = max - min
  let percent = ((value - min) / count) * 100
  if (percent > 100) percent = 100
  if (percent < -100) percent = -100
  // 开始值
  const a = ((startValue - min) / count) * 100
  const start = `${a < 0 ? 0 : a > 100 ? 100 : a}%`
  // 是否反转
  const reverse = s > e

  let top = 'auto',
    left = 'auto',
    right = 'auto',
    bottom = 'auto'

  // 滑条方向
  let direction = 'ltr'

  // 横向样式
  if (width >= height) {
    top = '0'
    if (max > min) {
      // 左->右
      left = '0'
      right = `${100 - percent}%`
      if (mode === 'range') {
        left = start
        right = `${100 - percent}%`
      }
      if (mode === 'symmetrical') {
        left = value > 0 ? `${(-min / count) * 100}%` : `${percent}%`
        right = value > 0 ? `${100 - percent}%` : `${(-min / count) * 100}%`
      }
    } else {
      // 右->左
      direction = 'rtl'
      right = '0'
      left = `${100 - percent}%`
      if (mode === 'range') {
        right = start
        left = `${100 - percent}%`
      }
      if (mode === 'symmetrical') {
        left = value > 0 ? `${(-min / count) * 100}%` : `${percent}%`
        right = value > 0 ? `${100 - percent}%` : `${(-min / count) * 100}%`
      }
    }
  }

  // 纵向样式
  if (width < height) {
    left = '0'
    if (max < min) {
      // 上->下
      direction = 'ttb'
      top = '0'
      bottom = `${100 - percent}%`
      if (mode === 'range') {
        top = start
        bottom = `${100 - percent}%`
      }
      if (mode === 'symmetrical') {
        top = value > 0 ? `${(-min / count) * 100}%` : `${percent}%`
        bottom = value > 0 ? `${100 - percent}%` : `${(-min / count) * 100}%`
      }
    } else {
      // 下->上
      direction = 'btt'
      bottom = '0'
      top = `${100 - percent}%`
      if (mode === 'range') {
        bottom = start
        top = `${100 - percent}%`
      }
      if (mode === 'symmetrical') {
        bottom = value > 0 ? `${(-min / count) * 100}%` : `${percent}%`
        top = value > 0 ? `${100 - percent}%` : `${(-min / count) * 100}%`
      }
    }
  }

  return {
    barStyle: {
      width: width >= height ? 'auto' : '100%',
      height: width > height ? '100%' : 'auto',
      // 判断开始结束值 设置位置反转
      top: e > s ? top : bottom,
      left: e > s ? left : right,
      right: e > s ? right : left,
      bottom: e > s ? bottom : top
    },
    direction,
    endKnobStyle: ['ltr', 'rtl'].includes(direction)
      ? {
          top: '-4px',
          bottom: 'auto',
          right: direction === 'ltr' && !reverse ? '0' : '',
          left: direction === 'rtl' && !reverse ? '0' : '',
          height: 'calc(100% + 8px)'
        }
      : {
          left: '-4px',
          right: 'auto',
          top: direction === 'btt' && !reverse ? '0' : '',
          bottom: direction === 'ttb' && !reverse ? '0' : '',
          width: 'calc(100% + 8px)'
        },
    startKnobStyle: ['ltr', 'rtl'].includes(direction)
      ? {
          top: '-4px',
          bottom: 'auto',
          right: direction === 'ltr' && !reverse ? '' : '0',
          left: direction === 'rtl' && !reverse ? '' : '0',
          height: 'calc(100% + 8px)'
        }
      : {
          left: '-4px',
          right: 'auto',
          top: direction === 'btt' && !reverse ? '' : '0',
          bottom: direction === 'ttb' && !reverse ? '' : '0',
          width: 'calc(100% + 8px)'
        }
  }
})
</script>
