import { TableColumn } from 'element-ui'

export default {
  name: 'ElTableColumn',
  extends: TableColumn,
  props: {
    maxWidth: {
      type: Number
    }
  },
  data() {
    return {
      timer: null
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer)
    this.timer = null
  },
  mounted() {
    // 设置默认的table-column 表头渲染，判断当出现省略号时el.offsetWidth < el.scrollWidth， 悬浮显示toolTip,
    // 采用jsx 语法进行书写, 加延迟目的： 渲染完毕还未获取到是否超出内容的条件
    this.timer = setTimeout(() => {
      if (this.columnConfig.type === 'selection') {
        return
      }
      this.columnConfig.renderHeader = (h, { column }) => {
        const { label, id } = column
        const el = document.querySelector(`.${id} .cell`)
        const eleWidth = el && el.offsetWidth
        if (el && (eleWidth < el.scrollWidth)) { // 表示超出了，有省略号出现
          return (<el-tooltip class='item' effect='dark' content={label} placement='top'>
            <span >{label}</span>
          </el-tooltip>)
        } else {
          return <span>{ label }</span>
        }
      }
    }, 500)
  }
}