<template>
  <div>
    <a-table
      bordered
      v-bind="$attrs"
      v-on="$listeners"
      :dataSource="dataSource"
      :rowKey="rowKey"
      :loading="loading"
      :pagination="false"
      :locale="{emptyText}"
    >
      <slot></slot>
    </a-table>
    <a-pagination
      class="pagination"
      v-bind="pagination"
      v-show="total&&page.hide!==true"
      v-model="pageIndex"
      :total="total"
      :pageSize.sync="pageSize"
      :showTotal=" total => `共 ${total} 条数据`"
      @change="change"
      @showSizeChange="sizeChange"
    />
  </div>
</template>
<script>
export default {
  props: {
    // 调用接口
    api: [String, Function, Object],
    // 查询条件
    query: {
      type: Object,
			default: () => ({})
    },
    // 初始加载数据
    initLoad: {
      type: Boolean,
      default: true
    },
    // 表格所需的rowKey
    rowKey: {
      type: String,
      default: 'uuid'
		},
		page: {
			type: Object,
			default: () => ({})
    },
		// pager配置
		pagination: {
			type: Object,
			default: () => ({
				showSizeChanger: true
			})
		}
  },
  inheritAttrs: false,
  data () {
    return {
      loading: false,
      dataSource: [],
      pageSize: this.page.size||20,
      pageIndex: 1,
      total: 0,
      emptyText: '未找到相关数据'
    }
  },
  methods: {
    async getData () {
      this.loading = true
      let res = null
      if (!this.api) {
        console.error('未传入api')
      }
      if (typeof this.api === 'string') {
        res = await this.$api[this.api].get({
          ...this.query,
          page_size: this.pageSize,
          page_index: this.pageIndex
        })
      } else if(typeof this.api === 'function') {
        res = await this.api({
          ...this.query,
          page_size: this.pageSize,
          page_index: this.pageIndex
        })
      } else {
        res = await this.api.get({
          ...this.query,
          page_size: this.pageSize,
          page_index: this.pageIndex
        })
      }
      this.loading = false
      if (res.err) {
        this.dataSource = []
        this.total = 0
        return this.emptyText = res.errorMessage
      }
      let pageTotle = Math.ceil(res.total_size / this.pageSize) || 1
      // 如果当前页码超出
      if (this.pageIndex > pageTotle) return this.pageIndex = pageTotle
      // 回发数据
      this.$emit('on-data',res.data)

      this.dataSource = res.data
      this.total = res.total_size
    },
    // 页码切换
    change (page) {
      this.pageIndex = page
    },
    // 重新加载
    refresh () {
      this.getData()
    },
    sizeChange () {
      if (this.pageIndex === 1) this.getData()
      else this.pageIndex = 1
    }
  },
  computed: {
    // 总页数
    pageTotal () {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  mounted () {
    if (this.initLoad) this.getData()
  },
  watch: {
    query: {
      handler () {
        this.getData()
      },
      deep: true
    },
    pageSize () {
      // 如果当前非第1页，设置为第1页，并由pageIndex的改变触发getData
      if (this.pageIndex) return this.pageIndex = 1
      this.getData()
    },
    pageIndex () {
      this.getData()
    }
  }
}
</script>
<style lang="less" scoped>
.ant-table-wrapper {
  overflow: auto;
}
.pagination {
  text-align: right;
  margin-top: 20px;
}
</style>