<!-- 高级表格组件 license by http://eleadmin.com -->
<template>
  <div
    :class="['ele-pro-table ele-bg-white', {'ele-pro-table-fullscreen': isFullscreen}]"
    :style="{zIndex: fullZIndex}">
    <ele-toolbar
      v-if="toolbar"
      ref="toolbar"
      :theme="toolsTheme"
      :title="title"
      :sub-title="subTitle"
      :size="tableSize"
      :columns="cols"
      :tools="toolkit"
      :columns-sort="columnsSort"
      :toolkit-style="toolkitStyle"
      :style="toolStyle"
      :class="toolClass"
      :is-fullscreen="isFullscreen"
      @reload="onRefresh"
      @update:size="updateSize"
      @update:columns="updateColumns"
      @fullscreen="toggleFullscreen">
      <slot name="toolbar"/>
      <template #action>
        <slot name="toolkit"/>
      </template>
    </ele-toolbar>
    <!-- 表格 -->
    <a-table
      ref="table"
      :table-layout="tableLayout"
      :bordered="bordered"
      :children-column-name="childrenColumnName"
      :columns="cols"
      :components="components"
      :data-source="list"
      :default-expand-all-rows="defaultExpandAllRows"
      :default-expanded-row-keys="defaultExpandedRowKeys"
      :expanded-row-keys="expandedRowKeys"
      :expanded-row-render="expandedRowRender"
      :expand-icon="expandIcon"
      :expand-row-by-click="expandRowByClick"
      :expand-icon-column-index="expandIconColumnIndex"
      :footer="footer"
      :indent-size="indentSize"
      :loading="isLoading"
      :locale="localeText"
      :pagination="pagination"
      :row-class-name="rowClassName"
      :row-key="rowKey"
      :row-selection="tableRowSelection"
      :scroll="scroll"
      :show-header="showHeader"
      :size="tableSize"
      :custom-header-row="customHeaderRow"
      :custom-row="customRow"
      :get-popup-container="getPopupContainer"
      :transform-cell-text="transformCellText"
      @expandedRowsChange="onExpandedRowsChange"
      @change="onChange"
      @expand="onExpand">
      <template
        v-for="name in Object.keys($slots)"
        :key="name"
        v-slot:[name]="{text, record, index, indent, expanded, props}">
        <slot
          :name="name"
          :text="text"
          :record="record"
          :index="index"
          :indent="indent"
          :expanded="expanded"
          :props="props"/>
      </template>
    </a-table>
  </div>
</template>

<script>
import {eachTreeData} from '../../util';
import EleToolbar from '../../ele-toolbar';
// 如果是服务端数据源默认请求参数名称
const defaultRequest = {
  // 页码的参数名称
  pageName: 'page',
  // 每页数据量的参数名
  limitName: 'limit',
  // 排序字段参数名称
  sortName: 'sort',
  // 排序方式的参数名称
  orderName: 'order'
};
// 如果是服务端数据源默认请求参数名称
const defaultResponse = {
  // 数据状态的字段名称
  statusName: 'code',
  // 成功的状态码
  statusCode: 0,
  // 信息的字段名称
  msgName: 'msg',
  // 数据列表的字段名称
  dataName: 'data',
  // 数据总数的字段名称
  countName: 'count'
};

