<template>
  <div class="template-table"
       v-loading="loading"
       element-loading-background="rgba(0, 0, 0, 0)">
    <el-table :data="tableData"
              :height="config.height"
              :max-height="config.maxHeight"
              :border="config.border === undefined || config.border"
              :size="config.size || 'medium'"
              :highlight-current-row="config.radio"
              :row-class-name="config.rowClassNameFn"
              :row-key="config.rowKey"
              :show-header="config.showHeader === undefined || config.showHeader"
              :header-cell-class-name="config.headerCellClassName"
              :header-cell-style="config.headerCellStyle"
              @sort-change="handleSort"
              @select="handleSelect"
              @select-all="handleSelectAll"
              @selection-change="handleSelectChange"
              @row-click="handleClick"
              @row-dblclick="handleDblclick"
              @current-change="handleTableCurrentChange"
              :ref="tableRef">
      <el-table-column v-if="config.selection" :selectable="config.selectable ? config.selectable: () => true " type="selection" width="55" align="center"/>
      <template v-for="item in config.cells">
        <el-table-column v-if="item.slot"
                         :key="item.id"
                         :type="item.type"
                         :min-width="item.mWidth"
                         :width="item.width"
                         :label="item.label"
                         :prop="item.prop"
                         :align="item.align || 'center'"
                         :template="item.template"
                         :formatter="item.formatter"
                         :sortable="item.sortable ? 'custom' : false"
                         :sort-orders="item.sortOrders || []"
                         :fixed="item.fixed"
                         :reserve-selection="!!config.rowKey || false">
          <template v-slot="scope">
            <slot :name="item.prop"
                  :row="scope.row"
                  :$index="scope.$index"></slot>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.expand"
                         :key="item.id"
                         type="expand"
                         width="1">
          <template v-slot="scope">
            <slot :name="item.prop"
                  :row="scope.row"
                  :$index="scope.$index"></slot>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.icon"
                         :render-header="(h,obj)=> icons(h,obj,item.label_instructions)"
                         :prop="item.prop"
                         :key="item.id"
                         :type="item.type"
                         :min-width="item.mWidth"
                         :width="item.width"
                         :label="item.label"
                         :align="item.align || 'center'"
                         :template="item.template"
                         :formatter="item.formatter"
                         :sortable="item.sortable ? 'custom' : false"
                         :sort-orders="item.sortOrders || []"
                         :fixed="item.fixed"
                         :reserve-selection="!!config.rowKey || false"></el-table-column>
        <el-table-column  v-else-if="item.slotHeader?item.slotHeader.header:false">
          <template #header>
            <div v-html="item.slotHeader.headerHtml"></div>
          </template>
          <template #default="scope">
            <div v-if="item.slotHeader.columnSlot">
              <slot :name="item.prop"
                    :row="scope.row"
                    :$index="scope.$index">
              </slot>
            </div>
            <div v-else>{{scope.row[item.prop]}}</div>
          </template>
        </el-table-column>
        <el-table-column v-else
                         :key="item.id"
                         :type="item.type"
                         :min-width="item.mWidth"
                         :width="item.width"
                         :label="item.label"
                         :prop="item.prop"
                         :align="item.align || 'center'"
                         :template="item.template"
                         :formatter="item.formatter"
                         :sortable="item.sortable ? 'custom' : false"
                         :sort-orders="item.sortOrders || []"
                         :fixed="item.fixed"
                         :show-overflow-tooltip="item.showOverflowTooltip||false"
                         :reserve-selection="!!config.rowKey || false"></el-table-column>
      </template>
    </el-table>
    <el-pagination class="template-table-pagination"
                   v-if="(config.pagination === undefined || config.pagination) && pageConfig.total"
                   background
                   :current-page="pageConfig.pageNo"
                   :page-sizes="pageConfig.pageSizes || [10, 20, 30, 50]"
                   :page-size="pageConfig.pageSize"
                   :layout="pageConfig.pageLayout || 'total, sizes, prev, pager, next, jumper'"
                   :total="pageConfig.total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'template-table',
  props: {
    config: {
      type: Object,
      default: () => ({})
    },
    tableData: {
      type: Array,
      default: () => []
    },
    pageConfig: {
      type: Object,
      default: () => {
        return {
          pageNo:1,
          pageSize:10,
          pageSizes: [10, 20, 30, 50],
          total: 0
        }
      }
    },
    tableRef:{
      type:String,
      default: () =>{
        return 'byTable'
      }
    }
  },
  data () {
    return {
      loading: false
    }
  },
  methods: {
    // 页码回调
    handleSizeChange (pageSize) {
      this.pageConfig.pageSize = pageSize
      this.pageConfig.pageNo = 1
      this.$emit('handleSizeChange', this.pageConfig)
    },
    // 翻页回调
    handleCurrentChange (pageNo) {
      this.pageConfig.pageNo = pageNo
      this.$emit('handleCurrentChange', this.pageConfig)
    },
    // 排序回调
    handleSort (info) {
      this.$emit('handleSort', info)
    },
    // 双击行回调
    handleDblclick (row) {
      this.$emit('handleDblclick', row)
    },
    // 单击行回调
    handleClick (row) {
      this.$emit('handleClick', row)
    },
    handleSelect (selection, row) {
      this.$emit('handleSelect', {
        selection,
        row
      })
    },
    handleSelectAll (selection) {
      this.$emit('handleSelectAll', selection)
    },
    // 选择变化回调
    handleSelectChange (row) {
      this.$emit('handleSelectChange', row)
    },
    // 当前选中行变化回调
    handleTableCurrentChange (currentRow, oldCurrentRow) {
      this.$emit('handleGUC', {
        currentRow,
        oldCurrentRow
      })
    },
    // 表头图标
    icons (h, { column }, labelInstructions) {
      return h(
        'div', {
          style: 'display:flex;justify-content:center;'
        },
        [
          h('div', column.label),
          h('template-tool-tip', {
            props: { messages: labelInstructions }
          })
        ]
      )
      // return h('div', [
      //   h('span', column.label + '  ', {
      //     align: 'left'
      //   }),
      //   h(
      //     'el-popover',
      //     {
      //       props: {
      //         placement: 'top-start', // 一般 icon 处可添加浮层说明，浮层位置等属性
      //         width: '300',
      //         style: 'background: black; color: #fff',
      //         trigger: 'hover'
      //       }
      //     },
      //     [
      //       h('p', labelInstructions, {
      //         class: 'text-align: right; margin: 0'
      //       }),
      //       h('i', { // 生成 i 标签 ，添加icon 设置 样式，slot 必填
      //         class: 'el-icon-question',
      //         style: 'color:#ccc,margin:18px',
      //         slot: 'reference'
      //       })
      //     ]
      //   )
      // ])
    }
  },
  watch: {
    tableData () {
      // this.$refs.table.bodyWrapper.scrollTop = 0
    }
  },
  created () {
    console.log(this.config.pagination)
  }
}
</script>

<style lang="less">
.template-table {
  &-pagination {
    margin-top: 20px;
    text-align: right;
  }
}
.el-table:not(.el-table--scrollable-x) {
    .el-table__fixed-right {
        height: 100% !important;
    }
}
.el-checkbox.el-checkbox--medium{
  height: unset;
}
</style>
