<!--  table组件-->
<template>
  <div class="warp">
    <el-table
      :data="dataSource"
      v-loading="loading"
      :header-cell-style="{ background: '#EAEAEA', color: '#333333' }"
      :show-summary="showSummary"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="isSelection"
        type="selection"
        width="25"
        align="center"
      ></el-table-column>
      <el-table-column
        v-for="(item, i) in column"
        :key="i"
        :label="item.label"
        :prop="item.prop"
        :sortable="item.sortable || false"
        :align="item.align || 'left'"
        :width="item.width"
      >
        <!-- slot -->
        <template slot-scope="scope">
          <slot
            v-if="item.prop === 'slot'"
            :name="item.slotName"
            :row="scope.row"
          ></slot>
          <span v-else>{
   
   { scope && scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <slot name="action"></slot>
    </el-table>
    <Pagination
      v-if="pagination.pageNum"
      :pageNum.sync="pagination.pageNum"
      :pageSize.sync="pagination.pageSize"
      :total.sync="pagination.total"
      @pagination="handleChangePage"
    />
  </div>
</template>
<script>
import Pagination from "@/components/Pagination";
export default {
  components: {
    Pagination,
  },
  props: {
    column: {
      type: Array,
      default: () => [],
    },
    dataSource: {
      type: Array,
      default: () => [],
    },
    isSelection: {
      type: Boolean,
      default: false,
    },
    optionWidth: {
      type: String,
      default: "100",
    },
    pagination: {
      type: Object,
      default() {
        return {};
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    // 分页信息切换
    handleChangePage(val) {
      this.$emit("onPagination", val);
    },
    handleClickShowDetail: function (scope) {
      console.log(scope);
    },
    handleClickPass: function () {},
    handleClickReject: function () {},
    handleSelectionChange(arr) {
      this.$emit("selectionChange", arr);
    },
  },
  created() {},
  mounted() { },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.warp {
  padding: 0 20px;
}
</style>

<!-- @Descripttion: 分页组件-->
<template>
  <div :class="{ hidden: hidden }" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="limit"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'

export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    pageNum: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.pageNum
      },
      set(val) {
        this.$emit('update:pageNum', val)
      }
    },
    limit: {
      get() {
        return this.pageSize
      },
      set(val) {
        this.$emit('update:pageSize', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log('val', val)
      this.$emit('pagination', { pageNum: this.currentPage, pageSize: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { pageNum: val, pageSize: this.limit })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
  display: flex;
  justify-content: flex-end;
}
.pagination-container.hidden {
  display: none;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  /* background-color: #4d78d5; */
}
</style>

<!-- @Descripttion: 使用->
<tables
              :column="column"
              :dataSource="dataList"
              :isSelection="isSelection"
              :loading="loading"
              :pagination="pagination"
              @selectionChange="handleSelectionChange"
              @onPagination="onPaginations"
            >
              <template v-slot:severity="scope">
                {
   
   { severitys[scope.row.severity] }}
              </template>

              <el-table-column
                slot="action"
                header-align="center"
                align="center"
                fixed="right"
                label="操作"
                width="250"
              >
                <template v-slot:default="scope">
                  <span v-if="operating">
                    <el-button type="text" @click="editRows(scope.row)"
                      >编辑
                    </el-button>
                    <el-button type="text" @click="delCourse(scope.row)"
                      >删除</el-button
                    ></span
                  >
                </template>
              </el-table-column></tables
            >

 column: [
        { label: "序号", prop: "index", align: "center", width: 60 },
        {
          label: "类型",
          prop: "slot",
          slotName: "severity",
          align: "center",
        },
        { label: "名称", prop: "name", align: "center" },
      ],
      severitys: {
        0: "未定义",
        1: "轻",
        2: "重",
      },
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      isSelection: false,
      loading: false,