<template>
  <div class="data-table-out">
    <el-table
      border
      class="dialog-data-table"
      :data="tableData"
      v-loading="loading"
      :element-loading-background="loadingBG"
      height="calc(100% - .5rem)"
    >
      <el-table-column
        v-if="hasIndex"
        label="序号"
        type="index"
        align="center"
        width="80"
      ></el-table-column>
      <template v-for="(column, cIndex) in columns">
        <!-- 无插槽 -->
        <el-table-column
          v-if="!column.hasSlot"
          :key="column.prop"
          :label="column.label"
          :prop="column.prop"
          :align="column.align ? column.align : 'center'"
          :min-width="column.minWidth ? column.minWidth : ''"
          :sortable="column.sortable"
        ></el-table-column>
        <!-- 自定义插槽 -->
        <el-table-column
          v-else
          :key="cIndex"
          :label="column.label"
          :prop="column.prop"
          :align="column.align ? column.align : 'center'"
          :min-width="column.minWidth ? column.minWidth : ''"
          :sortable="column.sortable"
        >
          <template #default="scope">
            <slot :name="column.prop" :data="scope.row" />
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination
      v-if="hasPagination"
      class="table-pagination"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
export default {
  name: "DialogApiDataTable",
  props: {
    api: {
      type: Function,
      required: true,
    },
    height: {
      type: String,
      default: "6rem",
    },
    columns: {
      type: Array,
      required: true,
      default: () => {
        return [];
      },
    },
    parameters: {
      type: Object,
      default: () => {
        return {};
      },
    },
    hasIndex: {
      type: Boolean,
      default: true,
    },
    hasPagination: {
      type: Boolean,
      default: true,
    },
    autoLoad: {
      type: Boolean,
      default: true,
    },
    apiType: {
      default: "",
    },
    pathId: {
      default: "",
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 0,
      pageSize: 20,
      loadingBG: "rgba(0, 0, 0, 0.2)",
      loading: false,
    };
  },
  mounted() {
    if (this.autoLoad) {
      this.getData();
    }
  },
  methods: {
    getData() {
      if (this.api) {
        this.loading = true;
        this.tableData = [];
        this.api(
          {
            ...this.parameters,
            page: this.currentPage,
            limit: this.pageSize,
          },
          true
        ).then((res) => {
          this.loading = false;
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
      }
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getData();
    },
  },
};
</script>
<style>
.data-table-out {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-grow: 1;
}
</style>