<template>
  <tr class="n-tr" :data-tridx="index" :class="classes" @click="onLineClick" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
    <template v-for="(column, idx) in columns">
      <n-table-td :key="idx" :column="column" :data="data" :index="index" :class-index="classIndex" @on-cell-click="onCellClick"></n-table-td>
    </template>
  </tr>
</template>

<script>
import NTableTd from './td'

export default {
  name: 'n-table-line',
  components: {
    NTableTd
  },
  props: {
    columns: {
      type: Array,
      default () {
        return []
      }
    },
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    index: {
      type: Number,
      default: 0
    },
    // 列表样式（下标）
    classIndex: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    classes () {
      const classes = Object.entries(this.classIndex).filter(kv => kv[1] === this.index).map(kv => kv[0])
      classes.push(this.data._classes)
      return classes
    }
  },
  methods: {
    onLineClick (event) {
      if (event.mouse && Math.abs(event.mouse.clientX - event.clientX) > 20) {
        return false
      }
      this.$emit('on-line-click', event, this.data, this.index)
    },
    onCellClick (event, data, index, column) {
      this.$emit('on-cell-click', event, data, index, column)
    },
    onMouseEnter () {
      this.$set(this.classIndex, 'n-table-line-hover', this.index)
    },
    onMouseLeave () {
      if (this.classIndex['n-table-line-hover'] === this.index) {
        this.$set(this.classIndex, 'n-table-line-hover', -1)
      }
    }
  }
}
</script>
