<template>
  <div>
    <draggable v-model="list" @start="drag=true" @end="drag=false">
      <div class="item" v-for="(i,index) in list" :key="i.id">
        <sort-tab-item :value="i" @on-remove="onDeleteBtn(index)" @on-change="(v) => (onChange(index, v))"></sort-tab-item>
      </div>
    </draggable>
    <Button style="margin-top:20px" @click="onAddBtn">添加一组</Button>
  </div>
</template>

<script>

import sortTabItem from './sortTab-editor-item'
import util from '@/libs/util'

import draggable from 'vuedraggable'

export default {
  props: ["value"],
  data() {
    return {
      list: util.clone(this.value),
      drag: false,
    };
  },
  methods: {
    onAddBtn() {
      this.list.push({
        category_name: '',
        product_ids: '',
        more_url: {
          action: "go.ufo",
          params: {
            pagename: "productList",
            productListTitle: '',
            listparams: { sort: 0}
          }
        },
        id: this.$bus.genId()
      })
    },
    onDeleteBtn(i, index) {
      this.list.splice(index, 1);
    },
    getValue() {
      return this.list;
    },
    onChange(i, v) {
      this.$set(this.list, i, v);
    }
  },
  components: {
    sortTabItem,
    draggable
  }
};
</script>

<style>
.item {
  border: 1px solid #dddee1;
  padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}

.item:hover {
  background-color: #ebf7ff;
}
</style>