<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="data"
        v-bind="$attrs"
        ref="table"
      >
        <el-table-column type="index" align="center" label="序号" width="60"></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"></div>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  props: {
    // 表头
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    // 数据
    data: {
      type: Array,
      default() {
        return []
      }
    },
    remote: {
      type: Object
    }
  },
  data() {
    return {}
  },
  watch: {
    columns() {
      this.table && this.table.doLayout()
    }
  },
  computed: {
    table() {
      return this.$refs.table
    }
  },
  methods: {
    get: _.get,
    // 获取列表数据
    fetchListData() {
      if (!this.remote || !this.remote.fetch) {
        return
      }
      // beforeRequest
      this.remote.params =
        (this.remote.beforeRequest &&
          this.remote.beforeRequest(this.remote.params)) ||
        this.remote.params
      this.remote.fetch(this.remote.params).then(response => {
        // responseCallback
        response =
          (this.remote.responseCallback &&
            this.remote.responseCallback(response)) ||
          response
      })
    }
  }
}
</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;
}

.tabl-list-ft {
}
</style>
