<template>
  <!-- 进入菜单页模式 -->
  <div
    v-if="!sider && inPage"
    class="w-full h-full flex overflow-hidden box-border"
    :style="styleMap?.mainStyle"
    :class="titleMode === 'LV_MENU_HEADER_BOTTOM_FIXED' ? 'flex-col-reverse' : 'flex-col'"
  >
    <div
      v-if="openTitle"
      class="menu-header w-full px-18px relative whitespace-pre! flex items-center box-border"
      :style="styleMap?.menuTitleStyle"
    >
      <LuChevronLeft size="14px" />
      <span class="flex-1" :style="activeHeaderTextStyle">{{ activeHeaderText.text }}</span>
    </div>
    <div class="flex-1"></div>
  </div>

  <!-- 菜单 -->
  <div v-else :style="styleMap?.mainStyle" class="w-full h-full flex overflow-hidden box-border">
    <div
      class="shrink-0 box-border relative flex flex-col"
      :class="!sider ? 'flex-1! border-r-none!' : 'basis-1/3'"
      style="border-right: solid 1px #ededed"
      :style="titleMode === 'LV_MENU_HEADER_BOTTOM_FIXED' ? 'flex-direction: column-reverse;' : ''"
    >
      <ImageBg :src="styleMap?.mainStyle?.imageSrc" :imageStyle="styleMap?.mainStyle?.imageStyle" />
      <!-- 菜单标题 -->
      <div
        v-if="openTitle"
        class="menu-header relative whitespace-pre!"
        :style="styleMap?.menuTitleStyle"
      >
        <ImageBg
          :src="styleMap?.menuTitleStyle?.imageSrc"
          :imageStyle="styleMap?.menuTitleStyle?.imageStyle"
        />
        <span class="z-2" :style="titleTextStyle">{{ resolvedTitle.text }}</span>
      </div>
      <!-- 侧边栏 -->
      <div
        ref="sidebarRef"
        :style="styleMap?.sidebarStyle"
        :class="titleMode === 'LV_MENU_HEADER_BOTTOM_FIXED' ? 'flex-1' : ''"
        class="menu-sidebar relative box-border overflow-hidden"
      >
        <ImageBg
          :src="styleMap?.sidebarStyle?.imageSrc"
          :imageStyle="styleMap?.siderbaStyle?.imageStyle"
        />
        <!-- 菜单片段 -->
        <div ref="contentRef" class="z-2">
          <template v-for="(section, sectionIndex) in children || []" :key="sectionIndex">
            <div v-show="openSection" class="z-2 min-h-30px flex items-center">
              <div class="w-full px-10px py-2px" :style="styleMap?.sectionTitleStyle">
                <span :style="getResolvedFontStyle(section.name)">
                  {{ resolveText(section.name).text }}
                </span>
              </div>
            </div>
            <div :style="styleMap?.sectionStyle" class="z-2 overflow-hidden">
              <div
                v-for="({ titleIcon, name }, index) in section.children || []"
                :key="index"
                :style="
                  activeIndex === `[${sectionIndex}].children.[${index}]`
                    ? activeStyle
                    : styleMap?.itemsStyle
                "
                class="relative min-h-30px flex items-center gap-4px overflow-hidden px-10px py-2px"
                  >
                    <ImageBg
                      :src="styleMap?.itemsStyle?.imageSrc"
                      :imageStyle="styleMap?.itemsStyle?.imageStyle"
                    />
                <div class="z-2 w-full min-w-80px flex items-center gap-4px mr-10px">
                  <span v-if="titleIcon?.type === 'symbol'">
                    <i class="lvgl-icon not-italic" v-html="getSymbol(titleIcon.img_symbol)"></i>
                  </span>
                  <div
                    v-if="titleIcon?.type === 'img'"
                    :id="titleIcon.img_id"
                    :style="{
                      width: titleIcon.img_width + 'px',
                      height: titleIcon.img_height + 'px',
                      position: 'relative'
                    }"
                  >
                    <ImageBg
                      :id="titleIcon.img_id"
                      :image-style="{
                        backgroundColor: titleIcon.img_recolor,
                        opacity: titleIcon.img_alpha / 255
                      }"
                      :image-props="{
                        width: titleIcon.img_width + 'px',
                        height: titleIcon.img_height + 'px'
                      }"
                    />
                  </div>
                  <span class="flex-1 whitespace-pre!" :style="getResolvedFontStyle(name)">
                    {{ resolveText(name).text }}
                  </span>
                </div>
              </div>
            </div>
          </template>
        </div>
        <!-- 滚动条 -->
        <div
          v-if="showVScroll && titleMode !== 'LV_MENU_HEADER_TOP_UNFIXED'"
          class="v-scrollbar absolute right-6px top-6px w-4px h-20% bg-#d7d7d7"
        ></div>
      </div>
      <!-- 滚动条 -->
      <div
        v-if="showVScroll && titleMode === 'LV_MENU_HEADER_TOP_UNFIXED'"
        class="v-scrollbar absolute right-6px top-6px w-4px h-20% bg-#d7d7d7"
      ></div>
    </div>
    <div v-if="sider" class="basis-2/3"></div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, type CSSProperties } from 'vue'
