<script setup lang="ts">
import { ref, unref } from "vue";
import { LogicFlow } from "@logicflow/core";

type nodeListType = {
  text: string;
  class: string;
  type: string;
};

interface Props {
  lf?: LogicFlow;
  nodeList?: Array<nodeListType>;
}

const props = withDefaults(defineProps<Props>(), {
  lf: null,
  nodeList: null
});

const properties = ref({
  a: "efrwe",
  b: "wewe"
});

const nodeDragNode = item => {
  props.lf.dnd.startDrag({
    type: item.type,
    properties: unref(properties)
  });
};
</script>

<template>
  <!-- 左侧bpmn元素选择器 -->
  <div class="node-panel">
    <div
      v-for="item in nodeList"
      :key="item.text"
      class="node-item dark:text-bg_color"
      @mousedown="nodeDragNode(item)"
    >
      <div class="node-item-icon" :class="item.class">
        <div
          v-if="item.type === 'user' || item.type === 'time'"
          class="shape"
        />
      </div>
      <span class="node-label">{{ item.text }}</span>
    </div>
  </div>
</template>

<style scoped>
.node-panel {
  position: absolute;
  top: 10px;
  z-index: 101;
  width: 60px;
  padding: 20px 10px;
  text-align: center;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 0 10px 1px rgb(228 224 219);
}

.node-item {
  margin-bottom: 20px;
}

.node-item-icon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 30px;
  background-size: cover;
}

.node-label {
  margin-top: 5px;
  font-size: 12px;
  user-select: none;
}

.node-start {
  background: url("data:image/png;base64,[encoded data, 5268 characters]")
    no-repeat;
  background-size: cover;
}

.node-rect {
  border: 1px solid black;
}

.node-user {
  background: url("data:image/png;base64,[encoded data, 54340 characters]")
    no-repeat;
  background-size: cover;
}

.node-time {
  background: url("data:image/png;base64,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")
    no-repeat;
  background-size: cover;
}

.node-push {
  background: url("data:image/png;base64,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")
    no-repeat;
  background-size: cover;
}

.node-download {
  background: url("data:image/png;base64,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")
    no-repeat;
  background-size: cover;
}

.node-click {
  background: url("data:image/png;base64,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")
    no-repeat;
  background-size: cover;
}

.node-end {
  background: url("data:image/png;base64,[encoded data, 6520 characters]")
    no-repeat;
  background-size: cover;
}

.bpmn-start {
  cursor: grab;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg==")
    center center no-repeat;
}

.bpmn-end {
  cursor: grab;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC")
    center center no-repeat;
}

.bpmn-user {
  cursor: grab;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==")
    center center no-repeat;
}

.bpmn-exclusiveGateway {
  cursor: grab;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAAHeEJUAAAAABGdBTUEAALGPC/xhBQAAAvVJREFUOBGNVEFrE0EU/mY3bQoiFlOkaUJrQUQoWMGePLX24EH0IIoHKQiCV0G8iE1covgLiqA/QTzVm1JPogc9tIJYFaQtlhQxqYjSpunu+L7JvmUTU3AgmTfvffPNN++9WSA1DO182f6xwILzD5btfAoQmwL5KJEwiQyVbSVZ0IgRyV6PTpIJ81E5ZvqfHQR0HUOBHW4L5Et2kQ6Zf7iAOhTFAA8s0pEP7AXO1uAA52SbqGk6h/6J45LaLhO64ByfcUzM39V7ZiAdS2yCePPEIQYvTUHqM/n7dgQNfBKWPjpF4ISk8q3J4nB11qw6X8l+FsF3EhlkEMfrjIer3wJTLwS2aCNcj4DbGxXTw00JmAuO+Ni6bBxVUCvS5d9aa04+so4pHW5jLTywuXAL7jJ+D06sl82Sgl2JuVBQn498zkc2bGKxULHjCnSMadBKYDYYHAtsby1EQ5lNGrQd4Y3v4Zo0XdGEmDno46yCM9Tk+RiJmUYHS/aXHPNTcjxcbTFna000PFJHIVZ5lFRqRpJWk9/+QtlOUYJj9HG5pVFEU7zqIYDVsw2s+AJaD8wTd2umgSCCyUxgGsS1Y6TBwXQQTFuZaHcd8gAGioE90hlsY+wMcs30RduYtxanjMGal8H5dMW67dmT1JFtYUEe8LiQLRsPZ6IIc7A4J5tqco3T0pnv/4u0kyzrYUq7gASuEyI8VXKvB9Odytv6jS/PNaZBln0nioJG/AVQRZvApOdhjj3Jt8QC8Im09SafwdBdvIpztpxWxpeKCC+EsFdS8DCyuCn2munFpL7ctHKp+Xc5cMybeIyMAN33SPL3ZR9QV1XVwLyzHm6Iv0/yeUuUb7PPlZC4D4HZkeu6dpF4v9j9MreGtMbxMMRLIcjJic9yHi7WQ3yVKzZVWUr5UrViJvn1FfUlwe/KYVfYyWRLSGNu16hR01U9IacajXPei0wx/5BqgInvJN+MMNtNme7ReU9SBbgntovn0kKHpFg7UogZvaZiOue/q1SBo9ktHzQAAAAASUVORK5CYII=")
    center center no-repeat;
}
</style>