export default {
  name: 'EleProTable',
  components: {EleToolbar},
  emits: [
    'done',
    'update:selection',
    'update:current',
    'columns-change',
    'size-change',
    'fullscreen-change',
    'refresh',
    'expandedRowsChange',
    'change',
    'expand'
  ],
  props: {
    // 数据源
    datasource: [String, Array, Function],
    // 如果是服务端数据源设定请求方式
    method: {
      type: String,
      default: 'GET'
    },
    // 如果是服务端数据源设定请求的参数
    where: Object,
    // 如果是服务端数据源设定请求的header
    headers: Object,
    // 如果是服务端数据源设定请求数据类型
    contentType: {
      type: String,
      default: 'application/json'
    },
    // 如果是服务端数据源设定请求参数名称
    request: Object,
    // 如果是服务端数据源设定响应参数名称
    response: Object,
    // 如果是服务端数据源自定义返回格式解析
    parseData: Function,
    // 如果是服务端数据源自定义参数格式解析
    parseParam: Function,
    // 列表选中数据(多选)，支持 v-model 绑定
    selection: Array,
    // 列表选中数据(单选)，支持 v-model 绑定
    current: Object,
    // 是否需要分页组件
    needPage: {
      type: Boolean,
      default: true
    },
    // 如果是服务端数据源默认是否请求数据
    initLoad: {
      type: Boolean,
      default: true
    },
    // 表格请求状态
    loading: Boolean,
    // 表格列配置
    columns: {
      type: Array,
      required: true
    },
    // 表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局
    tableLayout: String,
    // 是否展示外边框和列边框
    bordered: Boolean,
    // 指定树形结构的列名
    childrenColumnName: Array,
    // 覆盖默认的 table 元素
    components: Object,
    // 初始时，是否展开所有行
    defaultExpandAllRows: Boolean,
    // 默认展开的行
    defaultExpandedRowKeys: Array,
    // 展开的行，控制属性
    expandedRowKeys: Array,
    // 额外的展开行
    expandedRowRender: Function,
    // 自定义展开图标
    expandIcon: Object,
    // 通过点击行来展开子行
    expandRowByClick: Boolean,
    // 展开的图标显示在哪一列，如果没有 rowSelection，默认显示在第一列，否则显示在选择框后面
    expandIconColumnIndex: Number,
    // 表格尾部
    footer: Function,
    // 展示树形数据时，每层缩进的宽度，以 px 为单位
    indentSize: {
      type: Number,
      default: 15
    },
    // 默认文案设置，目前包括排序、过滤、空数据文案
    locale: Object,
    // 表格行的类名
    rowClassName: Function,
    // 表格行 key 的取值，可以是字符串或一个函数
    rowKey: {
      type: [String, Function],
      default: 'key'
    },
    // 列表项是否可选择
    rowSelection: Object,
    // 设置横向或纵向滚动，也可用于指定滚动区域的宽和高
    scroll: Object,
    // 是否显示表头
    showHeader: {
      type: Boolean,
      default: true
    },
    // 表格大小
    size: {
      type: String,
      default: 'middle'
    },
    // 设置头部行属性
    customHeaderRow: Function,
    // 设置行属性
    customRow: Function,
    // 设置表格内各类浮层的渲染节点，如筛选菜单
    getPopupContainer: Function,
    // 数据渲染前可以再次改变，一般用户空数据的默认配置
    transformCellText: Function,
    // 分页组件默认页码
    currentPage: {
      type: Number,
      default: 1
    },
    // 分页组件每页显示条目个数
    pageSize: {
      type: Number,
      default: 10
    },
    // 分页组件只有一页时是否隐藏
    hideOnSinglePage: Boolean,
    // 分页组件每页显示个数选择器的选项设置
    pageSizeOptions: {
      type: Array,
      default() {
        return ['10', '20', '30', '40', '50', '100'];
      }
    },
    // 分页组件是否显示较少页面内容
    showLessItems: Boolean,
    // 分页组件是否可以快速跳转至某页
    showQuickJumper: {
      type: Boolean,
      default: true
    },
    // 分页组件是否可以改变 pageSize
    showSizeChanger: {
      type: Boolean,
      default: true
    },
    // 分页组件用于显示数据总量
    showTotal: {
      type: Function,
      default(total) {
        return `共 ${total} 条`;
      }
    },
    // 分页组件是否显示为简单分页
    simple: Boolean,
    // 指定分页显示的位置
    position: {
      type: String,
      default: 'bottom'
    },
    // 表头工具栏主题风格
    toolsTheme: String,
    // 标题
    title: String,
    // 二级标题
    subTitle: String,
    // 表头工具按钮布局
    toolkit: {
      type: Array,
      default() {
        return ['reload', 'size', 'columns', 'fullscreen'];
      }
    },
    // 是否开启列拖拽排序
    columnsSort: {
      type: Boolean,
      default: true
    },
    // 行点击选中
    rowClickChecked: Boolean,
    // 行点击选中当单个选中时互斥
    rowClickCheckedIntelligent: {
      type: Boolean,
      default: true
    },
    // 是否显示顶部工具栏
    toolbar: {
      type: Boolean,
      default: true
    },
    // 顶部工具栏样式
    toolStyle: [Object, String],
    // 自定义顶部工具栏class
    toolClass: String,
    // 顶部工具栏右侧样式
    toolkitStyle: [Object, String],
    // 表格全屏时的z-index
    fullZIndex: {
      type: Number,
      default: 999
    },
    // 是否自动修正页码
    autoAmendPage: {
      type: Boolean,
      default: true
    },
    // 单选多选列类型
    selectionType: String
  },
  data() {
    const globalRequest = this.$ELEADMIN ? this.$ELEADMIN.request : null;
    let isServer = !Array.isArray(this.datasource), order = {}, filters = {},
      requestNames = Object.assign({}, defaultRequest, globalRequest, this.request);
    // 获取默认的排序信息
    eachTreeData(this.columns, (d) => {
      if (d.defaultSortOrder && d.dataIndex) {
        order[requestNames.sortName] = d.dataIndex;
        order[requestNames.orderName] = {
          ascend: 'asc',
          descend: 'desc'
        }[d.defaultSortOrder];
      }
    });
    return {
      // 数据请求状态
      isLoading: isServer ? true : this.loading,
      // 是否是服务端返回数据
      isServer: isServer,
      // 全部数据
      data: isServer ? [] : this.datasource,
      // 数据总数量
      total: isServer ? 0 : this.datasource.length,
      // 当前在第几页
      page: this.currentPage,
      // 每页显示数量
      limit: this.pageSize,
      // 当前排序参数
      order: order,
      // 当前筛选参数
      filters: filters,
      // 请求参数名称
      requestNames: requestNames,
      // 请求错误后的提示信息
      errorText: null,
      // 表格列配置
      cols: this.columns,
      // 表格尺寸
      tableSize: this.size,
      // 是否是全屏状态
      isFullscreen: false,
      // 表格选中行的key
      selectedRowKeys: []
    };
  },
  computed: {
    // 表格当前显示数据
    list() {
      if (this.isServer) {
        return this.data;
      }
      let data = this.data,
        sort = this.order[this.requestNames.sortName],
        order = this.order[this.requestNames.orderName];
      // 前端排序
      if (sort) {
        data.sort((a, b) => {
          if (b[sort] == a[sort]) {
            return 0;
          }
          if (order === 'desc') {
            return (a[sort] < b[sort]) ? 1 : -1;
          }
          return (a[sort] < b[sort]) ? -1 : 1;
        });
      }
      // 前端分页
      if (this.needPage) {
        let start = (this.page - 1) * this.limit;
        let end = start + this.limit;
        if (end > data.length) {
          end = data.length;
        }
        return data.slice(start, end);
      }
      return data;
    },
    // 表格索引开始序号
    tableIndex() {
      return this.needPage ? ((this.page - 1) * this.limit + 1) : 1;
    },
    // 表格分页组件参数
    pagination() {
      if (!this.needPage) {
        return false;
      }
      return {
        position: this.position,
        current: this.page,
        pageSize: this.limit,
        hideOnSinglePage: this.hideOnSinglePage,
        pageSizeOptions: this.pageSizeOptions,
        showLessItems: this.showLessItems,
        showQuickJumper: this.showQuickJumper,
        showSizeChanger: this.showSizeChanger,
        showTotal: this.showTotal,
        simple: this.simple,
        size: this.tableSize === 'default' ? '' : 'small',
        total: this.total
      };
    },
    // 表格文案设置
    localeText() {
      if (this.errorText) {
        if (this.locale) {
          return Object.assign({}, this.locale, {
            emptyText: this.errorText
          });
        } else {
          return {emptyText: this.errorText};
        }
      }
      return this.locale;
    },
    // 表格复选框
    tableRowSelection() {
      let type;
      if (this.current || this.current === null) {
        type = 'radio';
      }
      if (!type && !this.selection && !this.rowSelection) {
        return null;
      }
      return Object.assign({}, this.rowSelection || {}, {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectionChange,
        type: this.selectionType || type
      });
    }
  },
  watch: {
    datasource() {
      this.isServer = !Array.isArray(this.datasource);
      if (!this.isServer) {
        this.total = this.datasource.length;
        if (this.needPage) {
          const maxPage = Math.ceil(this.total / this.limit);
          if (maxPage && this.page > maxPage) {
            this.page = maxPage;
          }
        }
        this.data = this.datasource;
      }
      this.reload();
    },
    request() {
      const globalRequest = this.$ELEADMIN ? this.$ELEADMIN.request : null;
      this.requestNames = Object.assign({}, defaultRequest, globalRequest, this.request);
    },
    pageSize() {
      this.limit = this.pageSize;
      this.reload();
    },
    currentPage() {
      this.page = this.currentPage;
      this.reload();
    },
    columns() {
      this.cols = this.columns;
      this.$nextTick(()=>{
        if (this.toolbar) {
        this.$refs.toolbar.initColumnList();
      }
      })
      
    },
    size() {
      this.tableSize = this.size;
    },
    loading() {
      this.isLoading = this.loading;
    },
    selection() {
      this.selectedRowKeys = this.selection.map(d => d[this.rowKey]);
    },
    current() {
      if (this.current) {
        this.selectedRowKeys = [this.current[this.rowKey]];
      } else {
        this.selectedRowKeys = [];
      }
    }
  },
  mounted() {
    if (this.initLoad) {
      this.reload();
    }
  },
  methods: {
    /* 获取数据 */
    reload(obj) {
      if (obj) {
        if (obj.page) {
          this.page = obj.page;
        }
        if (obj.limit) {
          this.limit = obj.limit;
        }
      }
      this.errorText = null;
      // 前端分页
      if (!this.isServer) {
        this.total = this.datasource.length;
        //this.isLoading = false;
        this.$emit('done', {
            data: this.list,
            total: this.total
          },
          this.needPage ? this.page : 1,
          this.total,
          this.$refs.table
        );
        return;
      }
      // 后端分页
      this.isLoading = true;
      if (typeof this.datasource === 'function') {
        // 自定义请求方法
        this.datasource({
          page: this.page,
          limit: this.limit,
          where: Object.assign({}, ((obj && obj.where) || this.where) || {}),
          order: this.order,
          filters: this.filters
        }, (data, total) => {
          this.isLoading = false;
          if (Array.isArray(data)) {
            // 自动修正页码
            if (this.autoAmendPage && this.needPage && !data.length && total) {
              let maxPage = Math.ceil(total / this.limit);
              if (maxPage && this.page > maxPage) {
                this.page = maxPage;
                this.reload();
                return;
              }
            }
            // 获取返回的数据
            this.data = data;
            this.total = total || data.length;
            this.$emit('done', {
                data: data,
                total: total
              },
              this.needPage ? this.page : 1,
              this.total,
              this.$refs.table
            );
          } else if (typeof data === 'string') {
            this.errorText = data;
          } else {
            this.errorText = '获取数据失败';
            console.error('callback返回的data格式错误: ', data);
          }
        });
      } else {
        // 数据源为url方式
        let pageParam = {};
        if (this.needPage) {
          pageParam[this.requestNames.pageName] = this.page;
          pageParam[this.requestNames.limitName] = this.limit;
        }
        let params = Object.assign(
          {},
          ((obj && obj.where) || this.where) || {},
          this.filters,
          this.order,
          pageParam
        ), data = null;
        if (this.parseParam) {
          params = this.parseParam(params);
        }
        let method = this.method ? this.method.toUpperCase() : 'GET';
        if (['POST', 'PUT', 'PATCH'].indexOf(method) !== -1) {
          data = params;
          params = null;
          if (this.contentType && this.contentType.toLowerCase().indexOf('form') !== -1) {
            let formData = new FormData();
            for (let key in data) {
              if (!Object.prototype.hasOwnProperty.call(data, key)) {
                continue;
              }
              formData.append(key, data[key]);
            }
            data = formData;
          }
        }
        this.$http.request({
          url: this.datasource,
          method: method,
          params: params,
          data: data,
          headers: this.headers
        }).then(res => {
          this.isLoading = false;
          const result = this.getResponseResult(res.data);
          if (result.code === 0) {
            // 自动修正页码
            if (this.autoAmendPage && this.needPage && result.data && !result.data.length && result.count) {
              let maxPage = Math.ceil(result.count / this.limit);
              if (maxPage && this.page > maxPage) {
                this.page = maxPage;
                this.reload();
                return;
              }
            }
            // 获取请求的数据
            this.data = result.data;
            this.total = result.count || result.data.length;
            this.$emit('done',
              res.data,
              this.needPage ? this.page : 1,
              this.total,
              this.$refs.table
            );
          } else {
            this.errorText = result.msg || '获取数据失败, 正确的状态码为0';
          }
        }).catch(e => {
          this.isLoading = false;
          this.errorText = e.message;
        });
      }
    },
    // 展开的行变化时触发
    onExpandedRowsChange(expandedRows) {
      this.$emit('expandedRowsChange', expandedRows);
    },
    // 分页、排序、筛选变化时触发
    onChange(pagination, filters, sorter, {currentDataSource}) {
      this.$emit('change', pagination, filters, sorter, {currentDataSource});
      // 更新分页信息
      this.limit = pagination.pageSize;
      this.page = pagination.current;
      // 更新排序信息
      let temp = {};
      if (sorter.order) {
        temp[this.requestNames.sortName] = sorter.field;
        temp[this.requestNames.orderName] = {ascend: 'asc', descend: 'desc'}[sorter.order];
      }
      this.order = temp;
      // 更新列筛选信息
      this.filters = Object.assign({}, filters);
      // 重新获取数据
      this.reload();
    },
    // 点击展开图标时触发
    onExpand(expanded, record) {
      this.$emit('expand', expanded, record);
    },
    /* 选择项发生变化时会触发 */
    onSelectionChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.$emit('update:selection', selectedRows);
      this.$emit('update:current', selectedRows.length ? selectedRows[0] : null);
    },
    /* 修改表格尺寸 */
    updateSize(value) {
      this.tableSize = value;
      this.$emit('size-change', value);
    },
    /* 修改表格列配置 */
    updateColumns(value) {
      this.cols = value;
      this.$emit('columns-change', value);
    },
    /* 全屏切换 */
    toggleFullscreen(value) {
      this.isFullscreen = value;
      this.$emit('fullscreen-change', value);
    },
    /* 工具栏刷新按钮点击 */
    onRefresh() {
      if (this.isServer) {
        this.reload();
      } else {
        this.$emit('refresh');
      }
    },
    /* 获取返回的结果(解析格式) */
    getResponseResult(data) {
      let result = this.parseData ? this.parseData(data) : data;
      const globalResponse = this.$ELEADMIN ? this.$ELEADMIN.response : null;
      const responseNames = Object.assign({}, defaultResponse, globalResponse, this.response);
      let code = this.getFieldValue(result, responseNames.statusName);
      if (responseNames.statusCode === code) {
        code = 0;
      }
      return {
        code: code,
        msg: this.getFieldValue(result, responseNames.msgName),
        data: this.getFieldValue(result, responseNames.dataName),
        count: this.getFieldValue(result, responseNames.countName)
      };
    },
    /* 获取字段的值(支持多层*.*) */
    getFieldValue(obj, field) {
      if (!field) {
        return;
      }
      let value = obj;
      field.split('.').forEach(f => {
        if (value) {
          value = value[f];
        } else {
          value = null;
        }
      });
      return value;
    }
  }
}
</script>

<style>
/* 表格全屏样式 */
.ele-pro-table.ele-pro-table-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  padding: 0 0 16px 0;
  box-sizing: border-box;
}

.ele-pro-table.ele-pro-table-fullscreen .ant-table-pagination {
  margin-bottom: 0;
  padding: 0 16px;
}

.ele-pro-table.ele-pro-table-fullscreen .ele-table-tool:not(.ele-table-tool-default) {
  margin-top: 10px;
  padding: 0 16px;
}

.ant-table-striped :deep(.table-striped) {
  background-color: #fafafa;
}
</style>
