  <template>
  <div>
    <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      :header-cell-style="{
        'background-color': '#eef1f6',
        'font-size': '14px',
        color: '#333',
        height: '40px'
      }"
      stripe
      show-overflow-tooltip
      @selection-change="handleSelectionChange"
    >
      <!--多选选择-->
      <el-table-column v-if="selectionShow" type="selection" align="center" width="50" :selectable="canSelect"></el-table-column>
      <!--序号 自定义列序号-->
      <el-table-column
        v-if="indexShow"
        type="index"
        align="center"
        label="序号"
        width="55"
      >
        <template slot-scope="scope">
          <span>{{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <template v-for="column in tableColumns">
        <slot :name="column.key" v-if="column.type == 'slot'"></slot>
        <el-table-column
          v-else
          :key="column.key"
          :prop="column.key"
          :label="column.label"
          :width="column.width"
          :fixed ='column.fixed'
          align="center"
        ></el-table-column>
      </template>
      <slot></slot>
    </el-table>
    <el-pagination
      v-if="showPagination"
      class="pagination"
      background
      @current-change="handleCurrentChange"
      :current-page.sync="pagination.currentPage"
      :page-size="pagination.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="pagination.total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "Table",
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      required: true,
      default: () => {
        return [];
      }
    },
    tableColumns: {
      type: Array,
      required: true,
      default: () => {
        return [];
      }
    },
    showPagination: {
      type: Boolean,
      default: true
    },
    pagination: {
      type: Object,
      // required: true,
      default: function() {
        return {
          currentPage: 1,
          total: 0,
          pageSize: 10
        };
      }
    },
    selectionShow: {
      // 多选 默认不显示
      type: Boolean,
      default: false
    },
    indexShow: {
      // 序号 默认不显示
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // tableHeight: 0
    };
  },
  methods: {
    handleCurrentChange() {
      this.$emit("Jump");
    },
    handleSelectionChange(val) {
      this.$emit("SelectionChange", val)
    },
    canSelect(row) {
      return !row.diseditable;
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.tableHeight = document.body.clientHeight - 330;
    // });
  }
};
</script>

<style scoped lang="stylus">
.pagination {
  text-align: right;
  margin-top: 15px;
}
</style>
