const getColumnById = function(grid, columnId) {
  let column = null;
  grid.columns.forEach(function(item) {
    if (item.id === columnId) {
      column = item;
    }
  });
  return column;
};

const getColumnByCell = function(grid, cell) {
  const matches = (cell.className || '').match(/grid_[^\s]+/gm);
  if (matches) {
    return getColumnById(grid, matches[0]);
  }
  return null;
};

import { getValueByPath, getCell, orderBy, getChild } from './util';

export default {
  props: {
    columns: {},
    data: {},
    fixed: {},
    selection: {
      default() {
        return [];
      }
    }
  },

  render(h) {
    return (
      <table
        class="el-table__body"
        cellspacing="0"
        cellpadding="0"
        border="0">
        <tbody>
          {
            this._l(this.data, (row, $index) =>
              <tr
                on-click={ ($event) => this.handleClick($event, row) }
                on-mouseenter={ _ => this.handleMouseEnter($index) }
                class={{
                  'current-row': row === this.$parent.$parent.selected,
                  'hover': this.$parent.$parent.hoverRowIndex === $index,
                  'positive-row': row.$positive,
                  'info-row': row.$info,
                  'warning-row': row.$warning,
                  'negative-row': row.$negative
                }}>
                {
                  this._l(this.columns, (column) =>
                    <td
                      class={ column.id }
                      on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
                      on-mouseleave={ this.handleCellMouseLeave }>
                      {
                        column.template
                          ? column.template.call(this._renderProxy, h, { row, column, $index })
                          : <div class="cell">{ this.$getPropertyText(row, column.property, column.id) }</div>
                      }
                    </td>
                  ).concat(this.fixed ? <td class="gutter" /> : '')
                }
              </tr>
            )
          }
        </tbody>
      </table>
    );
  },

  data() {
    return {
      tooltipDisabled: true
    };
  },

  filters: {
    orderBy
  },

  methods: {
    handleCellMouseEnter(event, row) {
      let grid = this.$parent;
      const cell = getCell(event);

      if (cell) {
        const column = getColumnByCell(grid, cell);
        const hoverState = grid.hoverState = { cell: cell, column: column, row: row };
        grid.$emit('cellmouseenter', hoverState.row, hoverState.column, hoverState.cell, event);
      }

      // 判断是否text-overflow, 如果是就显示tooltip
      const cellChild = getChild(event);

      if (cellChild.scrollWidth > cellChild.offsetWidth) {
        this.tooltipDisabled = false;
      } else {
        this.tooltipDisabled = true;
      }
    },

    handleCellMouseLeave(event) {
      let grid = this.$parent;
      const cell = getCell(event);

      if (cell) {
        const oldHoverState = grid.hoverState;
        grid.$emit('cellmouseleave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, event);
      }
    },

    handleMouseEnter(index) {
      this.$parent.hoverRowIndex = index;
    },

    handleClick(event, row) {
      let grid = this.$parent;
      const cell = getCell(event);

      if (cell) {
        const column = getColumnByCell(grid, cell);
        if (column) {
          grid.$emit('cellclick', row, column, cell, event);
        }
      }

      if (grid.selectionMode === 'single') {
        grid.selected = row;
        grid.$emit('selectionchange', row);
      }

      grid.$emit('rowclick', row, event);
    },

    handleCreate(vm) {
      document.body.appendChild(vm.$refs.popper);
      vm.updatePopper();
    },

    $getPropertyText(row, property, columnId) {
      let grid = this.$parent;
      const column = getColumnById(grid, columnId);
      if (column && column.formatter) {
        return column.formatter(row, column);
      }

      return getValueByPath(row, property);
    }
  }
};