<template>
  <div class="right-wr scroll-h" :id="'wrItems' + id">
    <div v-for="(n, i) in list" :key="n.itemId" class="right-item">
      <div class="item-label">{{ n.label }}</div>
      <div class="item-btn">
        <el-tag type="danger" class="mr10" @click="handleDelItem(n, i)">
          <i class="el-icon-delete"></i>
        </el-tag>
        <el-tag type="primary">
          <i class="el-icon-rank"></i>
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
export default {
  name: 'DragItems',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dragList: []
    }
  },
  mounted() {
    
    // this.dragSort()
  },
  watch: {
    list: {
      handler(val) {
        this.dragList = val.filter(item => item.itemType != 'inputRange')
      },
      deep: true
    }
  },
  methods: {
    handleDelItem(item, i) {
      this.$emit('del', { item, index: i})
    },
    dragSort () {
      const el = document.getElementById(`wrItems${this.id}`)
      this.sortTable = Sortable.create(el, {
        group: 'right-item',
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        chosenClass: 'sortable-choose',
        animation: 500,
        delay: 0,
        onEnd: evt => {
          console.log('evt----', evt)
          const targetRow = this.list.splice(evt.oldIndex, 1)[0]
          this.list.splice(evt.newIndex, 0, targetRow)
          this.$emit('drag', this.list)
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.right-wr {
  max-height: calc(80vh - 270px);
  overflow: auto;
  .right-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 10px 30px;
    
  }
}
.sortable-choose {
  background: #eee;
}
.mr10 {
  margin-right: 10px;
}
.mb10 {
  margin-bottom: 10px;
}
</style>