<template>
  <x-page-container class="common-page-container meta-query toolbar-page-container">
    <template v-slot:header>
      <x-table-filter
        ref="tableFilter"
        :field-list="firstFields"
        :api-list="apiConfig"
        :data-code="firstDataCode"
        :query-code="firstQueryCode"
        :temp-condition-config="realConditionConfig"
        :get-temp-column-list="handleGetTempColumnList"
        @confirm="handleConfirm"
        :from-str="$attrs['from-str']"
        :sort-config-visible="sortConfigVisible"
        :column-config-visible="columnConfigVisible"
      ></x-table-filter>
      <x-button-group :button-config="buttonConfig">
        <template v-for="(item) in buttonSlotArray" v-slot:[item.name]="scope">
          <slot :name="item.name" v-bind="scope"></slot>
        </template>
      </x-button-group>
      <vxe-toolbar v-for="item in realTabConfig.list" :key="item.name" v-show="realTabConfig.activeName === item.name" ref="vxeToolbar" class="page-header-toolbar" :custom="custom"></vxe-toolbar>
    </template>
    <template v-slot:sub>
      <x-condition ref="xCondition" @resize="handleResize" :condition-config="realConditionConfig" :drawer-config="{show: true}">
        <template v-for="(item) in conditionSlotArray" v-slot:[item.name]="scope">
          <slot :name="item.name" v-bind="scope"></slot>
        </template>
      </x-condition>
      <x-table-setting-dialog
        title="表格显示格式"
        :visible.sync="tableSettingDialogVisible"
        :mis-configure="tableSettingMisConfigure"
        :handle-select="handleTableSettingSelect"
      ></x-table-setting-dialog>
    </template>
    <template v-slot:main>
      <el-tabs v-model="realTabConfig.activeName" :type="realTabConfig.type || 'card'"
               @tab-click="handleTabClick" class="flex-tabs">
        <el-tab-pane v-for="item in realTabConfig.list" :key="item.name" :label="item.label"
                     :name="item.name">
          <template v-if="item.labelSlot" v-slot:label>
            <slot :name="item.labelSlot" v-bind="{item}"></slot>
          </template>
          <x-table
            v-on="$listeners"
            v-bind="$attrs"
            :id="item.realId"
            :column-cache="item.realColumnCache"
            ref="xTable"
            column-key
            border
            resizable
            height="100%"
            highlight-hover-row
            highlight-current-row
            :keyboard-config="{isEdit: true, isEnter: false, editMethod}"
            :sort-config="{remote: true, multiple: true}"
            :filter-config="{remote: true}"
            :mouse-config="{area: true, extension: true}"
            :seq-config="realSeqConfig"
            :columns="item.realColumns"
            :scroll-y="{gt: 60}"
            :menu-config="realMenuConfig"
            :clip-config="realClipConfig"
            :edit-config="realEditConfig"
            @menu-click="handleMenuClick"
            @sort-change="handleSortChange"
            @filter-change="handleFilterChange"
            :table-setting-config="tableSettingConfig"
            @cell-area-selection-end="handleCellAreaSelectionEnd"
            @keydown="handleKeyDown"
            @keydown-capture="handleKeyDownCapture"
            :show-footer="item.realShowFooter"
            :footer-method="item.realFooterMethod"
            @mousedown-capture="handleMouseDownCapture"
            @scroll="handleScroll"
          >
            <template v-for="item in slotArray" v-slot:[item]="scope">
              <slot :name="item" v-bind="scope"></slot>
            </template>
          </x-table>
        </el-tab-pane>
      </el-tabs>
    </template>
    <template v-slot:footer>
      <x-page-footer class="page-footer-dynamic-statistics" v-if="realDynamicStatisticsConfig.enabled" :page-footer-config="dynamicStatisticsPageFooterConfig"></x-page-footer>
      <el-pagination
        v-if="realPageConfig.type === 'page' && realPageConfig.show === true"
        :small="realPageConfig.small"
        background
        @size-change="handleSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page="currentPage"
        highlight-hover-row
        :page-size="pageSize"
        :page-sizes="pageConfig.pageSizes"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="text-align: right"
      ></el-pagination>
      <x-page-footer class="page-footer-total" v-if="realPageConfig.type === 'scroll' && realPageConfig.show" :page-footer-config="realPageFooterTotalConfig"></x-page-footer>
    </template>
  </x-page-container>
