<template>
  <!-- 添加节点 -->
  <SelectPopover
    v-if="node.nodeType === 'add'"
    v-bind="getAddOptions(node.parentType!)"
    @confirm="(val) => val && emit('add', node.parentId!, node.parentType!, val)"
  >
    <div
      v-if="node.nodeType === 'add'"
      :style="addBtnStyle"
      class="w-120px h-24px bg-#0068ff text-#fff grid place-items-center rounded-4px hover:box-shadow-md cursor-pointer"
    >
      <LuPlus />
    </div>
  </SelectPopover>

  <!-- 主节点 -->
  <div
    v-if="node.nodeType === 'root'"
    class="w-200px h-40px bg-#0068ff text-#fff grid place-items-center rounded-4px"
  >
    {{ node.name }}
  </div>

  <!-- 事件节点 -->
  <div
    v-if="node.nodeType === 'event'"
    class="w-200px h-40px bg-#4b85e2 text-#fff grid place-items-center rounded-4px relative group"
  >
    <div class="absolute top-4px right-4px gap-4px hidden group-hover:flex">
      <SelectPopover v-bind="getAddOptions('root')" :multiple="false" @confirm="handleChangeEvent">
        <div class="bg-[rgba(0,0,0,.5)] p-2px cursor-pointer"><LuPencilLine size="12px" /></div>
      </SelectPopover>

      <div class="bg-[rgba(0,0,0,.5)] p-2px cursor-pointer" @click="emit('delete', node.id)">
        <LuTrash2 size="12px" class="text-accent-red" />
      </div>
    </div>
    {{ node.name }}
  </div>

  <!-- 目标节点 -->
  <div
    v-if="node.nodeType === 'target'"
    class="w-200px h-40px bg-#4B9889 text-#fff grid place-items-center rounded-4px group"
  >
    <div class="absolute top-4px right-4px gap-4px hidden group-hover:flex">
      <div class="bg-[rgba(0,0,0,.5)] p-2px cursor-pointer" @click="emit('delete', node.id)">
        <LuTrash2 size="12px" class="text-accent-red" />
      </div>
    </div>
    {{ node.name }}
  </div>

  <!-- 动作节点 -->
  <ActionNode
    v-if="node.nodeType === 'action'"
    :node="node"
    @delete="() => emit('delete', node.id)"
    @update="(val) => emit('change', val)"
  />
</template>

<script setup lang="ts">
import type { NodeItemType } from './type'

import { computed } from 'vue'
import { LuPlus, LuTrash2, LuPencilLine } from 'vue-icons-plus/lu'
import SelectPopover from './SelectPopover.vue'
import ActionNode from './ActionNode.vue'
import { widgetEventOptions, pageEventOptions, actionOptions } from './config'
import { useAllWidgets } from '@/hooks/useAllWidgets'
import { useProjectStore } from '@/store/modules/project'

const emit = defineEmits<{
  (e: 'add', parentId: string, parentType: string, value: any[]): void
  (e: 'change', node: NodeItemType): void
  (e: 'delete', nodeId: string): void
}>()
const props = defineProps<{
  node: NodeItemType
}>()

const { allWidgets } = useAllWidgets()
const projectStore = useProjectStore()

// 添加节点弹窗配置
const getAddOptions = (type: string) => {
  const widget = projectStore.activeWidgets?.at(-1)
  switch (type) {
    case 'root':
      return {
        title: '触发方式',
        multiple: true,
        // 判断选择元素是否是页面
        options: widget?.type === 'page' ? pageEventOptions : widgetEventOptions
      }
    case 'event':
      const options = allWidgets.value.map((item) => ({
        label: item.name,
        value: item.id,
        data: item
      }))
      return {
        title: '目标',
        multiple: true,
        options: [
          {
            label: '自定义代码',
            value: 'customCode'
          },
          ...options
        ]
      }
    case 'target':
      return {
        title: '动作',
        multiple: true,
        options: actionOptions
      }
  }

  return
}

// 新增按钮样式
const addBtnStyle = computed(() => {
  const node = props.node
  return {
    backgroundColor:
      node.parentType === 'root' ? '#4b85e2' : node.parentType === 'event' ? '#4B9889' : '#4EB2BF'
  }
})

const handleChangeEvent = (val?: any[]) => {
  if (val?.length) {
    const item = val[0]
    props.node.name = item.value
    props.node.config.data = item?.data
  }
}
</script>
