<template>
  <div
    :style="styleMap?.mainStyle"
    class="w-full h-full box-border flex flex-col overflow-hidden relative"
  >
    <ImageBg
      v-if="styleMap?.mainStyle?.imageSrc"
      :src="styleMap?.mainStyle?.imageSrc"
      :image-style="styleMap?.mainStyle?.imageStyle"
    />
    <div
      v-for="(row, index) in resolvedGroup"
      :key="index"
      class="flex-1 w-full flex items-center"
      :style="{ columnGap: styleMap?.mainStyle?.columnGap }"
    >
      <div
        class="h-full flex items-center justify-center overflow-hidden whitespace-pre! relative"
        v-for="(item, index) in row || []"
        :key="`${index}-${index}`"
        :style="{
          ...(isCustom ? getBtnStyle(item) || styleMap?.itemsStyle : styleMap?.itemsStyle),
          ...getBtnFlex(
            item.width,
            row.map((item) => item.width)
          )
        }"
      >
        <!-- <ImageBg
          v-if="getBtnStyle(item)?.imageSrc"
          :src="getBtnStyle(item)?.imageSrc"
          :image-style="getBtnStyle(item)?.imageStyle"
        /> -->
        <!-- 不使用自定义 -->
        <ImageBg
          v-if="styleMap?.itemsStyle?.imageSrc"
          :src="styleMap?.itemsStyle?.imageSrc"
          :image-style="styleMap?.itemsStyle?.imageStyle"
        />
        <span class="z-2" :style="item.resolvedStyle" v-html="item.resolvedText.text"></span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useWidgetStyle, getStyle } from '../hooks/useWidgetStyle'
import { ButtonItem } from './data'
import { isEmpty, assign } from 'lodash-es'
import { useProjectStore } from '@/store/modules/project'
import { useLanguage } from '../hooks/useLanguage'

import ImageBg from '../ImageBg.vue'

const props = defineProps<{
  width: number
  height: number
  group?: ButtonItem[][]
  styles: any
  state?: string
  isCustom?: boolean
}>()

const styleMap = useWidgetStyle({
  widget: 'lv_buttonmatrix',
  props
})
const { resolveText, getResolvedFontStyle } = useLanguage()
const resolvedGroup = computed(() =>
  (props.group || []).map((row) =>
    (row || []).map((item) => ({
      ...item,
      resolvedText: resolveText(item?.text, true),
      resolvedStyle: getResolvedFontStyle(item?.text)
    }))
  )
)

const projectStore = useProjectStore()

/**
 * 获取自定义样式
 */
const getBtnStyle = (btnItem: ButtonItem) => {
  // 获取主题背景
  const style =
    btnItem.style.find(
      (item) => item.part.state === 'default' && item.theme === projectStore.project?.currentTheme
    ) || {}

  const styleMap: Record<string, any> = {}

  Object.keys(style).forEach((key) => {
    assign(styleMap, getStyle(key, style?.[key]))

    if (key === 'background' && style?.[key]?.image?.imgId) {
      const basePath = projectStore?.projectPath
      const imagePath = projectStore?.project?.resources.images.find(
        (item) => item.id === style?.[key]?.image?.imgId
      )?.path
      if (basePath && imagePath) {
        styleMap.imageSrc = `local:///${(basePath + imagePath).replaceAll('\\', '/')}`
        styleMap.imageStyle = {
          backgroundColor: style?.[key]?.image?.color,
          opacity: (style?.[key]?.image?.alpha || 255) / 255
        }
      }
    }
  })

  return isEmpty(styleMap) ? null : styleMap
}

/**
 * 获取按钮宽度
 */
const getBtnFlex = (btnWidth: number, list: number[]) => {
  const count = list.reduce((acc, cur) => acc + cur, 0)
  const basic = (btnWidth / count) * 100 + '%'
  return {
    'flex-basis': basic,
    'flex-grow': 1,
    'flex-shrink': 1
  }
}
</script>
