<template>
  <el-collapse class="node-panel" v-model="activeNames" @change="handleChange">
    
     <el-collapse-item  class="node-item"
      :title="nodeList.service.title" name="1"
      v-if="nodeList.service.list.length > 0"
     >
     <div 
     
        v-for="(item,index) in nodeList.service.list"
        :key="index"
        class="node-panel-item"
        @mousedown="$_dragNode(item)">
         <div class="node-item-icon" >
          <!-- {{item.deviceType}} -->
          <img :src="nodeImages[item.type].display" alt="" width="15px" />
        </div>
        <span class="node-label">{{item.flowProperties.text}}</span>
      </div>
    </el-collapse-item>

    <el-collapse-item  class="node-item"
      :title="nodeList.device.title" name="2"
      v-if="nodeList.device.list.length > 0"
     >
      <div v-for="(item,index) in nodeList.device.list"
        :key="index"
        class="node-panel-item"
        @mousedown="$_dragNode(item)">
        <div class="node-item-icon" >
          <!-- {{item.deviceType}} -->
          <img :src="nodeImages[item.deviceType].display" alt="" width="15px" />
        </div>
        <span class="node-label">{{item.flowProperties.text}}</span>
      </div>
    </el-collapse-item>

    <el-collapse-item  class="node-item"
      :title="nodeList.algorithm.title" name="3"
      v-if="nodeList.algorithm.list.length > 0"
     >
      <div  v-for="(item,index) in nodeList.algorithm.list"
      
        :key="index"
       class="node-panel-item"
        @mousedown="$_dragNode(item)">
       <div class="node-item-icon">
            <img :src="nodeImages[item.breif].display" alt="" width="15px" />
        </div>
        <span class="node-label">{{item.flowProperties.text}}</span>
      </div>
    </el-collapse-item>
    
    <!-- <el-collapse-item  class="node-item"
      :title="nodeList.scene.title" name="4"
      v-if="nodeList.scene.list.length > 0"
     >
      <div v-for="(item,index) in nodeList.scene.list"
        :key="index"
        class="node-panel-item"
        @mousedown="$_dragNode(item)">
        <div class="node-item-icon" :class="item.flowProperties.class">
          </div>
          <span class="node-label">{{item.flowProperties.text}}</span>
        </div>
    </el-collapse-item> -->
  </el-collapse>
</template>
<script>
import * as node from "../registerNode/index";
import nodeImages from "../../nodeIconSetting"
let register = Object.values(node).map(item => item.name.replace("register",""))
export default {
  data(){
    return {
      activeNames: ['1','2'],
      nodeImages
    }
  },
  name: 'NodePanel',
  props: {
    lf: Object,
    nodeList: Object,
  },
  watch: {
    nodeList(value) {
      console.log(value,'-----value')
    }
  },
  methods: {
    handleChange() {},
    $_dragNode (item) {
      const { flowProperties, ...params } = item;
      this.$props.lf.dnd.startDrag({
        type: item.flowProperties.type,
        text: register.includes(item.flowProperties.type) ?
        {
          value: item.flowProperties.text,
        }:  item.flowProperties.text,
        properties: {
          ...params,
          flowProperties,
        },
      })
    }
  }
}
</script>
<style scope lang="scss" >
.node-panel {
  position: absolute;
  min-width: 100px;
  padding: 5px 5px;
  user-select: none;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  text-align: center;
  z-index: 101;
  .node-panel-item {
    display: flex;
    cursor: pointer;
    user-select: none;

    align-items: center;
  }
}

.node-item-icon {
  width: 30px;
  margin: 10px auto;
}
.node-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
  box-sizing: border-box;
  padding: 4px 8px;
  border-radius: 4px;
  text-align:center;
  min-width:40px;
  width: 90px;
  color: #363636;
  margin-bottom: 8px;
  &:first-child {
    margin-top: 8px;
  }
}
.node-start{
  background: url('../background/start.png') no-repeat;
  background-size: cover;
}
.node-scene{
  width:32px;
  background: url('../background/scene.png') no-repeat;
  background-size: cover;
}
.node-algorithm {
  width:32px;
  background: url('../background/alg.png') no-repeat;
  background-size: cover;
}
.node-user{
  background: url('../background/user.png') no-repeat;
  background-size: cover;
}
.node-time{
  background: url('../background/time.png') no-repeat;
  background-size: cover;
}
.node-push{
  background: url('../background/push.png') no-repeat;
  background-size: cover;
}
.node-device{
  background: url('../background/device.png') no-repeat;
 
  background-size: cover;
}
.node-click{
  background: url('../background/click.png') no-repeat;
  background-size: cover;
}
.node-end{
  background: url('../background/end.png') no-repeat;
  background-size: cover;
}
.bpmn-start {
  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;
  cursor: grab;
}
.bpmn-end {
  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;
  cursor: grab;
}
.bpmn-user {
  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;
  cursor: grab;
}
.bpmn-exclusiveGateway {
  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;
  cursor: grab;
}
</style>
