<template>
  <x-page-container class="common-page-container multiple-tab-list-edit-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"
      ></x-table-setting-dialog>
    </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" ref="tabPane"
                     :name="item.name">
          <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"
            :data="item.data"
            ref="xTable"
            column-key
            border
            resizable
            height="100%"
            highlight-hover-row
            highlight-current-row
            :seq-config="realSeqConfig"
            :sort-config="{multiple: 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>
    </template>
  </x-page-container>
</template>

<script>
import multipleTabListPageMixin from '../x-multiple-tab-list-page/multiple-tab-list-page-mixin';
export default {
  name: 'XMultipleTabListEditPage',
  mixins: [multipleTabListPageMixin],
  methods: {
    handleTabClick (tabPane) {
      this.$nextTick(() => {
        const xTable = this.getCurrentTableInstance();
        if (xTable) {
          xTable.recalculate(true);
        }
        this.$emit('tab-click', tabPane);
      });
    }
  }
};
</script>
