<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" :id="index" @on-remove="onDeleteBtn"
                               @on-change="(v) => (onChange(index, v))"></sort-tab-item>
            </div>
        </draggable>
        <Button style="margin-top:20px" type="primary" @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: '',
              sort: 0
            }
          },
          id: this.$bus.genId()
        });

        console.log(this.list);
      },
      onDeleteBtn(index) {
        this.list.splice(index, 1);
      },
      getValue() {
        return this.list;
      },
      setValue(val) {
        this.list = val;
      },
      onChange(i, v) {
        this.$set(this.list, i, v);
      }
    },
    components: {
      sortTabItem,
      draggable
    }
  };
</script>

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

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