<template>
  <div class="table-list">
    <div class="table-list-hd">
      <!-- 筛选 -->
    </div>
    <div class="table-list-bd">
      <el-table
        border
        size="small"
        header-cell-class-name="table-list-header-cell"
        :data="dataList"
        v-bind="$attrs"
        ref="table"
      >
        <!-- 序号 -->
        <el-table-column type="index" align="center" label="序号" width="60" v-if="columns.length"></el-table-column>
        <!-- 表头 -->
        <el-table-column
          :align="column.attrs && column.attrs.align ? column.attrs.align : 'center'"
          show-overflow-tooltip
          v-bind="column.attrs"
          v-for="(column, index) in columns"
          :label="column.label"
          :key="index"
        >
          <template slot-scope="scope">
            <template
              v-if="column.isShow ? column.isShow(get(scope.row, column.prop), scope.row) : true "
            >
              <template v-if="column.buttons">
                <!-- 操作按钮 -->
                <template v-for="(button, index) in column.buttons">
                  <el-button
                    type="text"
                    size="mini"
                    :key="index"
                    v-bind="button.attrs"
                    @click="button.onClick(scope.row)"
                    v-if="button.isShow ? button.isShow(scope.row) : true "
                  >{{button.label}}</el-button>
                </template>
              </template>
              <template v-else-if="column.computed">
                <!-- 处理过的数据 -->
                <div
                  v-html="column.computed(get(scope.row, column.prop), scope.row)"
                >{{ get(scope.row, column.prop) }}</div>
              </template>
              <template v-else>
                <!-- 默认数据 -->
                <template>{{ get(scope.row, column.prop) }}</template>
              </template>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table-list-ft" v-if="hasPage">
      <el-pagination
        :current-page.sync="page.currentPage"
        :page-size="page.size"
        layout="total, prev, pager, next, jumper"
        :total="page.total"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { get } from 'lodash'

export default {
  props: {
    // 表头
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    // 数据
    data: {
      type: Array,
      default() {
        return []
      }
    },
    remote: {
      type: Object
    },
    hasPage: { type: Boolean, default: true }
  },
  data() {
    return {
      // 列表数据
      dataList: [],
      page: {
        total: 0,
        currentPage: 1,
        size: 20
      }
    }
  },
  watch: {
    data: {
      immediate: true,
      deep: true,
      handler(data) {
        this.dataList = data
      }
    },
    columns() {
      this.table && this.table.doLayout()
    }
  },
  computed: {
    table() {
      return this.$refs.table
    }
  },
  methods: {
    // lodash get
    get,
    // 初始化
    init() {
      this.page.currentPage = 1
      // 列表数据
      this.fetchData()
    },
    // 获取列表数据
    fetchData() {
      if (!this.remote || !this.remote.request) {
        return
      }
      // 分页偏移
      if (this.hasPage) {
        this.remote.params.offset = (this.page.currentPage - 1) * this.page.size
        this.remote.params.limit = this.page.size
      }
      // beforeRequest
      this.remote.params =
        (this.remote.beforeRequest &&
          this.remote.beforeRequest(this.remote.params, this)) ||
        this.remote.params

      // 请求接口
      this.remote.request(this.remote.params).then(response => {
        // responseCallback
        response =
          (this.remote.responseCallback &&
            this.remote.responseCallback(response, this)) ||
          response

        // 分页
        if (this.hasPage) {
          this.dataList = response.list
          this.page.total = parseInt(response.count)
        }
      })
    },
    // 页码改变
    handleCurrentChange() {
      this.fetchData()
    },
    // 刷新
    refersh() {
      this.fetchData()
    }
  },
  beforeMount() {
    // 初始化调用
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.tabl-list {
}
.tabl-list-hd {
}
.tabl-list-bd {
}
::v-deep .table-list-header-cell {
  background-color: #f5f7fa;
  color: #272f3f;
  text-align: center;
  font-weight: 400;
}
.table-list-ft {
  padding: 20px 0;
  display: flex;
  justify-content: flex-end;
}
</style>
