<template>
  <div class="cont-table">
    <!-- :image="nonedataImg"  -->
    <el-empty description=" " v-if="!table.total && table.data.length == 0" />
    <el-table
      :data="table.data"
      v-else
      style="width: 100%"
      :height="height"
      :show-overflow-tooltip="overtip"
      header-row-class-name="datatable"
      row-class-name="datarow"
      fit
      :tree-props="treeProps"
      row-key="bsm"
      @selection-change="selectionChange"
    >
      <el-table-column v-if="indexed" label="序号" width="70px" align="center">
        <template #default="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column v-if="check" type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column
        v-for="(item, index) in cloumn"
        :prop="item.prop"
        :label="item.label"
        :key="index"
        :width="item.width || null"
        :fixed="item.fixed"
        :align="item.align || 'left'"
      >
        <template #default="scope">
          <slot
            v-if="item.slot"
            :name="item.slot ? item.slot : ''"
            v-bind="scope"
          ></slot>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="table.data.length && table.total > 0"
      :total="table.total"
      v-model:page="page"
      v-model:limit="limt"
      :layout="layout"
      @pagination="searchFun"
    />
  </div>
</template>
<script setup>
const pageSize = computed({
  get() {
    return props.limit;
  },
  set(val) {
    emit("update:limit", val);
  },
});
</script>
<script>
export default {
  components: {},
  props: {
    indexed: {
      type: Boolean,
      default: true,
    },
    cloumn: {
      type: Array,
      default: [],
    },
    table: {
      type: Object,
    },
    showTotal: {
      type: Boolean,
      default: true,
    },
    treeProps: {
      type: Object,
      default: () => {},
    },
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
    overtip: {
      type: Boolean,
      default: false,
    },
    height: {
      type: String || Number,
      default: undefined,
    },
    check: {
      type: Boolean,
      default: true,
    },
    pageNum: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {};
  },
  computed: {
    page: {
      get() {
        return this.$props.pageNum;
      },
      set(val) {
        this.$emit("update:pageNum", val);
      },
    },
    limt: {
      get() {
        return this.$props.pageSize;
      },
      set(val) {
        this.$emit("update:pageSize", val);
      },
    },
  },

  mounted() {},
  methods: {
    // 搜索
    searchFun() {
      this.$emit("currentChange", {
        pageNum: this.page,
        pageSize: this.limt,
      });
    },

    // 修改当前页数
    changePage(v) {
      this.pageNum = v;
      this.searchFun();
    },
    handleSizeChange(v) {
      this.pageSize = v;
      this.searchFun();
    },
    selectionChange(v) {
      console.log(v);
      this.$emit("selectChange", v);
    },
  },
  beforeDestroy() {},
  watch: {},
};

// searchFun()
</script>
<style lang="scss" scoped>
.el-table {
  height: calc(100% - 50px);
}
</style>
<style lang="scss">
// @import url(./tabs.scss);
</style>