<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'">
                <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="fetchList">搜索</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">
        <template v-for="item in columns">
          <el-table-column v-bind="item" :key="item.prop">
            <template v-slot:default="scope" v-if="item.slots">
              <slot :name="item.slots" v-bind="scope"></slot>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <el-pagination
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, prev, pager, next, sizes, jumper"
        :total="400"
        class="table-list-pagination"
      >
      </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: () => [] }
  },
  data() {
    return {
      params: this.remote.params || {},
      dataList: this.data
    }
  },
  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
      }
      // 接口请求之前
      if (beforeRequest) {
        this.params = beforeRequest(this.params)
      }
      httpRequest(this.params).then(res => {
        this.dataList = callback ? callback(res) : res
      })
    },
    // 重置
    reset() {
      // 清空筛选条件
      this.$refs.filterForm.resetFields()
      // 初始化页码
      // 刷新列表
      this.fetchList()
    },
    // 刷新
    refresh(isForce) {
      isForce ? this.reset() : this.fetchList()
    }
  }
}
</script>

<style lang="scss">
.table-list {
  padding: 10px;
}
.table-list-hd {
  display: flex;
}
.table-list-filter {
  flex: 1;
}
.table-list-pagination {
  padding: 20px 0;
  text-align: right;
}
</style>
