<template>
  <div class="Tables">
    <div class="table-item">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        @sort-change="sortChange"
      >
        <el-table-column
          v-if="isIndex"
          label="序号"
          width="50"
          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 in forData">
          <el-table-column
            :label="item.label"
            :prop="item.prop"
            :width="item.width"
            :min-width="item.minWidth"
            align="left"
            :fixed="item.fixed"
            :sortable="item.sortable"
            :resizable="false">
              <template v-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>
                <span v-else>
                  {{ scope.row[item.prop] }}
                </span>
              </template>
          </el-table-column>

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

<script>
export default {
  name: "Tables",
  props: {
    isIndex: {
      type: Boolean,
      default: true
    },
    indexFixed: {
      type: Boolean,
      default: false
    },
    tableLoading: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: []
    },
    forData: {
      type: Array,
      default: []
    },
    tableDataTotal: {
      type: Number,
      default: 0
    },
    queryParams: {
      type: Object,
      default: {}
    },
    paging: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {

    }
  },
  methods:{
    handleCurrentChange(e){
      this.$emit('handle-current-change',e)
    },
    handleSizeChange(e){
      this.$emit('handle-current-change',e)
    },
    sortChange(e){
      this.$emit('sort-change',e)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__body tr.current-row > td.el-table__cell{
  background-color: #ffffff;
}
</style>
