<style lang="less" scoped>
@import './index.less';
</style>
<template >
  <div :class="bodyClasses">
    <template v-if="draggable">
     <draggable :value="objData" @end="handleDraggableEnd($event)">
      <template v-for="(row, index) in objData">
        <list-tr
           v-if="row.slot && !$slots[row.slot] "
          :draggable="draggable"
          :row="row"
          :key="rowKey ? row._rowKey : index"
          :index="index"
          @mouseenter.native.stop="handleMouseIn(index)"
          @mouseleave.native.stop="handleMouseOut(index)"
          @click.native="clickCurrentRow(index)"
          @dblclick.native.stop="dblclickCurrentRow(index)"
          :style="trStyle">
          <list-slot :row="row" :index="index"></list-slot>
        </list-tr>
      </template>
    </draggable>
  </template>
  <template v-else>
     <template v-for="(row, index) in objData">
        <list-tr
          :draggable="draggable"
          :row="row"
          :key="rowKey ? row._rowKey : index"
          :index="index"
          @mouseenter.native.stop="handleMouseIn(index)"
          @mouseleave.native.stop="handleMouseOut(index)"
          @click.native="clickCurrentRow(index)"
          @dblclick.native.stop="dblclickCurrentRow(index)"
         :style="trStyle">
          <list-slot :row="row" :index="index"></list-slot>
        </list-tr>
      </template>
  </template>
  </div>
</template>

<script>
import ListTr from './list-tr.vue';
import ListSlot from './slot';
import draggable from 'vuedraggable';

export default {
  name: 'list-body',
  components: { ListTr, ListSlot, draggable },
  props: {
    objData: {
      type: Array,
      default() {
        return [];
      }
    },
    draggable: {
      type: Boolean,
      default: false
    },
    rowKey: {
      type: Boolean,
      default: false
    },
     gutter: {
      type: [Number, String],
      default: 0
    }
  },
  watch : {
  },
  computed: {
     bodyClasses() {
      return [
        {
          [` draggable `]: this.draggable ,
        }
      ];
    },
    trStyle () {
      const style = {}
      if(this.gutter > 0 ){
        style.marginBottom = `${this.gutter}px`
      }
      return style
    }
  },
  methods: {
    /**
     * 鼠标进入
     */
    handleMouseIn(_index) {
      this.$parent.handleMouseIn(_index);
    },
    /**
     * 鼠标
     */
    handleMouseOut(_index) {
      this.$parent.handleMouseOut(_index);
    },
    /**
     * 点击当前行
     */
    clickCurrentRow(_index) {
      this.$parent.clickCurrentRow(_index);
    },
    /**
     * 双击
     */
    dblclickCurrentRow(_index) {
      this.$parent.dblclickCurrentRow(_index);
    },
    /**
     * 响应拖拉结果
     */
    handleDraggableEnd (event) {
      if (event.oldIndex != event.newIndex) {
        this.$parent.dragAndDrop(event.oldIndex , event.newIndex) 
      }
     
    },
  }
};
</script>
