<template>
  <div :class="[b(),className]"
       :style="styleSizeName"
       @mouseenter="handleMouseEnter"
       @mouseover="handleMouseOver"
       @mouseleave="handleMouseLeave">
    <el-table :style="styleChartName"
              ref="table"
              @cell-click="cellClick"
              @cell-dblclick="cellDblClick"
              @selection-change="handleSelectionChange"
              :data="dataChart"
              :height="height"
              :border="option.border"
              :stripe="option.stripe"
              :size="option.size"
              :highlight-current-row="option.highlightCurrentRow"
              :cellStyle="cellStyle"
              :row-style="rowStyle"
              :show-header="showHeader"
              :header-row-style="headerRowStyle"
              :header-cell-style="headerCellStyle"
              :loading="option.loading"
              :empty-text="option.emptyText || '暂无数据'"
              v-loading="option.loading">
      <el-table-column type="selection"
                       width="55"
                       align="center"
                       v-if="option.selection">
      </el-table-column>
      <el-table-column type="index"
                       label="#"
                       header-align="center"
                       align="center"
                       v-if="option.index"
                       width="60">
        <template #default="{$index}">
          <span>{{$index+1}}</span>
        </template>
      </el-table-column>
      <template v-for="(item,index) in option.column">
        <el-table-column v-if="item.hide!==true"
                         :key='index'
                         :class-name="item.className"
                         :show-overflow-tooltip="item.showOverflowTooltip"
                         :prop="item.prop"
                         :label="item.label"
                         :width="item.width"
                         :min-width="item.minWidth"
                         :fixed="item.fixed"
                         :align="item.align"
                         :header-align="item.headerAlign"
                         :sortable="item.sortable">
          <template #default="{row}">
            <span v-html="getFormatter(item,row)"
                  v-if="item.formatter&&reload"></span>
            <span v-else>{{row[item.prop]}}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import create from "../../create";
import { getFunction } from '@/utils/utils';
export default create({
  name: "table",
  data () {
    return {
      reload: true,
      headerHeight: '',
      scrollCheck: "",
    };
  },
  watch: {
    'option.column' () {
      this.reload = false
      this.$nextTick(() => {
        this.reload = true
      })
    },
    scrollSpeed () {
      this.setTime();
    },
    scroll: {
      handler () {
        this.setTime();
      },
    }
  },
  computed: {
    showHeader () {
      return this.option.showHeader
    },
    stripe () {
      return this.option.stripe ?? false
    },
    highlightCurrentRow () {
      return this.option.highlightCurrentRow ?? false
    },
    scrollTime () {
      return this.option.scrollTime
    },
    scrollSpeed () {
      return this.option.scrollSpeed || 1
    },
    scroll () {
      return this.option.scroll
    },
    cellHeight () {
      return parseInt((this.height - this.headerHeight) / this.option.count)
    }
  },
  props: {
    option: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.headerHeight = this.$refs.table.$refs.headerWrapper ? parseInt(this.$refs.table.$refs.headerWrapper.clientHeight) : 0
      setTimeout(() => {
        this.setTime();
      }, this.scrollTime)
    })
  },
  methods: {
    getFormatter (item, row) {
      try {
        return getFunction(item.formatter)(item, row)
      } catch (e) {
      }

    },
    handleMouseOver () {
      clearInterval(this.scrollCheck);
    },
    handleMouseLeave () {
      this.handleCommonBind(null, null, 'mouseLeaveFormatter')
      this.setTime()
    },
    cellClick (row, column, cell, event) {
      this.handleCommonBind(row, column, 'clickFormatter')
    },
    cellDblClick (row, column, cell, event) {
      this.handleCommonBind(row, column, 'dblClickFormatter')
    },
    setTime () {
      clearInterval(this.scrollCheck);
      this.headerHeight = this.$refs.table.$refs.headerWrapper ? parseInt(this.$refs.table.$refs.headerWrapper.clientHeight) : 0
      const table = this.$refs.table
      const divData = table.$refs.bodyWrapper.querySelector('.el-scrollbar__wrap')
      const speed = 1
      let top = 0
      if (this.scroll) {
        this.scrollCheck = setInterval(() => {
          top = top + speed
          divData.scrollTop += speed;
          if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight) {
            divData.scrollTop = 0
          }
          if (top >= this.cellHeight && this.scrollTime) {
            divData.scrollTop = divData.scrollTop - (top - this.cellHeight)
            clearInterval(this.scrollCheck);
            setTimeout(() => {
              this.setTime()
            }, this.scrollTime)
          }
        }, Math.max(1, Math.floor(10 / this.scrollSpeed)))  // 数值越大，速度越快；数值越小，速度越慢
      } else {
        divData.scrollTop = 0
      }
    },
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      const style = {
        padding: 0,
        height: this.setPx(this.cellHeight),
        fontSize: this.setPx(this.option.bodyFontSize),
        color: this.option.bodyColor,
        textAlign: column.type == 'index' ? 'center' : this.option.bodyTextAlign,
      }

      // 只在未开启斑马纹时使用自定义背景色
      if (!this.option.stripe) {
        style.backgroundColor = rowIndex % 2 == 0 ? this.option.othColor : this.option.nthColor
      }

      return style
    },
    rowStyle ({ rowIndex }) {
      return {
        backgroundColor: 'transparent'
      }
    },
    headerRowStyle () {
      return {
        backgroundColor: this.option.headerBackground
      }
    },
    headerCellStyle ({ row, column, rowIndex, columnIndex }) {
      return {
        fontSize: this.setPx(this.option.headerFontSize),
        backgroundColor: this.option.headerBackground,
        color: this.option.headerColor,
        textAlign: column.type == 'index' ? 'center' : this.option.headerTextAlign
      }
    },
    handleSelectionChange (selection) {
      this.handleChange(selection)
    }
  }
});
</script>


