<template>
   <el-scrollbar class="scrollbar-fullheight">
    <div class="control-list">
      <template>
        <div v-for="(value, key, index) in decorationMap" :key="index" style="padding-right:45px;">
        <draggable
          class="flex-container"
          tag="div"
          :list="value.items"
          v-bind="{group:{ name:'form', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
          @end="handleMoveEnd"
          @start="handleMoveStart"
          :move="handleMove"
        >
          <div class="block" style="float: left;padding-right:5px;" v-for="(item, key, index) in value.items" :key="index">
            <img :src="item.icon" :title="item.name" style="width: 28px; height: 28px;margin-bottom: 5px;position: relative;display: inline-block;overflow: hidden;" class="image">
          </div>
        </draggable>
      </div>
      </template>
    </div>
  </el-scrollbar>
</template>
<script>
import Draggable from "vuedraggable";
export default {
  name: "datav-decoration-panel",
  components: { Draggable },
  props: {
    decorationMap: {
      type: Object
    }
  },
  data() {
    return {};
  },
  methods: {
    handleMoveEnd: function() {},
    handleMoveStart: function() {},
    handleMove: function() {}
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/form-editor.scss";

.widget-cate {
  padding: 10px 0 0 10px;
  font-weight: bold;
  color: #777;
}

ul.flex-container {
  margin: 0;
  list-style: none;
  padding: 10px 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

ul.flex-container > li.flex-item {
  padding: 5px;
  height: 17px;
  border: 1px solid #ccc;
  margin: 4px;
  width: 120px;
  border-radius: 5px;
  cursor: pointer;
}

ul.flex-container > li.flex-item:hover {
  box-shadow: 0 2px 5px rgba(86, 96, 117, 0.15);
}

li.flex-item > a > i {
  font-size: 16px;
}

li.flex-item > a > div {
  margin-left: 8px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden; 
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>