<template>
  <div class="table-list-com-ins">
    <div class="table-item">
      <el-table v-if="tableDataTotal>0" class="fixed-table" :class="headerFixed ? 'headerFixed':''" v-loading="tableLoading" :data="tableData"
        element-loading-text="Loading" ref="tableRef" border fit highlight-current-row :default-sort="defaultSort?defaultSort:{}"
        @sort-change="sortChange" @selection-change="selectionChange" :cell-class-name="cellClassName" :cell-style="cellStyle"
        :row-class-name="rowClassName" :row-style="rowStyle" :height="height" :maxHeight="maxHeight" v-sticky-header="stickyHeader">
        <el-table-column type="selection" :width="needSelection.width ? needSelection.width : '38px'" v-if="needSelection.flag"
          :fixed="needSelection.fixed" :align="needSelection.align" :show-overflow-tooltip="needSelection.showOverflowTooltip">
        </el-table-column>
        <el-table-column type="index" v-if="isIndex" label="序号" :width="flexWidth(tableData)" align="left" :fixed="indexFixed" :resizable="false">
          <template slot-scope="scope">{{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1 }}</template>
        </el-table-column>
        <template v-for="(item,index) in formColum">
          <template v-if="item.use !== false">
            <!-- 复选框列 -->
            <el-table-column v-if="item.type == 'selection'" type="selection" :key="item.uid ? item.uid : index"
              :width="item.width ? item.width : '38px'" :fixed="item.fixed" :align="item.align?item.align:'left'"
              :show-overflow-tooltip="item.showOverflowTooltip">
            </el-table-column>
            <!-- 序号列 -->
            <el-table-column v-else-if="item.type == 'index'" type="index" :key="item.uid ? item.uid : index" :label="item.label ? item.label : '序号'"
              :width="flexWidth(tableData)" :align="item.align?item.align:'left'" :fixed="item.fixed" :resizable="false">
              <template slot-scope="scope">{{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1 }}</template>
            </el-table-column>
            <!-- 普通列 -->
            <el-table-column v-else :key="item.uid ? item.uid : index" :label="item.label" :prop="item.prop" :width="item.width"
              :min-width="item.minWidth" :align="item.align?item.align:'left'" :fixed="item.fixed"
              :sortable="item.sortable ?item.sortable=='custom'? 'custom':true : false" :resizable="false"
              :show-overflow-tooltip="item.showOverflowTooltip">
              <template v-if="item.children&&item.children.length">
                <el-table-column v-for="(cld, i) in item.children" :key="i" :prop="cld.prop" :label="cld.label" :width="cld.width" :resizable="false">
                  <template slot-scope="cldscope">
                    <template v-if="cld.slot">
                      <slot :name="cld.prop" :row="cldscope.row" :data="cld"></slot>
                    </template>
                    <template v-else>
                      <span>{{cldscope.row[cld.prop] || '-'}}</span>
                    </template>
                  </template>
                </el-table-column>
              </template>
              <template v-else-if="item.slotHeader" slot="header">
                <slot :name="item.slotName"></slot>
              </template>
              <template slot-scope="scope">
                <slot v-if="item.slot" :name="item.prop" :row="scope.row" :index="scope.$index" :data="item"></slot>
                <!-- 操作栏 -->
                <slot v-else-if="item.prop == 'action-field-bar'" name="action-field-bar" :row="scope.row" :index="scope.$index" :data="item"></slot>
                <span v-else>
                  {{ scope.row[item.prop] || '-' }}
                </span>
              </template>
            </el-table-column>
          </template>
        </template>
        <template slot="empty">
        </template>
      </el-table>

      <div style="padding: 30px 0;box-sizing:border-box;" v-else>
        <no-data />
      </div>
    </div>

    <div class="pagination-box" v-if="show_page && tableDataTotal>queryParams.pageSize">
      <el-pagination background :current-page="current_page" :page-size="queryParams.pageSize" :total="tableDataTotal"
        layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    </div>

  </div>
</template>

