import { defineComponent } from 'vue'
import widgetList from '@/widgets'
import { useMenuStore } from '../GlobalMenu'
import type { Block } from '../layout.types'
import useRouterStore from '@/useRouterStore'

export default defineComponent({
  props: {
    block: {
      type: Object as () => Block,
      required: true
    }
  },
  setup(props) {
    const menu = useMenuStore()
    const router = useRouterStore()
    return () => {
      const placeholder = (
        <div class="w-full h-full flex justify-center items-center text-black/60">组件维护中</div>
      )
      const selected = widgetList.find((el) => el.name === props.block.name)
      if (!selected) return placeholder
      const compo = selected.list.find(
        (el) => el.w === props.block.w && el.h === props.block.h
      )?.component
      if (!compo) return placeholder
      return (
        <div
          class="w-full h-full relative"
          onContextmenu={(e) => {
            e.preventDefault()
            menu.open(props.block)
          }}
          onClick={() => {
            if (!selected.modal) return
            router.go(`widget-${props.block.name}`)
          }}
        >
          <compo />
        </div>
      )
    }
  }
})