<template>
  <tr class="uif-t-body-tr" :data-tridx="index" :class="classes" @click="lineClick"
      @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave(index)">
    <td class="uif-t-body-td" v-for="(column, idx) in columns" :key="idx" :style="styles" @click="cellClick($event, column)">
      <table-cell :index="index" :column="column" :data="data"
                  @selection="handleSelection" @operation="handleOperation"></table-cell>
    </td>
  </tr>
</template>

<script>
import TableCell from './cell'
import {entries} from '@uif/hq/lib/utils/object'

export default {
  name: 'u-table-line',
  components: {
    TableCell
  },
  props: {
    columns: {
      type: Array,
      default () {
        return []
      }
    },
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    index: {
      type: Number,
      default: -1
    },
    // 列表样式（下标）
    classIndex: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    classes () {
      const classes = entries(this.classIndex).find(arr => arr[1] === this.index)
      return [
        {
          'uif-t-body-tr-selection': this.data._isChecked
        },
        classes ? classes[0] : {},
        this.data['_classes'] || {}
      ]
    },
    styles () {
      const height = this.data._height
      return height ? {height: height + 'px'} : null
    }
  },
  methods: {
    // event, data
    lineClick (event) {
      this.$emit('line-click', event, this.data, this.index)
    },
    // event, data, index, column
    cellClick (event, column) {
      if (column.stop) return event.stopPropagation()
      this.$emit('cell-click', event, this.data, this.index, column)
    },
    handleMouseEnter () {
      this.$set(this.classIndex, 'uif-t-body-tr-hover', this.index)
    },
    handleMouseLeave () {
      if (this.classIndex['uif-t-body-tr-hover'] === this.index) {
        this.$set(this.classIndex, 'uif-t-body-tr-hover', -1)
      }
    },
    handleSelection (...arg) {
      this.$emit('selection', ...arg)
    },
    handleOperation (...arg) {
      this.$emit('operation', ...arg)
    }
  }
}
</script>
