"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _comp = require("../../ui/src/comp");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _ui = require("../../ui");
var _vn = require("../../ui/src/vn");
var _dom = require("../../ui/src/dom");
var _utils = require("../../ui/src/utils");
var _log = require("../../ui/src/log");
var _loading = _interopRequireDefault(require("../../loading/src/loading"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var _createComponentLog = (0, _log.createComponentLog)('tabs'),
  warnLog = _createComponentLog.warnLog,
  errLog = _createComponentLog.errLog;
var scrollbarOffsetSize = 20;
var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
  name: 'VxeTabs',
  mixins: [_ui.globalMixins.sizeMixin],
  props: {
    value: [String, Number, Boolean],
    options: Array,
    width: [String, Number],
    height: [String, Number],
    destroyOnClose: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().tabs.destroyOnClose;
      }
    },
    titleWidth: [String, Number],
    titleAlign: [String, Number],
    type: {
      type: String,
      default: function _default() {
        return (0, _ui.getConfig)().tabs.type;
      }
    },
    position: {
      type: String,
      default: function _default() {
        return (0, _ui.getConfig)().tabs.position;
      }
    },
    showClose: Boolean,
    showBody: {
      type: Boolean,
      default: true
    },
    padding: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().tabs.padding;
      }
    },
    trigger: String,
    beforeChangeMethod: Function,
    closeConfig: Object,
    refreshConfig: Object,
    size: {
      type: String,
      default: function _default() {
        return (0, _ui.getConfig)().tabs.size || (0, _ui.getConfig)().size;
      }
    },
    // 已废弃
    beforeCloseMethod: Function
  },
  inject: {
    $xeParentTabs: {
      from: '$xeTabs',
      default: null
    }
  },
  provide: function provide() {
    var $xeTabs = this;
    return {
      $xeTabs: $xeTabs
    };
  },
  data: function data() {
    var xID = _xeUtils.default.uniqueId();
    var reactData = {
      staticTabs: [],
      activeName: null,
      initNames: [],
      lintLeft: 0,
      lintTop: 0,
      lintWidth: 0,
      lintHeight: 0,
      scrollbarWidth: 0,
      scrollbarHeight: 0,
      isTabOver: false,
      resizeFlag: 1,
      cacheTabMaps: {}
    };
    var internalData = {
      slTimeout: undefined
    };
    return {
      xID: xID,
      reactData: reactData,
      internalData: internalData
    };
  },
  computed: Object.assign(Object.assign({}, {}), {
    computeParentTabsResizeFlag: function computeParentTabsResizeFlag() {
      var $xeTabs = this;
      var $xeParentTabs = $xeTabs.$xeParentTabs;
      return $xeParentTabs ? $xeParentTabs.reactData.resizeFlag : null;
    },
    computeTabType: function computeTabType() {
      var $xeTabs = this;
      var props = $xeTabs;
      var type = props.type;
      return type || 'default';
    },
    computeTabPosition: function computeTabPosition() {
      var $xeTabs = this;
      var props = $xeTabs;
      var position = props.position;
      return position || 'top';
    },
    computeLrPosition: function computeLrPosition() {
      var $xeTabs = this;
      var tabPosition = $xeTabs.computeTabPosition;
      return tabPosition === 'left' || tabPosition === 'right';
    },
    computeLineStyle: function computeLineStyle() {
      var $xeTabs = this;
      var reactData = $xeTabs.reactData;
      var lintLeft = reactData.lintLeft,
        lintTop = reactData.lintTop,
        lintWidth = reactData.lintWidth,
        lintHeight = reactData.lintHeight;
      var lrPosition = $xeTabs.computeLrPosition;
      return lrPosition ? {
        top: "".concat(lintTop, "px"),
        height: "".concat(lintHeight, "px")
      } : {
        left: "".concat(lintLeft, "px"),
        width: "".concat(lintWidth, "px")
      };
    },
    computeWrapperStyle: function computeWrapperStyle() {
      var $xeTabs = this;
      var props = $xeTabs;
      var width = props.width,
        height = props.height;
      var stys = {};
      if (width) {
        stys.width = (0, _dom.toCssUnit)(width);
      }
      if (height) {
        stys.height = height === 'auto' ? '100%' : (0, _dom.toCssUnit)(height);
      }
      return stys;
    },
    computeCloseOpts: function computeCloseOpts() {
      var $xeTabs = this;
      var props = $xeTabs;
      return Object.assign({}, (0, _ui.getConfig)().tabs.closeConfig, props.closeConfig);
    },
    computeRefreshOpts: function computeRefreshOpts() {
      var $xeTabs = this;
      var props = $xeTabs;
      return Object.assign({}, (0, _ui.getConfig)().tabs.refreshConfig, props.refreshConfig);
    },
    computeTabOptions: function computeTabOptions() {
      var $xeTabs = this;
      var props = $xeTabs;
      var options = props.options;
      return (options || []).filter(function (item) {
        return $xeTabs.handleFilterTab(item);
      });
    },
    computeTabStaticOptions: function computeTabStaticOptions() {
      var $xeTabs = this;
      var reactData = $xeTabs.reactData;
      var staticTabs = reactData.staticTabs;
      return staticTabs.filter(function (item) {
        return $xeTabs.handleFilterTab(item);
      });
    }
  }),
  methods: {
    //
    // Method
    //
    dispatchEvent: function dispatchEvent(type, params, evnt) {
      var $xeTabs = this;
      $xeTabs.$emit(type, (0, _ui.createEvent)(evnt, {
        $tabs: $xeTabs
      }, params));
    },
    emitModel: function emitModel(value) {
      var $xeTabs = this;
      var _events = $xeTabs._events;
      $xeTabs.$emit('input', value);
      if (_events && _events.modelValue) {
        $xeTabs.$emit('modelValue', value);
      } else {
        $xeTabs.$emit('model-value', value);
      }
    },
    prev: function prev() {
      var $xeTabs = this;
      return $xeTabs.handlePrevNext(false);
    },
    next: function next() {
      var $xeTabs = this;
      return $xeTabs.handlePrevNext(true);
    },
    prevTab: function prevTab() {
      var $xeTabs = this;
      warnLog('vxe.error.delFunc', ['prevTab', 'prev']);
      return $xeTabs.prev();
    },
    nextTab: function nextTab() {
      var $xeTabs = this;
      warnLog('vxe.error.delFunc', ['nextTab', 'next']);
      return $xeTabs.next();
    },
    handleFilterTab: function handleFilterTab(item) {
      var permissionCode = item.permissionCode;
      if (permissionCode) {
        if (!_ui.permission.checkVisible(permissionCode)) {
          return false;
        }
      }
      return true;
    },
    callSlot: function callSlot(slotFunc, params, h) {
      var $xeTabs = this;
      var slots = $xeTabs.$scopedSlots;
      if (slotFunc) {
        if (_xeUtils.default.isString(slotFunc)) {
          slotFunc = slots[slotFunc] || null;
        }
        if (_xeUtils.default.isFunction(slotFunc)) {
          return (0, _vn.getSlotVNs)(slotFunc.call($xeTabs, params, h));
        }
      }
      return [];
    },
    checkScrolling: function checkScrolling() {
      var $xeTabs = this;
      var lrPosition = $xeTabs.computeLrPosition;
      var headerWrapperEl = $xeTabs.$refs.refHeadWrapperElem;
      var headPrevEl = $xeTabs.$refs.refHeadPrevElem;
      var headNextEl = $xeTabs.$refs.refHeadNextElem;
      if (headerWrapperEl) {
        var scrollLeft = headerWrapperEl.scrollLeft,
          scrollTop = headerWrapperEl.scrollTop,
          clientWidth = headerWrapperEl.clientWidth,
          clientHeight = headerWrapperEl.clientHeight,
          scrollWidth = headerWrapperEl.scrollWidth,
          scrollHeight = headerWrapperEl.scrollHeight;
        if (headPrevEl) {
          if ((lrPosition ? scrollTop : scrollLeft) > 0) {
            (0, _dom.addClass)(headPrevEl, 'scrolling--middle');
          } else {
            (0, _dom.removeClass)(headPrevEl, 'scrolling--middle');
          }
        }
        if (headNextEl) {
          if (lrPosition ? clientHeight < scrollHeight - Math.ceil(scrollTop) : clientWidth < scrollWidth - Math.ceil(scrollLeft)) {
            (0, _dom.addClass)(headNextEl, 'scrolling--middle');
          } else {
            (0, _dom.removeClass)(headNextEl, 'scrolling--middle');
          }
        }
      }
    },
    updateTabStyle: function updateTabStyle() {
      var $xeTabs = this;
      var reactData = $xeTabs.reactData;
      var handleStyle = function handleStyle() {
        var activeName = reactData.activeName;
        var tabType = $xeTabs.computeTabType;
        var tabOptions = $xeTabs.computeTabOptions;
        var tabStaticOptions = $xeTabs.computeTabStaticOptions;
        var headerWrapperEl = $xeTabs.$refs.refHeadWrapperElem;
        var lrPosition = $xeTabs.computeLrPosition;
        var lintWidth = 0;
        var lintHeight = 0;
        var lintLeft = 0;
        var lintTop = 0;
        var sBarWidth = 0;
        var sBarHeight = 0;
        var isOver = false;
        if (headerWrapperEl) {
          var index = _xeUtils.default.findIndexOf(tabStaticOptions.length ? tabStaticOptions : tabOptions, function (item) {
            return item.name === activeName;
          });
          var children = headerWrapperEl.children,
            offsetWidth = headerWrapperEl.offsetWidth,
            scrollWidth = headerWrapperEl.scrollWidth,
            offsetHeight = headerWrapperEl.offsetHeight,
            scrollHeight = headerWrapperEl.scrollHeight,
            clientWidth = headerWrapperEl.clientWidth,
            clientHeight = headerWrapperEl.clientHeight;
          sBarWidth = offsetWidth - clientWidth;
          sBarHeight = offsetHeight - clientHeight;
          if (lrPosition) {
            isOver = scrollHeight !== clientHeight;
            if (index > -1) {
              var tabEl = children[index];
              if (tabEl) {
                var tabHeight = tabEl.clientHeight;
                var tabWidth = tabEl.clientWidth;
                if (tabType === 'card') {
                  lintWidth = tabWidth;
                  lintHeight = tabHeight;
                  lintTop = tabEl.offsetTop;
                } else if (tabType === 'border-card') {
                  lintWidth = tabWidth;
                  lintHeight = tabHeight;
                  lintTop = tabEl.offsetTop - 1;
                } else {
                  lintHeight = Math.max(4, Math.floor(tabHeight * 0.6));
                  lintTop = tabEl.offsetTop + Math.floor((tabHeight - lintHeight) / 2);
                }
              }
            }
          } else {
            isOver = scrollWidth !== clientWidth;
            if (index > -1) {
              var _tabEl = children[index];
              if (_tabEl) {
                var _tabWidth = _tabEl.clientWidth;
                if (tabType === 'card') {
                  lintWidth = _tabWidth + 1;
                  lintLeft = _tabEl.offsetLeft;
                } else if (tabType === 'border-card') {
                  lintWidth = _tabWidth;
                  lintLeft = _tabEl.offsetLeft - 1;
                } else {
                  lintWidth = Math.max(4, Math.floor(_tabWidth * 0.6));
                  lintLeft = _tabEl.offsetLeft + Math.floor((_tabWidth - lintWidth) / 2);
                }
              }
            }
          }
        }
        reactData.scrollbarWidth = sBarWidth;
        reactData.scrollbarHeight = sBarHeight;
        reactData.lintLeft = lintLeft;
        reactData.lintTop = lintTop;
        reactData.lintWidth = lintWidth;
        reactData.lintHeight = lintHeight;
        reactData.isTabOver = isOver;
        $xeTabs.checkScrolling();
      };
      handleStyle();
      $xeTabs.$nextTick(handleStyle);
    },
    addInitName: function addInitName(name, evnt) {
      var $xeTabs = this;
      var reactData = $xeTabs.reactData;
      var initNames = reactData.initNames;
      if (name && !initNames.includes(name)) {
        $xeTabs.dispatchEvent('tab-load', {
          name: name
        }, evnt);
        initNames.push(name);
        return true;
      }
      return false;
    },
    initDefaultName: function initDefaultName(list) {
      var $xeTabs = this;
      var props = $xeTabs;
      var reactData = $xeTabs.reactData;
      var activeName = null;
      var nameMaps = {};
      if (list && list.length) {
        var validVal = false;
        activeName = props.value;
        list.forEach(function (item) {
          var _ref = item || {},
            name = _ref.name,
            preload = _ref.preload;
          if (name) {
            nameMaps["".concat(name)] = {
              loading: false
            };
            if (activeName === name) {
              validVal = true;
            }
            if (preload) {
              $xeTabs.addInitName(name, null);
            }
          }
        });
        if (!validVal) {
          activeName = list[0].name;
          $xeTabs.addInitName(activeName, null);
          $xeTabs.emitModel(activeName);
        }
      }
      reactData.activeName = activeName;
      reactData.cacheTabMaps = nameMaps;
    },
    clickEvent: function clickEvent(evnt, item) {
      var $xeTabs = this;
      var props = $xeTabs;
      var reactData = $xeTabs.reactData;
      var trigger = props.trigger;
      var beforeMethod = props.beforeChangeMethod || (0, _ui.getConfig)().tabs.beforeChangeMethod;
      var activeName = reactData.activeName;
      var name = item.name;
      var value = name;
      $xeTabs.dispatchEvent('tab-click', {
        name: name
      }, evnt);
      if (trigger === 'manual') {
        return;
      }
      if (name !== activeName) {
        Promise.resolve(!beforeMethod || beforeMethod({
          $tabs: $xeTabs,
          name: name,
          oldName: activeName,
          newName: name,
          option: item
        })).then(function (status) {
          if (status) {
            reactData.activeName = name;
            $xeTabs.emitModel(value);
            $xeTabs.addInitName(name, evnt);
            $xeTabs.dispatchEvent('change', {
              value: value,
              name: name,
              oldName: activeName,
              newName: name,
              option: item
            }, evnt);
            $xeTabs.dispatchEvent('tab-change', {
              value: value,
              name: name,
              oldName: activeName,
              newName: name,
              option: item
            }, evnt);
          } else {
            $xeTabs.dispatchEvent('tab-change-fail', {
              value: value,
              name: name,
              oldName: activeName,
              newName: name,
              option: item
            }, evnt);
          }
        }).catch(function () {
          $xeTabs.dispatchEvent('tab-change-fail', {
            value: value,
            name: name,
            oldName: activeName,
            newName: name,
            option: item
          }, evnt);
        });
      }
    },
    handleRefreshTabEvent: function handleRefreshTabEvent(evnt, item) {
      var $xeTabs = this;
      var reactData = $xeTabs.reactData;
      evnt.stopPropagation();
      var activeName = reactData.activeName,
        cacheTabMaps = reactData.cacheTabMaps;
      var name = item.name;
      var refreshOpts = $xeTabs.computeRefreshOpts;
      var queryMethod = refreshOpts.queryMethod;
      var cacheItem = name ? cacheTabMaps["".concat(name)] : null;
      if (cacheItem) {
        if (cacheItem.loading) {
          return;
        }
        if (queryMethod) {
          cacheItem.loading = true;
          Promise.resolve(queryMethod({
            $tabs: $xeTabs,
            value: activeName,
            name: name,
            option: item
          })).finally(function () {
            cacheItem.loading = false;
          });
        } else {
          errLog('vxe.error.notFunc', ['refresh-config.queryMethod']);
        }
      }
    },
    handleCloseTabEvent: function handleCloseTabEvent(evnt, item, index, list) {
      var $xeTabs = this;
      var props = $xeTabs;
      var reactData = $xeTabs.reactData;
      evnt.stopPropagation();
      var activeName = reactData.activeName;
      var closeOpts = $xeTabs.computeCloseOpts;
      var beforeMethod = closeOpts.beforeMethod || props.beforeCloseMethod || (0, _ui.getConfig)().tabs.beforeCloseMethod;
      var name = item.name;
      var value = activeName;
      var nextName = value;
      if (activeName === name) {
        var nextItem = index < list.length - 1 ? list[index + 1] : list[index - 1];
        nextName = nextItem ? nextItem.name : null;
      }
      Promise.resolve(!beforeMethod || beforeMethod({
        $tabs: $xeTabs,
        value: value,
        name: name,
        nextName: nextName,
        option: item
      })).then(function (status) {
        if (status) {
          $xeTabs.dispatchEvent('tab-close', {
            value: value,
            name: name,
            nextName: nextName
          }, evnt);
        } else {
          $xeTabs.dispatchEvent('tab-close-fail', {
            value: value,
            name: name,
            nextName: nextName
          }, evnt);
        }
      }).catch(function () {
        $xeTabs.dispatchEvent('tab-close-fail', {
          value: value,
          name: name,
          nextName: nextName
        }, evnt);
      });
    },
    startScrollAnimation: function startScrollAnimation(offsetPos, offsetSize) {
      var $xeTabs = this;
      var internalData = $xeTabs.internalData;
      var slTimeout = internalData.slTimeout;
      var lrPosition = $xeTabs.computeLrPosition;
      var offsetLeft = lrPosition ? 0 : offsetSize;
      var offsetTop = lrPosition ? offsetSize : 0;
      var scrollCount = 6;
      var delayNum = 35;
      if (slTimeout) {
        clearTimeout(slTimeout);
        internalData.slTimeout = undefined;
      }
      var _scrollAnimate = function scrollAnimate() {
        var headerWrapperEl = $xeTabs.$refs.refHeadWrapperElem;
        if (scrollCount > 0) {
          scrollCount--;
          if (headerWrapperEl) {
            var clientWidth = headerWrapperEl.clientWidth,
              clientHeight = headerWrapperEl.clientHeight,
              scrollWidth = headerWrapperEl.scrollWidth,
              scrollHeight = headerWrapperEl.scrollHeight,
              scrollLeft = headerWrapperEl.scrollLeft,
              scrollTop = headerWrapperEl.scrollTop;
            if (lrPosition) {
              offsetTop = Math.floor(offsetTop / 2);
              if (offsetPos > 0) {
                if (clientHeight + scrollTop < scrollHeight) {
                  headerWrapperEl.scrollTop += offsetTop;
                  delayNum -= 4;
                  internalData.slTimeout = setTimeout(_scrollAnimate, delayNum);
                }
              } else {
                if (scrollTop > 0) {
                  headerWrapperEl.scrollTop -= offsetTop;
                  delayNum -= 4;
                  internalData.slTimeout = setTimeout(_scrollAnimate, delayNum);
                }
              }
            } else {
              offsetLeft = Math.floor(offsetLeft / 2);
              if (offsetPos > 0) {
                if (clientWidth + scrollLeft < scrollWidth) {
                  headerWrapperEl.scrollLeft += offsetLeft;
                  delayNum -= 4;
                  internalData.slTimeout = setTimeout(_scrollAnimate, delayNum);
                }
              } else {
                if (scrollLeft > 0) {
                  headerWrapperEl.scrollLeft -= offsetLeft;
                  delayNum -= 4;
                  internalData.slTimeout = setTimeout(_scrollAnimate, delayNum);
                }
              }
            }
            $xeTabs.updateTabStyle();
          }
        }
      };
      _scrollAnimate();
    },
    handleScrollToLeft: function handleScrollToLeft(offsetPos) {
      var $xeTabs = this;
      var lrPosition = $xeTabs.computeLrPosition;
      var headerWrapperEl = $xeTabs.$refs.refHeadWrapperElem;
      if (headerWrapperEl) {
        var clientWidth = headerWrapperEl.clientWidth,
          clientHeight = headerWrapperEl.clientHeight;
        var offsetSize = Math.floor((lrPosition ? clientHeight : clientWidth) * 0.75);
        $xeTabs.startScrollAnimation(offsetPos, offsetSize);
      }
    },
    scrollLeftEvent: function scrollLeftEvent() {
      var $xeTabs = this;
      $xeTabs.handleScrollToLeft(-1);
    },
    scrollRightEvent: function scrollRightEvent() {
      var $xeTabs = this;
      $xeTabs.handleScrollToLeft(1);
    },
    scrollToTab: function scrollToTab(name) {
      var $xeTabs = this;
      var tabOptions = $xeTabs.computeTabOptions;
      var tabStaticOptions = $xeTabs.computeTabStaticOptions;
      var lrPosition = $xeTabs.computeLrPosition;
      return $xeTabs.$nextTick().then(function () {
        var headerWrapperEl = $xeTabs.$refs.refHeadWrapperElem;
        if (headerWrapperEl) {
          var index = _xeUtils.default.findIndexOf(tabStaticOptions.length ? tabStaticOptions : tabOptions, function (item) {
            return item.name === name;
          });
          if (index > -1) {
            var scrollLeft = headerWrapperEl.scrollLeft,
              scrollTop = headerWrapperEl.scrollTop,
              clientWidth = headerWrapperEl.clientWidth,
              clientHeight = headerWrapperEl.clientHeight,
              children = headerWrapperEl.children;
            var tabEl = children[index];
            if (tabEl) {
              if (lrPosition) {
                var tabOffsetTop = tabEl.offsetTop;
                var tabClientHeight = tabEl.clientHeight;
                // 如果顶部被挡
                var overSize = tabOffsetTop + tabClientHeight - (scrollTop + clientHeight);
                if (overSize > 0) {
                  headerWrapperEl.scrollTop += overSize;
                }
                // 如果底部被挡，优先
                if (tabOffsetTop < scrollTop) {
                  headerWrapperEl.scrollTop = tabOffsetTop;
                }
              } else {
                var tabOffsetLeft = tabEl.offsetLeft;
                var tabClientWidth = tabEl.clientWidth;
                // 如果右侧被挡
                var _overSize = tabOffsetLeft + tabClientWidth - (scrollLeft + clientWidth);
                if (_overSize > 0) {
                  headerWrapperEl.scrollLeft += _overSize;
                }
                // 如果左侧被挡，优先
                if (tabOffsetLeft < scrollLeft) {
                  headerWrapperEl.scrollLeft = tabOffsetLeft;
                }
              }
            }
          }
          $xeTabs.updateTabStyle();
        }
      });
    },
    handlePrevNext: function handlePrevNext(isNext) {
      var $xeTabs = this;
      var reactData = $xeTabs.reactData;
      var activeName = reactData.activeName;
      var tabOptions = $xeTabs.computeTabOptions;
      var tabStaticOptions = $xeTabs.computeTabStaticOptions;
      var list = tabStaticOptions.length ? tabStaticOptions : tabOptions;
      var index = _xeUtils.default.findIndexOf(list, function (item) {
        return item.name === activeName;
      });
      if (index > -1) {
        var item = null;
        if (isNext) {
          if (index < list.length - 1) {
            item = list[index + 1];
          }
        } else {
          if (index > 0) {
            item = list[index - 1];
          }
        }
        if (item) {
          var name = item.name;
          var value = name;
          reactData.activeName = name;
          $xeTabs.emitModel(value);
          $xeTabs.addInitName(name, null);
        }
      }
      return $xeTabs.$nextTick();
    },
    //
    // Render
    //
    renderTabHeader: function renderTabHeader(h, tabList) {
      var $xeTabs = this;
      var props = $xeTabs;
      var slots = $xeTabs.$scopedSlots;
      var reactData = $xeTabs.reactData;
      var allTitleWidth = props.titleWidth,
        allTitleAlign = props.titleAlign,
        showClose = props.showClose,
        closeConfig = props.closeConfig,
        refreshConfig = props.refreshConfig;
      var activeName = reactData.activeName,
        scrollbarWidth = reactData.scrollbarWidth,
        scrollbarHeight = reactData.scrollbarHeight,
        isTabOver = reactData.isTabOver,
        cacheTabMaps = reactData.cacheTabMaps;
      var tabType = $xeTabs.computeTabType;
      var tabPosition = $xeTabs.computeTabPosition;
      var lrPosition = $xeTabs.computeLrPosition;
      var lineStyle = $xeTabs.computeLineStyle;
      var tabPrefixSlot = slots.tabPrefix || slots['tab-prefix'] || slots.prefix;
      var tabSuffixSlot = slots.tabSuffix || slots['tab-suffix'] || slots.suffix || slots.extra;
      var closeOpts = $xeTabs.computeCloseOpts;
      var closeVisibleMethod = closeOpts.visibleMethod;
      var refreshOpts = $xeTabs.computeRefreshOpts;
      var refreshVisibleMethod = refreshOpts.visibleMethod;
      return h('div', {
        key: 'th',
        class: ['vxe-tabs-header', "type--".concat(tabType), "pos--".concat(tabPosition)]
      }, [tabPrefixSlot ? h('div', {
        class: ['vxe-tabs-header--prefix', "type--".concat(tabType), "pos--".concat(tabPosition)]
      }, $xeTabs.callSlot(tabPrefixSlot, {
        name: activeName
      }, h)) : (0, _ui.renderEmptyElement)($xeTabs), isTabOver ? h('div', {
        ref: 'refHeadPrevElem',
        class: ['vxe-tabs-header--bar vxe-tabs-header--prev-bar', "type--".concat(tabType), "pos--".concat(tabPosition)],
        on: {
          click: $xeTabs.scrollLeftEvent
        }
      }, [h('span', {
        class: lrPosition ? (0, _ui.getIcon)().TABS_TAB_BUTTON_TOP : (0, _ui.getIcon)().TABS_TAB_BUTTON_LEFT
      })]) : (0, _ui.renderEmptyElement)($xeTabs), h('div', {
        class: ['vxe-tabs-header--wrapper', "type--".concat(tabType), "pos--".concat(tabPosition)]
      }, [h('div', {
        ref: 'refHeadWrapperElem',
        class: 'vxe-tabs-header--item-wrapper',
        style: lrPosition ? {
          marginRight: "-".concat(scrollbarWidth + scrollbarOffsetSize, "px"),
          paddingRight: "".concat(scrollbarOffsetSize, "px")
        } : {
          marginBottom: "-".concat(scrollbarHeight + scrollbarOffsetSize, "px"),
          paddingBottom: "".concat(scrollbarOffsetSize, "px")
        },
        on: {
          scroll: $xeTabs.checkScrolling
        }
      }, tabList.map(function (item, index) {
        var title = item.title,
          titleWidth = item.titleWidth,
          titleAlign = item.titleAlign,
          icon = item.icon,
          name = item.name;
        var itemSlots = item.slots || {};
        var titleSlot = itemSlots.title || itemSlots.tab;
        var titlePrefixSlot = itemSlots.titlePrefix || itemSlots['title-prefix'];
        var titleSuffixSlot = itemSlots.titleSuffix || itemSlots['title-suffix'];
        var itemWidth = titleWidth || allTitleWidth;
        var itemAlign = titleAlign || allTitleAlign;
        var params = {
          $tabs: $xeTabs,
          value: activeName,
          name: name,
          option: item
        };
        var isActive = activeName === name;
        var cacheItem = name ? cacheTabMaps["".concat(name)] : null;
        var isLoading = cacheItem ? cacheItem.loading : false;
        return h('div', {
          key: "".concat(name),
          class: ['vxe-tabs-header--item', "type--".concat(tabType), "pos--".concat(tabPosition), itemAlign ? "align--".concat(itemAlign) : '', {
            'is--active': isActive
          }],
          style: itemWidth ? {
            width: (0, _dom.toCssUnit)(itemWidth)
          } : undefined,
          on: {
            click: function click(evnt) {
              $xeTabs.clickEvent(evnt, item);
            }
          }
        }, [h('div', {
          class: 'vxe-tabs-header--item-inner'
        }, [h('div', {
          class: 'vxe-tabs-header--item-content'
        }, [icon ? h('span', {
          class: 'vxe-tabs-header--item-icon'
        }, [h('i', {
          class: icon
        })]) : (0, _ui.renderEmptyElement)($xeTabs), titlePrefixSlot ? h('span', {
          class: 'vxe-tabs-header--item-prefix'
        }, $xeTabs.callSlot(titlePrefixSlot, {
          name: name,
          title: title
        }, h)) : (0, _ui.renderEmptyElement)($xeTabs), h('span', {
          class: 'vxe-tabs-header--item-name'
        }, titleSlot ? $xeTabs.callSlot(titleSlot, {
          name: name,
          title: title
        }, h) : "".concat(title)), titleSuffixSlot ? h('span', {
          class: 'vxe-tabs-header--item-suffix'
        }, $xeTabs.callSlot(titleSuffixSlot, {
          name: name,
          title: title
        }, h)) : (0, _ui.renderEmptyElement)($xeTabs)]), ((0, _utils.isEnableConf)(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : true) ? h('div', {
          class: ['vxe-tabs-header--refresh-btn', {
            'is--active': isActive,
            'is--loading': isLoading,
            'is--disabled': isLoading
          }],
          on: {
            click: function click(evnt) {
              $xeTabs.handleRefreshTabEvent(evnt, item);
            }
          }
        }, [h('i', {
          class: isLoading ? (0, _ui.getIcon)().TABS_TAB_REFRESH_LOADING : (0, _ui.getIcon)().TABS_TAB_REFRESH
        })]) : (0, _ui.renderEmptyElement)($xeTabs), (showClose || (0, _utils.isEnableConf)(closeConfig) || closeOpts.enabled) && (!closeVisibleMethod || closeVisibleMethod(params)) ? h('div', {
          class: ['vxe-tabs-header--close-btn', {
            'is--active': isActive
          }],
          on: {
            click: function click(evnt) {
              $xeTabs.handleCloseTabEvent(evnt, item, index, tabList);
            }
          }
        }, [h('i', {
          class: (0, _ui.getIcon)().TABS_TAB_CLOSE
        })]) : (0, _ui.renderEmptyElement)($xeTabs)])]);
      }).concat([h('span', {
        key: 'line',
        class: ['vxe-tabs-header--active-line', "type--".concat(tabType), "pos--".concat(tabPosition)],
        style: lineStyle
      })]))]), isTabOver ? h('div', {
        ref: 'refHeadNextElem',
        class: ['vxe-tabs-header--bar vxe-tabs-header--next-bar', "type--".concat(tabType), "pos--".concat(tabPosition)],
        on: {
          click: $xeTabs.scrollRightEvent
        }
      }, [h('span', {
        class: lrPosition ? (0, _ui.getIcon)().TABS_TAB_BUTTON_BOTTOM : (0, _ui.getIcon)().TABS_TAB_BUTTON_RIGHT
      })]) : (0, _ui.renderEmptyElement)($xeTabs), tabSuffixSlot ? h('div', {
        class: ['vxe-tabs-header--suffix', "type--".concat(tabType), "pos--".concat(tabPosition)]
      }, $xeTabs.callSlot(tabSuffixSlot, {
        name: activeName
      }, h)) : (0, _ui.renderEmptyElement)($xeTabs)]);
    },
    renderTabPane: function renderTabPane(h, item) {
      var $xeTabs = this;
      var reactData = $xeTabs.reactData;
      var initNames = reactData.initNames,
        activeName = reactData.activeName;
      var name = item.name,
        slots = item.slots;
      var defaultSlot = slots ? slots.default : null;
      return name && initNames.includes(name) ? h('div', {
        key: "".concat(name),
        class: ['vxe-tabs-pane--item', {
          'is--visible': activeName === name
        }]
      }, defaultSlot ? $xeTabs.callSlot(defaultSlot, {
        name: name
      }, h) : []) : (0, _ui.renderEmptyElement)($xeTabs);
    },
    renderTabContent: function renderTabContent(h, tabList) {
      var $xeTabs = this;
      var props = $xeTabs;
      var reactData = $xeTabs.reactData;
      var destroyOnClose = props.destroyOnClose;
      var activeName = reactData.activeName;
      if (destroyOnClose) {
        var activeTab = tabList.find(function (item) {
          return item.name === activeName;
        });
        return [activeTab ? $xeTabs.renderTabPane(h, activeTab) : (0, _ui.renderEmptyElement)($xeTabs)];
      }
      return tabList.map(function (item) {
        return $xeTabs.renderTabPane(h, item);
      });
    },
    rendetTabBody: function rendetTabBody(h, tabList) {
      var $xeTabs = this;
      var props = $xeTabs;
      var slots = $xeTabs.$scopedSlots;
      var reactData = $xeTabs.reactData;
      var height = props.height,
        padding = props.padding,
        showBody = props.showBody;
      var activeName = reactData.activeName,
        cacheTabMaps = reactData.cacheTabMaps;
      var vSize = $xeTabs.computeSize;
      var tabType = $xeTabs.computeTabType;
      var tabPosition = $xeTabs.computeTabPosition;
      var refreshOpts = $xeTabs.computeRefreshOpts;
      var showLoading = refreshOpts.showLoading;
      var headerpSlot = slots.header;
      var footerSlot = slots.footer;
      if (!showBody) {
        return (0, _ui.renderEmptyElement)($xeTabs);
      }
      var cacheItem = activeName ? cacheTabMaps["".concat(activeName)] : null;
      var isLoading = cacheItem ? cacheItem.loading : false;
      var defParams = {
        name: activeName
      };
      return h('div', {
        key: 'tb',
        class: ['vxe-tabs-pane--wrapper', "type--".concat(tabType), "pos--".concat(tabPosition), {
          'is--content': showBody
        }]
      }, [headerpSlot ? h('div', {
        class: 'vxe-tabs-pane--header'
      }, $xeTabs.callSlot(headerpSlot, defParams, h)) : (0, _ui.renderEmptyElement)($xeTabs), h('div', {
        class: ['vxe-tabs-pane--body', "type--".concat(tabType), "pos--".concat(tabPosition), _defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--padding', padding), 'is--height', height)]
      }, $xeTabs.renderTabContent(h, tabList)), footerSlot ? h('div', {
        class: 'vxe-tabs-pane--footer'
      }, $xeTabs.callSlot(footerSlot, defParams, h)) : (0, _ui.renderEmptyElement)($xeTabs), showLoading && isLoading ? (0, _ui.renderEmptyElement)($xeTabs) : h(_loading.default, {
        class: 'vxe-tabs--loading',
        props: {
          value: isLoading
        }
      })]);
    },
    renderVN: function renderVN(h) {
      var $xeTabs = this;
      var props = $xeTabs;
      var slots = $xeTabs.$scopedSlots;
      var reactData = $xeTabs.reactData;
      var height = props.height,
        padding = props.padding,
        trigger = props.trigger;
      var activeName = reactData.activeName;
      var vSize = $xeTabs.computeSize;
      var tabOptions = $xeTabs.computeTabOptions;
      var tabStaticOptions = $xeTabs.computeTabStaticOptions;
      var tabType = $xeTabs.computeTabType;
      var tabPosition = $xeTabs.computeTabPosition;
      var wrapperStyle = $xeTabs.computeWrapperStyle;
      var defaultSlot = slots.default;
      var tabList = defaultSlot ? tabStaticOptions : tabOptions;
      var vns = [h('div', {
        key: 'ts',
        class: 'vxe-tabs-slots'
      }, defaultSlot ? defaultSlot({
        name: activeName
      }) : [])];
      if (tabPosition === 'right' || tabPosition === 'bottom') {
        vns.push($xeTabs.rendetTabBody(h, tabList), $xeTabs.renderTabHeader(h, tabList));
      } else {
        vns.push($xeTabs.renderTabHeader(h, tabList), $xeTabs.rendetTabBody(h, tabList));
      }
      return h('div', {
        ref: 'refElem',
        class: ['vxe-tabs', "pos--".concat(tabPosition), "vxe-tabs--".concat(tabType), "trigger--".concat(trigger === 'manual' ? 'trigger' : 'default'), _defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--padding', padding), 'is--height', height)],
        style: wrapperStyle
      }, vns);
    }
  },
  watch: {
    position: function position() {
      var $xeTabs = this;
      var reactData = $xeTabs.reactData;
      reactData.resizeFlag++;
    },
    value: function value(val) {
      var $xeTabs = this;
      var reactData = $xeTabs.reactData;
      $xeTabs.addInitName(val, null);
      reactData.activeName = val;
    },
    'reactData.activeName': function reactDataActiveName(val) {
      var $xeTabs = this;
      $xeTabs.scrollToTab(val);
    },
    options: function options() {
      var $xeTabs = this;
      var props = $xeTabs;
      var reactData = $xeTabs.reactData;
      $xeTabs.initDefaultName(props.options);
      reactData.resizeFlag++;
    },
    'reactData.staticTabs': function reactDataStaticTabs() {
      var $xeTabs = this;
      var reactData = $xeTabs.reactData;
      $xeTabs.initDefaultName(reactData.staticTabs);
      reactData.resizeFlag++;
    },
    computeParentTabsResizeFlag: function computeParentTabsResizeFlag() {
      var $xeTabs = this;
      $xeTabs.$nextTick(function () {
        $xeTabs.updateTabStyle();
      });
    }
  },
  created: function created() {
    var $xeTabs = this;
    var props = $xeTabs;
    var reactData = $xeTabs.reactData;
    $xeTabs.addInitName(props.value, null);
    $xeTabs.initDefaultName(reactData.staticTabs.length ? reactData.staticTabs : props.options);
  },
  mounted: function mounted() {
    var $xeTabs = this;
    $xeTabs.updateTabStyle();
    _ui.globalEvents.on($xeTabs, 'resize', $xeTabs.updateTabStyle);
  },
  beforeDestroy: function beforeDestroy() {
    var $xeTabs = this;
    _ui.globalEvents.off($xeTabs, 'resize');
  },
  render: function render(h) {
    return this.renderVN(h);
  }
});
/* define-vxe-component end */