</template>

<script>
import {XButtonGroup, XCondition, XTable, XPageContainer, XPageFooter, XTableFilter} from '@newpearl/ui';
import {Tabs, TabPane, Pagination} from 'element-ui';
import {arrayToMap, convertSortList, getColumnCacheName, getConditionModel, getConditionRules, getGroupColumnsAndLeafColumns, getTabPane, showInvalidFieldsMessage, getStatisticsFlag} from '../../util/componentUtil';
import tableSettingConfigMixin from '../../mixins/table-setting-config-mixin';
import metaMixin from '../x-meta-query/meta-mixin';
import metaQueryMixin from '../x-meta-query/meta-query-mixin';
import {convertCondition, getColumns, getCoreQueryParams, getMetaDataDict, getMetaDataDictQueryParams, sortPlanList} from '../../util/metaQueryUtil';
import tableOperateConfigMixin from '../../mixins/table-operate-config-mixin';
import tableOperateMixin from '../../mixins/table-operate-mixin';
import {Toolbar} from 'vxe-table';
import {PAGE_CONFIG_TYPE_PAGE} from '../../mixins/page-mixin';
import * as appUtils from '../../util/appUtils';
import {REMOTE_STORAGE} from '@newpearl/ui/lib/mixins/table-setting-mixin';
export default {
  name: 'XMultipleMetaQuery',
  mixins: [tableSettingConfigMixin, tableOperateConfigMixin, tableOperateMixin, metaMixin, metaQueryMixin],
  components: {
    [XButtonGroup.name]: XButtonGroup,
    [XCondition.name]: XCondition,
    [XTable.name]: XTable,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane,
    [Pagination.name]: Pagination,
    [XPageContainer.name]: XPageContainer,
    [Toolbar.name]: Toolbar,
    XPageFooter,
    XTableFilter
  },
  props: {
    tabConfig: {
      type: Object,
      default() {
        return {
          list: []
        };
      }
    }
  },
  inject: {
    $admin: {
      default: null
    }
  },
  data() {
    return {
      realTabConfig: {
        activeName: '',
        list: [
          // {label: '1', name: '1'}
        ]
      }
    };
  },
  methods: {
    getActiveName() {
      return this.realTabConfig.activeName;
    },
    handleTableSettingSelect({row}) {
      this.getCurrentTableInstance().setMisConfigure(row).then(() => {
        this.queryFirstPageData();
      });
    },
    showTableSettingDialog() {
      if (this.tableSettingConfig.storage !== REMOTE_STORAGE) {
        return;
      }
      const xTable = this.getCurrentTableInstance();
      this.tableSettingMisConfigure.objectJson = JSON.stringify({collectColumn: xTable.getSimpleCollectColumn()});
      this.tableSettingMisConfigure.name = xTable.columnCache;
      this.tableSettingMisConfigure.id = xTable.getMisConfigureId();
      this.tableSettingDialogVisible = true;
    },
    async scrollQueryData({validate = true} = {}) {
      if (this.loading) {
        return;
      }
      this.loading = true;
      try {
        const coreQueryParams = await this.getCoreQueryParamsAsync({validate, sumAll: this.getStatisticsFlag({name: 'sumAll'})});
        const {data} = await this.apiConfig.searchMetaDataReportList({jsonStr: JSON.stringify(coreQueryParams)});
        if (!data.isSuccess()) {
          this.$notify.error(data.msg);
          return;
        }
        this.currentPage += 1;
        let resData = data.data;
        if (this.handleQueryData) {
          const result = await this.handleQueryData({data: resData});
          resData = result.data;
        }
        if (resData.sumAll) {
          this.sumAllResult = resData.sumAll;
        }
        const pager = resData.pager;
        const list = pager.list;
        this.total = pager.totalRows;
        if (list.length < this.pageSize) {
          this.lastPage = true;
        }
        const grid = this.getCurrentTableInstance().getGridInstance();
        await getMetaDataDict({list, $grid: grid});
        const originData = grid.getTableData().fullData;
        if (originData.length > 0) {
          this.$lastRow = originData[originData.length - 1];
        }
        originData.push(...list);
        await grid.loadData(originData);
        if (this.$lastRow) {
          grid.scrollToRow(this.$lastRow);
        }
        this.handleLoadDataFinish && this.handleLoadDataFinish({$grid: grid, data: list, tabPane: this.getCurrentTabPane()});
      } finally {
        this.loading = false;
      }
    },
    handleResize () {
      const xTable = this.getCurrentTableInstance();
      if (xTable) {
        xTable.recalculate(true);
      }
    },
    handleTabClick(args) {
      this.dynamicStatistics = 0;
      setTimeout(() => {
        this.getCurrentTableInstance().recalculate(true).then(() => {
          if (this.$listeners['tab-click']) {
            this.$emit('tab-click', args);
            return;
          }
          this.queryFirstPageData();
        });
      });
    },
    /**
     * 获取查询参数
     * @param validate 是否对字段进行校验
     * @param page 页码
     * @param pageSize 每页数据大小
     * @param sumAll 是否统计
     * @return {object} {pageSize: number, page: default.methods.page}
     */
    async getCoreQueryParamsAsync({validate = true, page, pageSize, sumAll} = {}) {
      // 根据activeName，找出对应的tabPane,组装查询参数
      const tabPane = this.getCurrentTabPane();
      if (!tabPane) {
        throw new Error('no current tab');
      }
      if (!validate) {
        return this.getCoreQueryParams({tabPane, page, pageSize, sumAll});
      }
      try {
        await this.getXCondition().validate();
        return this.getCoreQueryParams({tabPane, page, pageSize, sumAll});
      } catch (error) {
        if (error instanceof RuleError) {
          if (error.invalidFields) {
            showInvalidFieldsMessage({invalidFields: error.invalidFields});
            throw error;
          }
          this.$notify.error(error.message);
          throw error;
        }
        throw error;
      }
    },
    /**
     * 获取查询参数
     * @param tabPane tab信息对象
     * @param page 页码
     * @param pageSize 每页数据大小
     * @param sumAll 是否统计
     * @return {object} {pageSize: number, page: default.methods.page, dataCode: *}
     */
    getCoreQueryParams({tabPane, page, pageSize, sumAll}) {
      return getCoreQueryParams({
        dataCode: tabPane.name,
        page: page === undefined ? this.currentPage : page,
        pageSize: pageSize === undefined ? this.pageSize : pageSize,
        metaData: tabPane.metaData,
        conditionConfig: this.realConditionConfig,
        sorts: tabPane.sorts,
        sortList: tabPane.sortList,
        filterList: tabPane.filterList,
        tabConfig: null,
        sumAll,
        handleQueryParams: this.handleQueryParams
      });
    },
    /**
     * @desc 获取单个tab的全部数据
     * @author liangyongjia
     * @param pageSize每页大小
     */
    async getFullTableData({pageSize = 250} = {}) {
      let page = 1;
      const $pageSize = pageSize === undefined ? this.pageSize : pageSize;
      const tableData = [];
      while (true) {
        const coreQueryParams = await this.getCoreQueryParamsAsync({validate: true, page, pageSize: $pageSize});
        const {data} = await this.apiConfig.searchMetaDataReportList({jsonStr: JSON.stringify(coreQueryParams)});
        if (!data.isSuccess()) {
          return Promise.reject(new Error(data.msg));
        }
        page += 1;
        const pager = data.data.pager;
        const list = pager.list;
        this.total = pager.totalRows;
        const grid = this.getCurrentTableInstance().getGridInstance();
        const fullColumn = grid.getTableColumn().fullColumn;
        const dictObject = {};
        for (const column of fullColumn) {
          const property = column.property;
          // 配置了enumCode列直接用formatter来转换
          if (column.params && column.params.metaDataField && column.params.metaDataField.enumCode) {
            for (const item of list) {
              item[property] = column.formatter({cellValue: item[property], column});
            }
            continue;
          }
          // 缓存字典
          if (!dictObject[property]) {
            dictObject[property] = {};
          }
          const queryParams = getMetaDataDictQueryParams({column, list, dict: dictObject[property]});
          if (!queryParams) {
            continue;
          }
          const {data} = await this.apiConfig.searchMetaDataReportList(queryParams);
          if (!data.isSuccess()) {
            return Promise.reject(new Error(data.msg));
          }
          const dictList = data.data.pager.list;
          if (!Array.isArray(dictList)) {
            return;
          }
          const params = column.params;
          const rowKey = params.rowKey;
          const rowName = params.rowName;
          const dict = dictObject[property];
          // 更新字典
          for (const item of dictList) {
            dict[item[rowKey]] = dict[item[rowName]];
          }
          // 转换数据
          for (const item of list) {
            const cellValue = item[property];
            if (appUtils.isEmpty(cellValue)) {
              continue;
            }
            item[property] = dict[cellValue];
          }
        }
        tableData.push(...list);
        if (list.length < $pageSize) {
          return tableData;
        }
      }
    },
    async queryData({validate = true} = {}) {
      const coreQueryParams = await this.getCoreQueryParamsAsync({validate, sumAll: this.getStatisticsFlag({name: 'sumAll'})});
      const {data} = await this.apiConfig.searchMetaDataReportList({jsonStr: JSON.stringify(coreQueryParams)});
      const xTable = this.getCurrentTableInstance();
      if (!data.isSuccess()) {
        this.$notify.error(data.msg);
        xTable.loadData([]);
        return;
      }
      let resData = data.data;
      if (this.handleQueryData) {
        const result = await this.handleQueryData({data: resData});
        resData = result.data;
      }
      if (resData.sumAll) {
        this.sumAllResult = resData.sumAll;
      }
      const pager = resData.pager;
      const list = pager.list;
      await getMetaDataDict({list, $grid: xTable});
      this.total = pager.totalRows;
      xTable.loadData(pager.list);
    },
    /**
     * @desc 获取基本信息和部分表格信息
     */
    getMetaDataDetail() {
      // 根据dataCode列表查询所有的详情
      const promiseArray = [];
      for (const item of this.tabConfig.list) {
        promiseArray.push(this.apiConfig.getMetaDataAndFieldsApi({dataCode: item.name}));
      }
      Promise.all(promiseArray).then((responseArray) => {
        const tabPaneList = [];
        const promiseArray = [];
        for (const response of responseArray) {
          const res = response.data;
          if (!res.isSuccess()) {
            return Promise.reject(new RequestError(res.msg));
          }
          // 组装tab
          const data = res.data;
          const metaData = data.metaData;
          const dataCode = metaData.dataCode;
          const tabPane = {
            label: metaData.name,
            name: dataCode,
            fields: data.fields,
            metaData: metaData
          };
          tabPane.fieldMap = arrayToMap({array: data.fields, keyProperty: 'fieldCode'});
          tabPaneList.push(tabPane);
          // 如果外部传入了queryCode, 就不需要查询方案列表
          const presetTabPane = getTabPane({name: dataCode, tabConfig: this.tabConfig});
          if (presetTabPane) {
            // 如果外部传入的tabConfig设置了label，就用该label
            if (Object.hasOwnProperty.call(presetTabPane, 'label')) {
              tabPane.label = presetTabPane.label;
            }
            if (Object.prototype.hasOwnProperty.call(presetTabPane, 'showFooter')) {
              tabPane.realShowFooter = presetTabPane.showFooter;
            }
            if (Object.prototype.hasOwnProperty.call(presetTabPane, 'labelSlot')) {
              tabPane.labelSlot = presetTabPane.labelSlot;
            }
            if (Object.prototype.hasOwnProperty.call(presetTabPane, 'footerMethod')) {
              tabPane.realFooterMethod = presetTabPane.footerMethod;
            } else {
              tabPane.realFooterMethod = this.realFooterMethod;
            }
            tabPane.pageConfig = presetTabPane.pageConfig;
            if (presetTabPane.queryCode) {
              const result = {data: {}};
              result.data.isSuccess = () => { return true; };
              result.data.data = [{queryCode: presetTabPane.queryCode, dataCode: presetTabPane.name}];
              promiseArray.push(Promise.resolve(result));
              continue;
            }
          }
          // 查询所有的配置方案列表
          promiseArray.push(this.apiConfig.getMetaQueryPlanList(dataCode, {queryTypeArray: this.queryTypeArray}));
        }
        this.realTabConfig.list = tabPaneList;
        return Promise.all(promiseArray);
      }).then((responseArray) => {
        // 查询所有配置方案详情
        const promiseArray = [];
        for (let i = 0; i < responseArray.length; i++) {
          const res = responseArray[i].data;
          if (!res.isSuccess()) {
            return Promise.reject(new RequestError(res.msg));
          }
          const data = res.data;
          if (!Array.isArray(data) || data.length < 1) {
            return Promise.reject(new RequestError('暂无查询方案，请新建查询方案'));
          }
          sortPlanList(data);
          promiseArray.push(this.apiConfig.getMetaQueryPlanDetail({queryCode: data[0].queryCode, dataCode: data[0].dataCode}).then(({data}) => {
            if (!data.isSuccess()) {
              return Promise.reject(new RequestError(data.msg));
            }
            data = data.data;
            const tabPane = this.realTabConfig.list[i];
            this.$set(tabPane, 'metaQuery', data.metaQuery);
            tabPane.conditions = data.conditions;
            tabPane.sorts = data.sorts;
            tabPane.sortList = [];
            // 需要将真实表头和分组表头分开
            const {groupColumns, leafColumns} = getGroupColumnsAndLeafColumns({columns: data.lists});
            tabPane.lists = leafColumns;
            tabPane.groupLists = groupColumns;
            const columnCache = getColumnCacheName({name: tabPane.name + '-' + tabPane.metaQuery.queryCode});
            tabPane.realColumnCache = columnCache;
            tabPane.realId = columnCache;
            if (!data.metaQuery.baseId) {
              return Promise.resolve();
            }
            // 用户自定义方案需要将基础方案查询出来并合并查询条件
            return this.apiConfig.getMetaQueryAll(data.metaQuery.baseId).then((response) => {
              const res = response.data;
              if (!res.isSuccess()) {
                return Promise.reject(new RequestError(res.msg));
              }
              const result = res.data;
              data.conditions.unshift(...result.conditions);
              return Promise.resolve();
            });
          }));
        }
        return Promise.all(promiseArray);
      }).then(() => {
        // 取第一个metaQuery渲染查询条件
        const tabPane = this.realTabConfig.list[0];
        if (this.handleMetaQuery) {
          return this.handleMetaQuery(tabPane);
        }
        return tabPane;
      }).then(tabPane => {
        return convertCondition({
          conditions: tabPane.conditions,
          fields: tabPane.fields,
          presetConditionConfig: this.conditionConfig,
          event: {
            handleItemChange: this.handleItemChange,
            handleInputItemEnter: this.queryFirstPageData,
            handleSearchListSelect: this.queryFirstPageData
          }
        });
      }).then((conditionList) => {
        const metaQuery = this.realTabConfig.list[0].metaQuery;
        this.realConditionConfig.model = getConditionModel({list: conditionList});
        this.realConditionConfig.rules = getConditionRules({list: conditionList});
        this.realConditionConfig.list = conditionList;
        if (this.conditionConfig && Object.hasOwnProperty.call(this.conditionConfig, 'labelWidth')) {
          this.realConditionConfig.labelWidth = this.conditionConfig.labelWidth;
        }
        this.sorts = metaQuery.sorts;
        return Promise.resolve();
      }).then(() => {
        // 组装表格的列信息
        const promiseArray = [];
        for (const item of this.realTabConfig.list) {
          let presetColumns = [];
          const tabPane = getTabPane({name: item.name, tabConfig: this.tabConfig});
          if (tabPane && Array.isArray(tabPane.columns)) {
            presetColumns = tabPane.columns;
          }
          promiseArray.push(getColumns({
            lists: item.lists,
            groupLists: item.groupLists,
            fieldMap: item.fieldMap,
            presetColumns: presetColumns,
            conditionConfig: this.realConditionConfig,
            handleMouseDown: this.handleMouseDown,
            showSort: this.realQueryConfig.sort,
            showFilter: this.realQueryConfig.filter
          }).then((columns) => {
            item.sumPage = getStatisticsFlag({columns, propertyArray: ['sumPage']});
            item.sumAll = getStatisticsFlag({columns, propertyArray: ['sumAll']});
            if (item.realShowFooter !== false) {
              item.realShowFooter = item.sumPage || item.sumAll;
            }
            item.realColumns = columns;
          }));
        }
        return Promise.all(promiseArray);
      }).then(() => {
        if (this.tabConfig.activeName) {
          this.realTabConfig.activeName = this.tabConfig.activeName;
        } else {
          this.realTabConfig.activeName = this.realTabConfig.list[0].name;
        }
        if (this.handleInitializationComplete) {
          this.handleInitializationComplete({conditionConfig: this.realConditionConfig, tabConfig: this.realTabConfig});
        }
        setTimeout(() => {
          const promiseArray = [];
          for (let i = 0; i < this.$refs.xTable.length; i++) {
            const item = this.$refs.xTable[i];
            item.getGridInstance().connect(this.$refs.vxeToolbar[i]);
            promiseArray.push(item.initTableSetting());
          }
          Promise.all(promiseArray).then(() => {
            if (this.realQueryConfig.autoQuery) {
              this.queryFirstPageData();
            }
          });
        }, 0);
      });
    },
    queryFirstPageData() {
      if (this.currentPage !== 1) {
        this.currentPage = 1;
      }
      if (this.realPageConfig.type === PAGE_CONFIG_TYPE_PAGE) {
        this.queryData();
      } else {
        this.getCurrentTableInstance().loadData([]);
        // 加大每页数量
        this.lastPage = false;
        this.scrollQueryData();
      }
    },
    handleSortChange({sortList}) {
      const tabPane = this.getCurrentTabPane();
      tabPane.sortList = sortList;
      this.queryFirstPageData();
    },
    handleFilterChange(args) {
      this.getCurrentTabPane().filterList = args.filterList;
      this.queryFirstPageData();
    },
    getCurrentTableInstance() {
      for (let i = 0; i < this.realTabConfig.list.length; i++) {
        if (this.realTabConfig.list[i].name === this.realTabConfig.activeName) {
          return this.$refs.xTable[i];
        }
      }
      return null;
    },
    getCurrentTabPane() {
      return getTabPane({name: this.realTabConfig.activeName, tabConfig: this.realTabConfig});
    },
    handleGetTempColumnList() {
      const xTable = this.getCurrentTableInstance();
      if (xTable) {
        return xTable.getTableColumn();
      }
      return null;
    },
    handleConfirm({data}) {
      // 由于排序可能已经合并到查询方案中，所以表中的排序要清除
      const xTable = this.getCurrentTableInstance();
      if (xTable) {
        xTable.clearSort();
      }
      this.handleConfigQuery(data);
    },
    async handleConfigQuery (args) {
      if (this.handleMetaQuery) {
        args = await this.handleMetaQuery(args);
      }
      const {conditions} = args;
      const tabPane = this.getCurrentTabPane();
      const conditionList = await convertCondition({
        conditions: conditions,
        fields: tabPane.fields,
        presetConditionConfig: this.conditionConfig,
        event: {
          handleItemChange: this.handleItemChange,
          handleInputItemEnter: this.queryFirstPageData,
          handleSearchListSelect: this.queryFirstPageData
        }
      });
      this.realConditionConfig.model = getConditionModel({list: conditionList});
      this.realConditionConfig.rules = getConditionRules({list: conditionList});
      this.realConditionConfig.list = conditionList;
      if (this.handleInitializationComplete) {
        this.handleInitializationComplete({conditionConfig: this.realConditionConfig, columns: tabPane.realColumns});
      }
      this.queryFirstPageData();
    },
    getStatisticsFlag({name}) {
      return this.getCurrentTabPane()[name];
    }
  },
  computed: {
    firstDataCode() {
      const list = this.realTabConfig.list;
      if (list.length < 1) {
        return '';
      }
      const metaData = list[0].metaData;
      if (!metaData) {
        return '';
      }
      return metaData.dataCode;
    },
    firstQueryCode () {
      const list = this.realTabConfig.list;
      if (list.length < 1) {
        return '';
      }
      const metaQuery = list[0].metaQuery;
      if (!metaQuery) {
        return '';
      }
      return metaQuery.queryCode;
    },
    firstFields() {
      const list = this.realTabConfig.list;
      if (list.length < 1) {
        return [];
      }
      return list[0].fields;
    },
    realPageConfig() {
      const tabPane = this.getCurrentTabPane();
      const defaultConfig = {type: PAGE_CONFIG_TYPE_PAGE, show: true, pageSizes: [50, 100, 200, 400]};
      if (this.$admin) {
        if (this.$admin.sizes !== false) {
          defaultConfig.small = this.$admin.defaultSize === 'tiny';
        }
      }
      if (this.pageConfig) {
        Object.assign(defaultConfig, this.pageConfig);
      }
      if (tabPane && tabPane.pageConfig) {
        Object.assign(defaultConfig, tabPane.pageConfig);
      }
      return defaultConfig;
    }
  }
};
</script>
