<template>
  <div :style="styleMap?.mainStyle" class="w-full h-full relative box-border overflow-auto">
    <ImageBg :src="styleMap?.mainStyle?.imageSrc" :imageStyle="styleMap?.mainStyle?.imageStyle" />
    <el-scrollbar always>
      <table class="border-spacing-0">
        <thead>
          <tr>
            <th
              v-for="(header, index) in resolvedHeaders"
              :key="index"
              :style="{
                ...styleMap?.itemsStyle,
                width: columnWidth[index] + 'px'
              }"
              class="min-h-30px box-border whitespace-pre!"
            >
              <ImageBg
                :src="styleMap?.itemsStyle?.imageSrc"
                :imageStyle="styleMap?.itemsStyle?.imageStyle"
              />
              <span class="relative z-99" :style="header.style"> {{ header.text }}</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in tableData" :key="index">
            <td
              v-for="(cell, index) in row"
              :key="index"
              :style="styleMap?.itemsStyle"
              class="min-h-18px box-border whitespace-pre! relative"
            >
              <ImageBg
                :src="styleMap?.itemsStyle?.imageSrc"
                :imageStyle="styleMap?.itemsStyle?.imageStyle"
              />
              <span class="relative z-99" :style="cell.style"> {{ cell.text }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </el-scrollbar>
  </div>
</template>

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

const props = defineProps<{
  styles: any
  state: string
  part: string
  items?: string[][]
  columnWidth: number[]
}>()

const styleMap = useWidgetStyle({
  widget: 'lv_table',
  props
})
const { resolveText, getResolvedFontStyle } = useLanguage()

// 表头
const resolvedHeaders = computed(() =>
  (props.items?.[0] || []).map((header) => ({
    text: resolveText(header).text,
    style: getResolvedFontStyle(header)
  }))
)

// 内容
const tableData = computed(() => {
  return (props.items?.slice(1) || []).map((row) =>
    (row || []).map((cell) => ({
      text: resolveText(cell).text,
      style: getResolvedFontStyle(cell)
    }))
  )
})
</script>

<style scoped></style>
