/* eslint-disable vue/require-default-prop */
import {FUNC_PROP, OBJECT_PROP} from '../interface'
import {
  isArray,
  isString,
  isNumber,
  isObject,
  isFunction, noop
} from '../utils/type'
export default {
  name: 'Cell',

  // functional: true,

  inject: {
    store: OBJECT_PROP,
    scopedSlots: OBJECT_PROP,
    onColumnResize: FUNC_PROP,
    rowHeight: {
      type: [String, Number]
    }
  },

  props: {
    prefixCls: String,
    record: Object,
    column: Object,
    /** `record` index. Not `column` index. */
    index: Number,
    prop: String,
    component: String,
    children: [Array, Object],
    colSpan: Number,
    rowSpan: Number,
    ellipsis: Boolean,
    align: String,

    shouldCellUpdate: Function,

    // Fixed
    fixLeft: [Number, Boolean],
    fixRight: [Number, Boolean],
    firstFixLeft: Boolean,
    lastFixLeft: Boolean,
    firstFixRight: Boolean,
    lastFixRight: Boolean,

    // Additional
    /** @private Used for `expandable` with nest tree */
    appendNode: [Object, Array],
    rowType: String // 'header' | 'body' | 'footer',
  },
  updated() {
    // this.Controlwidth()
  },
  methods: {
    Controlwidth() {
      const _this = this;
      let tTD; // 用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
      let table = document.querySelector(".ant-table-thead");
      console.log(table.rows[0].cells.length)
      // console.log(table.rows[0].cells)
      for (let j = 0; j < table.rows[0].cells.length; j++) {
        table.rows[0].cells[j].onmousedown = function () {
          console.log(table.rows[0].cells[j])// 记录单元格
          tTD = this;
          if (event.offsetX > tTD.offsetWidth - 10) {
            tTD.mouseDown = true;
            tTD.oldX = event.x;
            tTD.oldWidth = tTD.offsetWidth;
          }
          // 记录Table宽度
          table = tTD; while (table.tagName !== 'TABLE') table = table.parentElement;
          tTD.tableWidth = table.offsetWidth;
        };
        table.rows[0].cells[j].onmouseup = function () {// 结束宽度调整
          if (tTD === undefined) tTD = this;
          tTD.mouseDown = false;
          tTD.style.cursor = 'default';
        };
        table.rows[0].cells[j].onmousemove = function () {// 更改鼠标样式
          if (event.offsetX > this.offsetWidth - 10)
            this.style.cursor = 'col-resize';
          else
            this.style.cursor = 'default';// 取出暂存的Table Cell
          if (tTD === undefined) tTD = this;// 调整宽度
          if (tTD.mouseDown != null && tTD.mouseDown === true) {
            tTD.style.cursor = 'default';
            if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
              tTD.width = tTD.oldWidth + (event.x - tTD.oldX);// 调整列宽
            tTD.style.width = tTD.width;
            tTD.style.cursor = 'col-resize';// 调整该列中的每个Cell
            table = tTD;// console.log(tTD.width)
            while (table.tagName !== 'TABLE') table = table.parentElement;// console.log()
            table.rows[0].cells[j].style.width = tTD.width + "px"
            _this.onColumnResize(j,tTD.width)
            // border = "1px solid #000"

            // console.log(table.rows[0].cells[j].style.width)

            // console.log()

            // for (let j = 0; j < table.rows.length; j++) {
            // // console.log(tTD.width)

            // }

            // 调整整个表

            table.width = tTD.tableWidth + tTD.offsetWidth - tTD.oldWidth;
            table.style.width = table.width;
          }
        };
      }
    }
  },
  render(h) {
    const {
      index,
      column,
      prefixCls,
      record = {},
      prop = '',
      children,
      component: Component = 'td',
      colSpan,
      rowSpan,
      fixLeft,
      fixRight,
      firstFixLeft,
      lastFixLeft,
      firstFixRight,
      lastFixRight,
      appendNode,
      additionalProps = {},
      ellipsis,
      align,
      rowType
    } = this
    const {store, rowHeight, scopedSlots} = this
    const isHeader = rowType === 'header'
    const cellPrefixCls = `${prefixCls}-cell`
    const value = record[prop]
    let childNode = children || value || ''

    if (isHeader) {
      if (isObject(column) && isFunction(column.renderHeader)) {
        childNode = column.renderHeader(h, {
          store: store,
          row: record,
          column,
          value,
          index
        })
      }
    } else {
      if (isObject(column) && isFunction(column.render)) {
        childNode = column.render(h, {
          store: store,
          value,
          row: record,
          column,
          index
        })
      }
    }

    if (ellipsis && (lastFixLeft || firstFixRight)) {
      childNode = <span class={`${cellPrefixCls}-content`}>{childNode}</span>
    }

    const fixedStyle = {}
    const isFixLeft = typeof fixLeft === 'number'
    const isFixRight = typeof fixRight === 'number'

    if (isFixLeft) {
      fixedStyle.position = 'sticky'
      fixedStyle.left = fixLeft + 'px'
    }

    if (isFixRight) {
      fixedStyle.position = 'sticky'
      fixedStyle.right = fixRight + 'px'
    }

    const alignStyle = {}
    if (align) {
      alignStyle.textAlign = align
    }

    let title
    const ellipsisConfig = ellipsis === true ? {showTitle: true} : ellipsis

    if (ellipsisConfig && (ellipsisConfig.showTitle || isHeader)) {
      if (childNode && isArray(childNode) && childNode.length === 1) {
        childNode = childNode[0]
      }

      if (typeof childNode === 'string' || typeof childNode === 'number') {
        title = childNode.toString()
      }

      if (!isString('' + title)) {
        title = record[prop] || ''
      }
    }

    if (colSpan === 0 || rowSpan === 0) {
      return null
    }

    const componentProps = {
      attrs: {
        title,
        ...additionalProps,
        colSpan: colSpan !== 1 ? colSpan : null,
        rowSpan: rowSpan !== 1 ? rowSpan : null
      },
      class: [
        cellPrefixCls,
        column ? [column.class, column.className] : [],
        {
          [`${cellPrefixCls}-fix-left`]: isFixLeft,
          [`${cellPrefixCls}-fix-left-first`]: firstFixLeft,
          [`${cellPrefixCls}-fix-left-last`]: lastFixLeft,
          [`${cellPrefixCls}-fix-right`]: isFixRight,
          [`${cellPrefixCls}-fix-right-first`]: firstFixRight,
          [`${cellPrefixCls}-fix-right-last`]: lastFixRight,
          [`${cellPrefixCls}-ellipsis`]: ellipsis,
          [`${cellPrefixCls}-with-append`]: appendNode
        }
      ],
      style: {
        ...additionalProps.style,
        ...alignStyle,
        ...fixedStyle,
        height: !isHeader && isNumber(+rowHeight) ? rowHeight + 'px' : rowHeight
      },
      ref: null
    }
    let scopedSlots1 = null
    if (column['slot']) {
      if (record.name) {
        scopedSlots1 = scopedSlots()['item']({item: record})
      } else {
        scopedSlots1 = childNode;
      }
    } else {
      scopedSlots1 = childNode;
    }
    let onDblClick = noop

    onDblClick = (event) => store.toggleColumnSelection(record, event)
    return (
      <Component {...componentProps} onDblclick={onDblClick}>
        {appendNode}
        {scopedSlots1}
      </Component>
    )
  }
}