<template>
  <div class="box">
    <el-table
      :cell-style="{ color: '#fff' }"
      :header-cell-style="{ color: '#fff' }"
      :data="tableData"
      height="700px"
      border
    >
      <el-table-column
        show-overflow-tooltip
        v-for="(item, index) in tableheader"
        :key="index"
        :prop="item"
        :label="item"
        align="center"
        width="150"
      ></el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      background
      layout="prev, pager, next"
      :page-size="shujupage.size"
      :total="shujupage.total"
      :current-page="shujupage.current"
      @size-change="Sizechange"
      @current-change="Currentchange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { listData } from "../../../api/Datadetails";
export default {
  props: {
    row: {
      type: Object,
      default() {
        return;
      },
    },
  },
  data() {
    return {
      shujupage: {
        total: 100, //总数量
        size: 10, //每页数量
        current: 1, //当前页
      },
      tableheader: [],
      tableData: [],
    };
  },
  methods: {
    onLoad() {
      console.log(this.row);
      listData({
        pageSize: this.shujupage.size,
        pageNum: this.shujupage.current,
        tableName: this.row.tableRef,
      }).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          this.tableheader = Object.keys(res.data.rows[0]);
          this.tableData = res.data.rows;
          this.shujupage.total = res.data.total;
        }
      });
    },
    onSubmit() {},
    Sizechange() {},
    Currentchange(val) {
      // console.log(val);
      // console.log("页码改变了");
      this.shujupage.current = val;
      this.onLoad();
    },
  },
};
</script>

<style scoped>
::v-deep.box
  .el-table--scrollable-x
  .el-table__body-wrapper::-webkit-scrollbar {
  display: block !important;
}
/* 滑道样式 */
::v-deep.box
  .el-table--scrollable-x
  .el-table__body-wrapper::-webkit-scrollbar {
  width: 5px;
  background: #304156;
  border-radius: 6px;
}
/* 定义滑块的样式 */
::v-deep.box
  .el-table--scrollable-x
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.3);
}
/* 定义滑块鼠标移入时的样式 */
::v-deep.box
  .el-table--scrollable-x
  .el-table__body-wrapper
  .el-table__body-wrapper
  .is-scrolling-left::-webkit-scrollbar-thumb:hover {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.4);
}
</style>