<template>
  <div class="center-box">
    <div class="menu">
      <!-- 事件节点 -->
      <div class="menu-item" :draggable="true" @dragstart="onDragStart($event, 'event')">
        <div class="border bg1"></div>
        <div class="icon"> <IconFontSymbol icon="rule-shijian1" fontSize="24" /></div>
        <div class="title">事件节点</div>
      </div>
      <!-- 规则节点 -->
      <div class="menu-item" :draggable="true" @dragstart="onDragStart($event, 'rule')">
        <div class="border bg2"></div>
        <div class="icon"> <IconFontSymbol icon="rule-chuanhang" fontSize="24" /></div>
        <div class="title">规则节点</div>
      </div>
      <!-- 选择节点 -->
      <div class="menu-item" :draggable="true" @dragstart="onDragStart($event, 'select')">
        <div class="border bg3"></div>
        <div class="icon"> <IconFontSymbol icon="rule-xuanze" fontSize="24" /> </div>
        <div class="title">选择节点</div>
      </div>
      <!-- 条件节点 -->
      <div class="menu-item" :draggable="true" @dragstart="onDragStart($event, 'condition')">
        <div class="border bg4"></div>
        <div class="icon"> <IconFontSymbol icon="rule-if" fontSize="24" fillColor="#0fc7a8" /></div>
        <div class="title">条件节点</div>
      </div>
      <!-- for循环节点 -->
      <div class="menu-item" :draggable="true" @dragstart="onDragStart($event, 'for')">
        <div class="border bg5"></div>
        <div class="icon">
          <IconFontSymbol icon="rule-shuaxin2" fontSize="24" fillColor="#0fc7a8"
        /></div>
        <div class="title">for循环节点</div>
      </div>
      <!-- while循环节点 -->
      <div class="menu-item" :draggable="true" @dragstart="onDragStart($event, 'while')">
        <div class="border bg6"></div>
        <div class="icon">
          <IconFontSymbol icon="rule-leijixunhuan" fontSize="24" fillColor="#0fc7a8"
        /></div>
        <div class="title">while循环节点</div>
      </div>
      <!-- 运维节点  -->
      <div class="menu-item" :draggable="true" @dragstart="onDragStart($event, 'devOps')">
        <div class="border bg7"></div>
        <div class="icon">
          <IconFontSymbol icon="rule-fuwuqi" fontSize="24" fillColor="#ffbb1c"
        /></div>
        <div class="title">运维节点</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import useDragAndDrop from '../../hooks/useDragAndDrop';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  const { onDragStart } = useDragAndDrop();
  // const emits = defineEmits(['clean']);
  // function clean() {
  //   emits('clean');
  // }
</script>

<style lang="less" scoped>
  .center-box {
    display: flex;
    width: 250px;
    height: 990px;
    background: #fff;
    border-radius: 16px;
  }

  .menu {
    width: 250px;
    height: 990px;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    cursor: move;
  }

  .menu-item {
    display: flex;
    align-items: center;
    width: 218px;
    height: 45px;
    background: #fff;
    border-radius: 6px;
    border: 1px dotted #ddd;
    margin: 16px 0;

    .icon {
      font-size: 18px;
      margin: 0 20px 0 28px;
    }

    .title {
      font-weight: 400;
      font-size: 14px;
      color: #333;
    }
  }

  .border {
    width: 8px;
    height: 45px;
    border-radius: 6px 0 0 6px;
  }

  .bg1 {
    background-color: #386ed3;
  }

  .bg2 {
    background-color: #1c6bff;
  }

  .bg3 {
    background-color: #ff5461;
  }

  .bg4 {
    background-color: #00a1dc;
  }

  .bg5 {
    background-color: #5444e9;
  }

  .bg6 {
    background-color: #0badb9;
  }

  .bg7 {
    background-color: #7db23e;
  }

  .line {
    width: 1px;
    height: 36px;
    background-color: #ddd;
    margin: 0 12px;
  }
</style>
