<template>
  <div :style="styleMap?.mainStyle" class="w-full h-full relative overflow-hidden">
    <ImageBg
      v-if="styleMap?.mainStyle?.imageSrc"
      :src="styleMap?.mainStyle?.imageSrc"
      :imageStyle="styleMap?.mainStyle?.imageStyle"
    />
    <div
      class="h-scrollbar absolute bottom-6px h-4px"
      :style="{ ...(styleMap?.scrollbarStyle || {}), ...barStyle.hStyle }"
    ></div>
    <div
      class="v-scrollbar absolute right-6px w-4px"
      :style="{ ...(styleMap?.scrollbarStyle || {}), ...barStyle.vStyle }"
    ></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
  styles: any
  state: string
  part: string
  scrollbar: string
  children?: any[]
  activeIndex: number
}>()

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

const barStyle = computed(() => {
  const { activeIndex, children = [], width, height } = props

  const curRow = children[activeIndex]?.row ?? 0
  const curCol = children[activeIndex]?.col ?? 0

  const maxRow = children.reduce((max, item) => Math.max(max, item.row), 0)
  const maxCol = children.reduce((max, item) => Math.max(max, item.col), 0)

  const itemHeight = (height - 20) / (maxRow + 1)
  const itemWidth = (width - 20) / (maxCol + 1)
  return {
    vStyle: {
      display: maxRow > 0 ? '' : 'none',
      height: `${itemHeight}px`,
      top: `${10 + itemHeight * curRow}px`
    },
    hStyle: {
      display: maxCol > 0 ? '' : 'none',
      width: `${itemWidth}px`,
      left: `${10 + itemWidth * curCol}px`
    }
  }
})
</script>

<style scoped></style>
