<style lang="less" scoped>
@import './index.less';
</style>
<template>
  <div :class="rowClasses(index)" v-if="draggable">
    <div v-if="draggable" class="operation">
      <i class="operation-del" @click="deleteRow(index)" />
    </div>
    <slot />
  </div>
  <div :class="rowClasses(index)" v-else>
    <slot />
  </div>
</template>
<script>
export default {
  name: 'list-tr',
  components: {},
  props: {
    /**
     * 行内容
     */
    row: Object,
    /**
     * 是否可以拖拉
     */
    draggable: Boolean,
    /**
     * 行索引
     */
    index: Number,
    /**
     * 是否可以删除
     */
    deleteable: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    objData() {
      return this.$parent.$parent.objData;
    }
  },
  watch: {},
  methods: {
    /**
     * 删除行
     */
    deleteRow(_index) {
      this.$parent.$parent.$parent.deleteRow(_index);
    },
    /**
     *
     */
    rowClasses(_index) {
      return [
        'row',
        this.rowClsName(_index),
        {
          ' row-hover ': this.row && this.row._isHover,
          ' row-highlight': this.row && this.row._isHighlight
        }
      ];
    },
    /**
     * 行样式名称
     */
    rowClsName(_index) {
      if (this.draggable) {
        // 当 body中用draggables标签时，这里要三个parent
        return this.$parent.$parent.$parent.rowClassName(this.objData[_index], _index);
      }
      return this.$parent.$parent.rowClassName(this.objData[_index], _index);
    }
  }
};
</script>