<script>
import NoData from '@/components/NoData';
export default {
  name: "tableListCom",
  props: {
    height: {
      type: [String, Number]
    },
    maxHeight: {
      type: [String, Number]
    },
    isIndex: {
      type: Boolean,
      default: false
    },
    needSelection: {
      type: Object,
      default: () => ({
        flag: false,
        width: "39px",
        fixed: false,
        align: "left",
        showOverflowTooltip: false
      })
    },
    cellClassName: {
      type: Function,
      default: () => { }
    },
    cellStyle: {
      type: Function,
      default: () => { }
    },
    rowClassName: {
      type: Function,
      default: () => { }
    },
    rowStyle: {
      type: Function,
      default: () => { }
    },
    // 吸顶偏移量
    stickyHeader: {
      type: Object,
      default: () => ({
        offsetBottom: '0px',
        offsetTop: "0px",
        show: false
      })
    },
    headerFixed: {
      type: Boolean,
      default: false
    },
    indexFixed: {
      type: Boolean,
      default: false
    },
    tableLoading: {
      type: Boolean,
      default: false
    },
    defaultSort: {
      type: Object,
      default: null
    },
    tableData: {
      type: Array,
      default: () => []
    },
    formColum: {
      type: Array,
      default: () => []
    },
    tableDataTotal: {
      type: Number,
      default: 0
    },
    queryParams: {
      type: Object,
      default: () => ({})
    },
    paging: {
      type: Boolean,
      default: true
    },
    MaxPage: {  //最大页码
      type: Number,
      default: 500
    },
  },
  components: {
    NoData
  },
  data() {
    return {
      current_page: this.queryParams.pageNum,
      show_page: this.paging
    };
  },
  watch: {
    'queryParams.pageNum'(newVal, oldVal) {
      this.current_page = newVal;
    }
  },
  created() {

  },
  methods: {
    handleCurrentChange(e) {
      if (this.MaxPage < e) {
        this.show_page = false;
        this.$nextTick(() => {
          this.current_page = this.queryParams.pageNum;
          this.$message.warning(`对不起，最多只能访问${this.MaxPage}页`);
          this.show_page = true;
        });
      } else {
        this.$emit('handle-current-change', e);
      }
    },
    handleSizeChange(e) {
      this.$emit('handle-current-change', e);
    },
    sortChange(e) {
      this.$emit('sort-change', e);
    },
    selectionChange(selectionArray) {
      this.$emit("selectionChange", selectionArray);
    },
    flexWidth(tableData) {
      let currentMax = this.queryParams.pageNum * this.queryParams.pageSize - this.queryParams.pageSize + tableData.length, wdth = 50;
      if (currentMax.toString().length > 3) {
        wdth = wdth + (currentMax.toString().length - 3) * 10;
      }
      return wdth + 'px';
    }
  }
}
</script>

<style lang="scss" scoped>
.table-list-com-ins {
  ::v-deep .table-item {
    .no-line-feed {
      display: block;
      color: #0081ff;
      cursor: pointer;
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .pagination-box {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    // .el-table th.gutter {
    //   display: table-cell !important;
    // }

    .el-table--border th.gutter:last-of-type {
      display: block !important;
      padding-right: 16px;
    }

    .el-table__body-wrapper::-webkit-scrollbar {
      width: 16px;
      height: 16px;
    }

    .el-scrollbar-warp::-webkit-scrollbar {
      width: 16px;
      height: 16px;
    }

    .el-table {
      /* .cell {
        display: flex;
        align-items: center;
      } */
    }
  }

  ::v-deep .el-table__body tr.current-row > td.el-table__cell {
    background-color: #ffffff;
  }

  ::v-deep .el-table__row {
    &:nth-child(even) {
      background-color: #f9fcff;
      .more {
        background: #f8fbff;
        span {
          color: #0081ff;
        }
      }
    }
    &:nth-child(odd) {
      .more {
        span {
          color: #0081ff;
        }
      }
    }
  }

  ::v-deep .el-table th.el-table__cell.is-leaf,
  ::v-deep .el-table td.el-table__cell {
    border-bottom: 1px solid #e6eaf1;
  }
  ::v-deep .el-table--border .el-table__cell {
    border-right: 1px solid #e6eaf1;
  }
  ::v-deep .el-table__body tr.hover-row.current-row > td,
  ::v-deep .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
  ::v-deep .el-table__body tr.hover-row.el-table__row--striped > td,
  ::v-deep .el-table__body tr.hover-row > td {
    background-color: #dcebff !important;
    .more {
      background: #dcebff;
    }
  }

  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #dcebff;
  }
  ::v-deep .fixed-table {
    overflow: visible;
  }
  ::v-deep .el-table__header-wrapper {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  ::v-deep .el-table__fixed-header-wrapper {
    position: sticky;
    z-index: 9;
    top: 0;
  }
  .headerFixed {
    ::v-deep .el-table__header-wrapper {
      position: sticky;
      top: 80px;
      z-index: 9;
    }
    ::v-deep .el-table__fixed-header-wrapper {
      position: sticky;
      z-index: 9;
      top: 80px;
    }
  }
  ::v-deep .el-table__fixed {
    overflow-x: clip;
    overflow-y: clip;
  }
}
</style>