import { useWidgetStyle, getStyle } from '../hooks/useWidgetStyle'
import { useProjectStore } from '@/store/modules/project'
import { assign, get } from 'lodash-es'
import { getSymbol } from '@/utils'
import { useResizeObserver } from 'vue-hooks-plus'
import { useLanguage } from '../hooks/useLanguage'

import { LuChevronLeft } from 'vue-icons-plus/lu'
import ImageBg from '../ImageBg.vue'

const props = defineProps<{
  width: number
  height: number
  styles: any
  state: string
  part: string
  scrollbar: string
  title: string
  // 折叠展开
  sider: boolean
  // 标题开关
  openTitle?: boolean
  // 子标题开关
  openSection: boolean
  // 子项
  children?: any[]
  // 当前激活index
  activeIndex: string
  titleMode?:
    | 'LV_MENU_HEADER_TOP_FIXED'
    | 'LV_MENU_HEADER_BOTTOM_FIXED'
    | 'LV_MENU_HEADER_TOP_UNFIXED'
  inPage?: boolean
}>()
const { resolveText, getTextStyle, getResolvedFontStyle } = useLanguage()
const resolvedTitle = computed(() => resolveText(props.title))
const titleTextStyle = getTextStyle(() => undefined, () => props.title)
const activeHeaderText = computed(() => resolveText(get(props.children, props.activeIndex)?.name))
const activeHeaderTextStyle = computed(() =>
  getResolvedFontStyle(get(props.children, props.activeIndex)?.name)
)

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

const sidebarRef = ref<HTMLDivElement>()
const contentRef = ref<HTMLDivElement>()
const showVScroll = ref(false)

useResizeObserver(contentRef, (entries) => {
  const entry = entries[0]
  const { height: _h } = entry.contentRect
  const boxHeight = sidebarRef.value?.offsetHeight
  showVScroll.value = !!boxHeight && _h > boxHeight
})

const projectStore = useProjectStore()

// 激活样式
const activeStyle = computed(() => {
  const styles = props.styles

  const itemStyle = styles.find(
    (item) => item?.part?.name === 'items' && item.part?.state === 'checked'
  )

  const stateItemStyle = projectStore.globalStyle
    ?.find((item) => item.widget === 'lv_menu')
    ?.part?.find((item) => item.partName === 'items')
    ?.state?.find((item) => item.state === 'checked')?.style

  const defaultItemStyle = projectStore.globalStyle
    ?.find((item) => item.widget === 'lv_menu')
    ?.part?.find((item) => item.partName === 'items')?.defaultStyle

  const style = assign({}, defaultItemStyle, stateItemStyle, itemStyle)

  let styleMap: CSSProperties = {}

  Object.keys(style || {}).forEach((key) => {
    // 合并样式
    styleMap = {
      ...styleMap,
      ...getStyle(key, style?.[key])
    }
  })

  return styleMap
})
</script>

<style scoped></style>
