<script setup lang="ts">
import { useConnection } from '@/composables/useAllData'
import Icon from '@/components/ConnectionIcon.vue'

defineProps<{
  connectionIds?: string[]
}>()

// 所有连接
const { connectionList } = useConnection()

// 绑定的连接
const connections = computed(() => {
  return connectionList.value
  // return connectionList.value.filter(item => props.connectionIds?.includes(item.id))
})

// component_type https://gitlab-pro.ezijing.com/ezijing-server/api-documents/blob/master/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/DML-%E5%AE%9E%E9%AA%8C%E5%B9%B3%E5%8F%B0%E7%AE%A1%E7%90%86-%E5%AE%9E%E9%AA%8C%E6%95%B0%E6%8D%AE%E7%AE%A1%E7%90%86.md#%E8%8E%B7%E5%8F%96%E5%AE%9E%E9%AA%8C%E6%97%85%E7%A8%8B%E6%A3%80%E7%B4%A2%E7%94%A8%E6%88%B7%E7%9A%84%E7%BB%93%E6%9E%9C
const list = ref([
  {
    name: '触发条件',
    background: { icon: 'circle', color: '#4C5AB3' },
    children: [
      {
        name: '定时触发',
        type: 1,
        type_name: '触发条件',
        icon: '13',
        component_type: 1,
        component_name: 'TCRealTimeTrigger',
      },
      {
        name: '加入群组',
        type: 1,
        type_name: '触发条件',
        icon: '14',
        component_type: 2,
        component_name: 'TCJoinGroup',
      },
      {
        name: '变更属性',
        type: 1,
        type_name: '触发条件',
        icon: '15',
        component_type: 3,
        component_name: 'TCChangeProps',
      },
      {
        name: '公众号',
        type: 1,
        type_name: '触发条件',
        icon: '1',
        component_type: 4,
        component_name: 'TCOffiaccount',
        connection_type: 1,
      },
      {
        name: '抖音',
        type: 1,
        type_name: '触发条件',
        icon: '6',
        component_type: 5,
        component_name: 'TCDouyin',
        connection_type: 6,
      },
      {
        name: '小红书',
        type: 1,
        type_name: '触发条件',
        icon: '8',
        component_type: 6,
        component_name: 'TCXiaohongshu',
        connection_type: 8,
      },
      {
        name: '微博',
        type: 1,
        type_name: '触发条件',
        icon: '7',
        component_type: 7,
        component_name: 'TCWeibo',
        connection_type: 7,
      },
      {
        name: '自定义',
        type: 1,
        type_name: '触发条件',
        icon: '12',
        component_type: 10,
        component_name: 'TCCustom',
        connection_type: 12,
      },
      {
        name: '小鹅通',
        type: 1,
        type_name: '触发条件',
        icon: '3',
        component_type: 8,
        component_name: 'TCXiaoetong',
        connection_type: 3,
      },
      {
        name: '问卷星',
        type: 1,
        type_name: '触发条件',
        icon: '4',
        component_type: 9,
        component_name: 'TCWenjuanxing',
        connection_type: 4,
      },
    ],
  },
  {
    name: '营销动作',
    background: { icon: 'square', color: '#19AAA5' },
    children: [
      {
        name: '终止旅程',
        type: 2,
        type_name: '营销动作',
        icon: '16',
        component_type: 99,
        component_name: 'MAEndTrip',
        color: '#AA1941',
      },
      {
        name: '加入群组',
        type: 2,
        type_name: '营销动作',
        icon: '14',
        component_type: 1,
        component_name: 'MAJoinGroup',
      },
      {
        name: '移除群组',
        type: 2,
        type_name: '营销动作',
        icon: '17',
        component_type: 2,
        component_name: 'MALeaveGroup',
      },
      {
        name: '变更属性',
        type: 2,
        type_name: '营销动作',
        icon: '15',
        component_type: 3,
        component_name: 'MAChangeProps',
      },
      {
        name: '延时处理',
        type: 2,
        type_name: '营销动作',
        icon: '18',
        component_type: 4,
        component_name: 'MADelayProcess',
      },
      {
        name: '内部通知',
        type: 2,
        type_name: '营销动作',
        icon: '19',
        component_type: 5,
        component_name: 'MAInternalNotice',
      },
      {
        name: '短信',
        type: 2,
        type_name: '营销动作',
        icon: '10',
        component_type: 11,
        component_name: 'MASMS',
        connection_type: 10,
      },
      {
        name: '邮件',
        type: 2,
        type_name: '营销动作',
        icon: '9',
        component_type: 10,
        component_name: 'MAEmail',
        connection_type: 9,
      },
      {
        name: '公众号',
        type: 2,
        type_name: '营销动作',
        icon: '1',
        component_type: 6,
        component_name: 'MAOffiaccount',
        connection_type: 1,
      },
      {
        name: '抖音',
        type: 2,
        type_name: '营销动作',
        icon: '6',
        component_type: 7,
        component_name: 'MADouyin',
        connection_type: 6,
      },
      {
        name: '小红书',
        type: 2,
        type_name: '营销动作',
        icon: '8',
        component_type: 13,
        component_name: 'MAXiaohongshu',
        connection_type: 8,
      },
      {
        name: '微博',
        type: 2,
        type_name: '营销动作',
        icon: '7',
        component_type: 8,
        component_name: 'MAWeibo',
        connection_type: 7,
      },
      {
        name: '钉钉',
        type: 2,
        type_name: '营销动作',
        icon: '2',
        component_type: 9,
        component_name: 'MADingTalk',
        connection_type: 2,
      },
      {
        name: 'A/B分配',
        type: 2,
        type_name: '营销动作',
        icon: '101',
        component_type: 12,
        component_name: 'MAAB',
      },
      {
        name: '视频号',
        type: 2,
        type_name: '营销动作',
        icon: 'wechatVideo',
        component_type: 16,
        component_name: 'MAWechatVideo',
      },
    ],
  },
  {
    name: '条件分支',
    background: { icon: 'hexagon', color: '#CEAA62' },
    children: [
      {
        name: '属性判断',
        type: 3,
        type_name: '条件分支',
        icon: '20',
        component_type: 1,
        component_name: 'CBAttributeJudgment',
      },
      {
        name: '标签判断',
        type: 3,
        type_name: '条件分支',
        icon: '21',
        component_type: 2,
        component_name: 'CBLabelJudgment',
      },
      {
        name: '群组判断',
        type: 3,
        type_name: '条件分支',
        icon: '22',
        component_type: 3,
        component_name: 'CBGroupJudgment',
      },
      {
        name: '事件判断',
        type: 3,
        type_name: '条件分支',
        icon: '23',
        component_type: 5,
        component_name: 'CBEventJudgment',
      },
      {
        name: '时间判断',
        type: 3,
        type_name: '条件分支',
        icon: '24',
        component_type: 4,
        component_name: 'CBTimeJudgment',
      },
      {
        name: '公众号',
        type: 3,
        type_name: '条件分支',
        icon: '1',
        component_type: 6,
        component_name: 'CBOffiaccount',
        connection_type: 1,
      },
      {
        name: '小红书',
        type: 3,
        type_name: '条件分支',
        icon: '8',
        component_type: 7,
        component_name: 'CBXiaohongshu',
        connection_type: 8,
      },
      {
        name: '抖音',
        type: 3,
        type_name: '条件分支',
        icon: '6',
        component_type: 8,
        component_name: 'CBDouyin',
        connection_type: 6,
      },
    ],
  },
])

