<template>
  <div class="table-list">
    <div class="table-list-hd">
      <!-- 筛选 -->
      <div class="table-list-filter" v-if="filters.length">
        <el-form :inline="true" :model="params" size="mini" ref="filterForm">
          <template v-for="item in filters">
            <el-form-item :prop="item.prop" :key="item.prop">
              <!-- input -->
              <el-input v-model="params[item.prop]" v-bind="item" clearable v-if="item.type === 'input'" />
              <!-- select -->
              <el-select
                v-model="params[item.prop]"
                clearable
                v-bind="item"
                v-if="item.type === 'select'"
                @change="search"
              >
                <template v-for="option in item.options">
                  <el-option
                    :label="option[item.labelKey] || option.label"
                    :value="option[item.valueKey] || option.value"
                    :key="option.value"
                  ></el-option>
                </template>
              </el-select>
            </el-form-item>
          </template>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-list-hd-aside"><slot name="header-aside" /></div>
    </div>
    <slot></slot>
    <div class="table-list-bd">
      <el-table :data="dataList" size="mini" v-loading="loading" v-bind="$attrs" v-on="$listeners" height="100%">
        <template v-for="item in columns">
          <el-table-column v-bind="item" :key="item.prop" v-if="visible(item)">
            <template v-slot:default="scope" v-if="item.slots || item.computed">
              <slot :name="item.slots" v-bind="scope" v-if="item.slots"></slot>
              <div v-html="item.computed(scope)" v-if="item.computed"></div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div class="table-list-ft">
      <div>
        <slot name="footer"></slot>
      </div>
      <el-pagination
        class="table-list-pagination"
        layout="total, prev, pager, next, sizes, jumper"
        :current-page.sync="page.currentPage"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="page.size"
        :total="page.total"
        @size-change="pageSizeChange"
        @current-change="fetchList"
        v-if="hasPagination"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TableList',
  props: {
    // 接口请求
    remote: { type: Object, default: () => ({}) },
    // 筛选
    filters: { type: Array, default: () => [] },
    // 列表项
    columns: { type: Array, default: () => [] },
    // 列表数据
    data: { type: Array, default: () => [] },
    // 是否含有翻页
    hasPagination: { type: Boolean, default: true },
    // 每页多少条数据
    limit: { type: Number, default: 20 }
  },
  data() {
    return {
      loading: false,
      params: this.remote.params || {},
      dataList: this.data,
      page: { total: 0, size: this.limit, currentPage: 1 }
    }
  },
  watch: {
    'remote.params': {
      immediate: true,
      handler(data) {
        this.params = data || {}
      }
    },
    data: {
      immediate: true,
      handler(data) {
        this.dataList = data
      }
    }
  },
  methods: {
    fetchList() {
      /**
       * @param function httpRequest api接口
       * @param function beforeRequest 接口请求之前
       * @param function callback 接口请求成功回调
       */
      const { httpRequest, beforeRequest, callback } = this.remote
      if (!httpRequest) {
        return
      }
      // 参数设置
      let params = this.params
      // 翻页参数设置
      if (this.hasPagination) {
        params.page = this.page.currentPage
        params.limit = this.page.size
      }
      // 接口请求之前
      if (beforeRequest) {
        params = beforeRequest(params)
      }
      for (const key in params) {
        if (params[key] === '' || params[key] === undefined || params[key] === undefined) {
          delete params[key]
        }
      }
      this.loading = true
      httpRequest(params)
        .then(res => {
          const { data = [], total = 0 } = res.data || {}
          this.page.total = total
          this.dataList = callback ? callback(data) : data
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 搜索
    search() {
      this.page.currentPage = 1
      this.fetchList()
    },
    // 重置
    reset() {
      // 清空筛选条件
      this.$refs.filterForm && this.$refs.filterForm.resetFields()
      // 初始化页码
      this.page.currentPage = 1
      // 刷新列表
      this.fetchList()
    },
    // 刷新
    refetch(isForce) {
      isForce ? this.reset() : this.fetchList()
    },
    // 页数改变
    pageSizeChange(value) {
      this.page.currentPage = 1
      this.page.size = value
      this.fetchList()
    },
    visible(item) {
      return Object.prototype.hasOwnProperty.call(item, 'visible') ? item.visible : true
    }
  },
  beforeMount() {
    this.fetchList()
  }
}
</script>

<style lang="scss">
.table-list {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.table-list-hd {
  display: flex;
}
.table-list-filter {
  flex: 1;
}
.table-list-bd {
  flex: 1;
}
.table-list-bd .el-table th:first-child> ::v-deep.cell{
  padding-left:14px;
}
.table-list-ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.table-list-pagination {
  padding: 10px 0;
  text-align: right;
}
</style>
