<template>
  <x-page-container class="common-page-container multiple-tab-list-page toolbar-page-container">
    <template v-slot:header>
      <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 tabConfig.list" :key="item.name" v-show="tabConfig.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="conditionConfig" :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>
      <slot name="subSuffix"></slot>
    </template>
    <template v-slot:main>
      <el-tabs v-model="tabConfig.activeName" :type="tabConfig.type || 'card'"
               @tab-click="handleTabClick" class="flex-tabs">
        <el-tab-pane v-for="item in tabConfig.list" :key="item.name" :label="item.label"
                     :name="item.name" ref="tabPane">
          <template v-if="item.labelSlot" v-slot:label>
            <slot :name="item.labelSlot" v-bind="{item}"></slot>
          </template>
          <slot v-if="item.slot" :name="item.name" v-bind="{item}"></slot>
          <x-table
            v-else
            v-on="$listeners"
            v-bind="$attrs"
            :id="item.realId"
            :column-cache="item.columnCache"
            ref="xTable"
            column-key
            border
            resizable
            height="100%"
            highlight-hover-row
            highlight-current-row
            :seq-config="realSeqConfig"
            :sort-config="{remote: true, multiple: true}"
            :filter-config="{remote: true}"
            :mouse-config="mouseConfig"
            :columns="item.columns"
            :scroll-y="{gt: 60}"
            :menu-config="realMenuConfig"
            :clip-config="realClipConfig"
            :edit-config="realEditConfig"
            @menu-click="handleMenuClick"
            :table-setting-config=tableSettingConfig
            @mousedown-capture="handleMouseDownCapture"
          >
          </x-table>
        </el-tab-pane>
      </el-tabs>
    </template>
    <template v-slot:footer>
      <x-page-footer class="page-footer-remark" v-if="pageFooterConfig" :page-footer-config="pageFooterConfig" size="mini" @dblclick="handlePageFooterDblclick"></x-page-footer>
      <x-page-footer class="x-page-footer-dynamic-statistics" v-if="realDynamicStatisticsConfig.enabled" :page-footer-config="dynamicStatisticsPageFooterConfig"></x-page-footer>
      <el-pagination
        v-if="realPageConfig.show"
        :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>
    </template>
  </x-page-container>
</template>

<script>
import multipleTabListPageMixin from './multiple-tab-list-page-mixin';
export default {
  name: 'XMultipleTabListPage',
  mixins: [multipleTabListPageMixin],
  methods: {
    handleTabClick (tabPane) {
      this.$nextTick(() => {
        const xTable = this.getCurrentTableInstance();
        xTable.loadData([]);
        this.currentPage = 1;
        this.total = 0;
        xTable.recalculate(true);
        this.$emit('tab-click', tabPane);
      });
    },
    handleTableSettingSelect({row}) {
      const xTable = this.getCurrentTableInstance();
      if (!xTable) {
        return;
      }
      xTable.setMisConfigure(row).then(() => {
        this.$emit('table-setting-change');
      });
    }
  }
};
</script>