const currentList = computed(() => {
  return list.value.map((item) => {
    return {
      ...item,
      children: item.children.filter((item) =>
        item.connection_type ? connections.value.find((connection) => connection.type === item.connection_type) : true
      ),
    }
  })
})

const onDragStart = (event: DragEvent, data: any) => {
  if (event.dataTransfer) {
    event.dataTransfer.setData('application/vueflow', JSON.stringify(data))
    event.dataTransfer.effectAllowed = 'move'
  }
}
</script>

<template>
  <el-card shadow="never" class="flow-sidebar">
    <dl v-for="(parent, index) in currentList" :key="index">
      <dt :style="`background: ${parent.background?.color}`">{{ parent.name }}</dt>
      <dd>
        <ul>
          <li
            v-for="(item, index) in parent.children"
            :key="index"
            :draggable="true"
            @dragstart="(event) => onDragStart(event, item)">
            <div class="icon-box">
              <Icon
                class="circle"
                :color="item.color || parent.background?.color"
                :name="parent.background?.icon || ''"
                w="60"
                h="60"></Icon>
              <Icon class="icon" color="#fff" :name="item.icon" w="24" h="24"></Icon>
            </div>
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </dd>
    </dl>
  </el-card>
</template>

<style lang="scss">
.icon-box {
  position: relative;
  .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.flow-sidebar {
  width: 300px;
  overflow-y: auto;
  dt {
    color: #fff;
    line-height: 30px;
    text-align: center;
    background-color: rgb(86, 119, 34);
    font-size: 14px;
  }
  dd {
    padding: 20px 0;
  }
  ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    img {
      width: 40px;
      height: 40px;
      background-color: rgb(86, 119, 34);
      border-radius: 50%;
      overflow: hidden;
    }
    p {
      font-size: 12px;
      text-align: center;
    }
    &:hover {
      .circle {
        filter: drop-shadow(2px 2px 10px #969696);
      }
    }
  }
}
</style>
