/**
 * ldesign v0.4.6
 * (c) 2023 ldesign
 * @license MIT
 */

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import debounce from 'lodash/debounce';
import { ChevronLeftIcon, ChevronRightIcon, AddIcon } from '@ldesign/icons-vue';
import { emitEvent } from '../utils/event.js';
import { firstUpperCase } from '../utils/helper.js';
import { renderTNodeJSX } from '../utils/render-tnode.js';
import { getClassPrefixMixins, getGlobalIconMixins } from '../config-provider/config-receiver.js';
import mixins from '../utils/mixins.js';
import TTabNavItem from './tab-nav-item.js';
import props from './props.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'lodash/camelCase';
import '@babel/runtime/helpers/typeof';
import 'vue';
import '@vue/composition-api';
import 'lodash/kebabCase';
import 'lodash/mergeWith';
import '../config-provider/context.js';
import 'lodash/merge';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/zh_CN.js';
import '../_chunks/dep-2cb61c79.js';
import 'dayjs';
import '../utils/ripple.js';
import '../_common/js/utils/set-style.js';
import '../config.js';
import './tab-panel-props.js';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var classPrefixMixins = getClassPrefixMixins("tab__nav");
var getDomWidth = function getDomWidth(dom) {
  return (dom === null || dom === void 0 ? void 0 : dom.offsetWidth) || 0;
};
var getActiveTabEl = function getActiveTabEl(navs, value) {
  for (var i = 0; i < navs.length; i++) {
    var _navs$i$componentInst;
    if (navs[i].componentOptions.propsData.value === value) return (_navs$i$componentInst = navs[i].componentInstance) === null || _navs$i$componentInst === void 0 ? void 0 : _navs$i$componentInst.$el;
  }
  return null;
};
var getLeftCoverWidth = function getLeftCoverWidth(o) {
  var leftOperationsZoneWidth = getDomWidth(o.leftZone);
  var leftIconWidth = getDomWidth(o.leftIcon);
  if (o.totalWidthBeforeActiveTab === 0) {
    return leftOperationsZoneWidth - leftIconWidth;
  }
  return leftOperationsZoneWidth;
};
var getRightCoverWidth = function getRightCoverWidth(o) {
  var rightOperationsZoneWidth = getDomWidth(o.rightZone);
  var rightIconWidth = getDomWidth(o.rightIcon);
  var wrapWidth = getDomWidth(o.wrap);
  if (Math.abs(o.totalWidthBeforeActiveTab + o.activeTabWidth - wrapWidth) < 1) {
    return rightOperationsZoneWidth - rightIconWidth;
  }
  return rightOperationsZoneWidth;
};
var TTabNav = mixins(classPrefixMixins, getGlobalIconMixins()).extend({
  name: "TTabNav",
  components: {
    TTabNavItem: TTabNavItem
  },
  props: {
    theme: props.theme,
    panels: {
      type: Array,
      "default": function _default() {
        return [];
      }
    },
    value: props.value,
    placement: props.placement,
    size: props.size,
    disabled: props.disabled,
    addable: props.addable
  },
  data: function data() {
    return {
      scrollLeft: 0,
      canToLeft: false,
      canToRight: false,
      navBarStyle: {}
    };
  },
  computed: {
    navs: function navs() {
      var _this = this;
      var h = this.$createElement;
      return this.panels.map(function (panel, index) {
        return h(TTabNavItem, {
          "ref": "tabItem".concat(index),
          "key": panel.value,
          "attrs": {
            "index": index,
            "theme": _this.theme,
            "size": _this.size,
            "placement": _this.placement,
            "label": renderTNodeJSX(panel, "label", "\u9009\u9879\u5361".concat(index + 1)),
            "active": panel.value === _this.value,
            "disabled": _this.disabled || panel.disabled,
            "removable": panel.removable,
            "value": panel.value
          },
          "on": {
            "click": function click(e) {
              return _this.tabClick(e, panel);
            },
            "remove": _this.removeBtnClick
          }
        });
      });
    },
    wrapTransformStyle: function wrapTransformStyle() {
      if (["left", "right"].includes(this.placement.toLowerCase())) return {};
      return {
        transform: "translate(".concat(-this.scrollLeft, "px, 0)")
      };
    },
    dataCanUpdateNavBarStyle: function dataCanUpdateNavBarStyle() {
      return [this.scrollLeft, this.placement, this.theme, this.navs, this.value];
    },
    dataCanUpdateArrow: function dataCanUpdateArrow() {
      return [this.scrollLeft, this.placement, this.navs];
    },
    iconBaseClass: function iconBaseClass() {
      var _ref;
      return _ref = {}, _defineProperty(_ref, "".concat(this.classPrefix, "-tabs__btn"), true), _defineProperty(_ref, "".concat(this.classPrefix, "-size-m"), this.size === "medium"), _defineProperty(_ref, "".concat(this.classPrefix, "-size-l"), this.size === "large"), _ref;
    },
    leftIconClass: function leftIconClass() {
      return _objectSpread(_defineProperty({}, "".concat(this.classPrefix, "-tabs__btn--left"), true), this.iconBaseClass);
    },
    rightIconClass: function rightIconClass() {
      return _objectSpread(_defineProperty({}, "".concat(this.classPrefix, "-tabs__btn--right"), true), this.iconBaseClass);
    },
    addIconClass: function addIconClass() {
      return _objectSpread(_defineProperty({}, "".concat(this.classPrefix, "-tabs__add-btn"), true), this.iconBaseClass);
    },
    navContainerClass: function navContainerClass() {
      var _ref2;
      return _ref2 = {}, _defineProperty(_ref2, "".concat(this.classPrefix, "-tabs__nav-container"), true), _defineProperty(_ref2, "".concat(this.classPrefix, "-tabs__nav--card"), this.theme === "card"), _defineProperty(_ref2, "".concat(this.classPrefix, "-is-").concat(this.placement), true), _defineProperty(_ref2, "".concat(this.classPrefix, "-is-addable"), this.theme === "card" && this.addable), _ref2;
    },
    navScrollContainerClass: function navScrollContainerClass() {
      var _ref3;
      return _ref3 = {}, _defineProperty(_ref3, "".concat(this.classPrefix, "-tabs__nav-scroll"), true), _defineProperty(_ref3, "".concat(this.classPrefix, "-is-scrollable"), this.canToLeft || this.canToRight), _ref3;
    },
    navsWrapClass: function navsWrapClass() {
      return ["".concat(this.classPrefix, "-tabs__nav-wrap"), "".concat(this.classPrefix, "-is-smooth"), _defineProperty({}, "".concat(this.classPrefix, "-is-vertical"), this.placement === "left" || this.placement === "right")];
    },
    navBarClass: function navBarClass() {
      return ["".concat(this.classPrefix, "-tabs__bar"), "".concat(this.classPrefix, "-is-").concat(this.placement)];
    },
    navsContainerStyle: function navsContainerStyle() {
      return this.addable ? {
        "min-height": "48px"
      } : null;
    }
  },
  watch: {
    dataCanUpdateArrow: function dataCanUpdateArrow() {
      var _this2 = this;
      this.$nextTick(function () {
        _this2.calculateCanShowArrow();
      });
    },
    dataCanUpdateNavBarStyle: function dataCanUpdateNavBarStyle() {
      var _this3 = this;
      this.$nextTick(function () {
        _this3.calculateNavBarStyle();
      });
    },
    value: function value() {
      var _this4 = this;
      this.$nextTick(function () {
        _this4.moveActiveTabIntoView();
      });
    },
    navs: function navs() {
      var _this5 = this;
      this.$nextTick(function () {
        _this5.fixScrollLeft();
      });
    }
  },
  methods: {
    calculateCanShowArrow: function calculateCanShowArrow() {
      this.calculateCanToLeft();
      this.calculateCanToRight();
    },
    calculateCanToLeft: function calculateCanToLeft() {
      if (["left", "right"].includes(this.placement.toLowerCase())) this.canToLeft = false;
      var container = this.$refs.navsContainer;
      var wrap = this.$refs.navsWrap;
      if (!wrap || !container) this.canToLeft = false;
      var leftOperationsZoneWidth = getDomWidth(this.$refs.leftOperationsZone);
      var leftIconWidth = getDomWidth(this.$refs.leftIcon);
      this.canToLeft = this.scrollLeft + Math.round(leftOperationsZoneWidth - leftIconWidth) > 0;
    },
    calculateCanToRight: function calculateCanToRight() {
      if (["left", "right"].includes(this.placement.toLowerCase())) this.canToRight = false;
      var container = this.$refs.navsContainer;
      var wrap = this.$refs.navsWrap;
      if (!wrap || !container) this.canToRight = false;
      var rightOperationsZoneWidth = getDomWidth(this.$refs.rightOperationsZone);
      var rightIconWidth = getDomWidth(this.$refs.rightIcon);
      this.canToRight = this.scrollLeft + getDomWidth(container) - (rightOperationsZoneWidth - rightIconWidth) - getDomWidth(wrap) < -1;
    },
    calculateNavBarStyle: function calculateNavBarStyle() {
      var _this6 = this;
      var getNavBarStyle = function getNavBarStyle() {
        var _this6$navs$i$compone4, _this6$navs$i$compone5, _ref5;
        if (_this6.theme === "card") return {};
        var getPropName = function getPropName() {
          if (["left", "right"].includes(_this6.placement.toLowerCase())) return ["height", "top"];
          return ["width", "left"];
        };
        var offset = 0;
        var _getPropName = getPropName(),
          _getPropName2 = _slicedToArray(_getPropName, 2),
          sizePropName = _getPropName2[0],
          offsetPropName = _getPropName2[1];
        var i = 0;
        for (; i < _this6.navs.length; i++) {
          var _this6$navs$i$compone, _this6$navs$i$compone2, _this6$navs$i$compone3;
          if (((_this6$navs$i$compone = _this6.navs[i].componentInstance) === null || _this6$navs$i$compone === void 0 ? void 0 : _this6$navs$i$compone.value) === _this6.value) break;
          offset += ((_this6$navs$i$compone2 = _this6.navs[i].componentInstance) === null || _this6$navs$i$compone2 === void 0 ? void 0 : (_this6$navs$i$compone3 = _this6$navs$i$compone2.$el) === null || _this6$navs$i$compone3 === void 0 ? void 0 : _this6$navs$i$compone3["client".concat(firstUpperCase(sizePropName))]) || 0;
        }
        if (!_this6.navs[i]) return {};
        return _ref5 = {}, _defineProperty(_ref5, offsetPropName, "".concat(offset, "px")), _defineProperty(_ref5, sizePropName, "".concat(((_this6$navs$i$compone4 = _this6.navs[i].componentInstance) === null || _this6$navs$i$compone4 === void 0 ? void 0 : (_this6$navs$i$compone5 = _this6$navs$i$compone4.$el) === null || _this6$navs$i$compone5 === void 0 ? void 0 : _this6$navs$i$compone5["client".concat(firstUpperCase(sizePropName))]) || 0, "px")), _ref5;
      };
      this.navBarStyle = getNavBarStyle();
    },
    calculateMountedScrollLeft: function calculateMountedScrollLeft() {
      if (["left", "right"].includes(this.placement.toLowerCase())) return;
      var container = this.$refs.navsContainer;
      var activeTabEl = getActiveTabEl(this.navs, this.value);
      var totalWidthBeforeActiveTab = activeTabEl === null || activeTabEl === void 0 ? void 0 : activeTabEl.offsetLeft;
      var containerWidth = getDomWidth(container);
      if (totalWidthBeforeActiveTab > containerWidth) this.scrollLeft = totalWidthBeforeActiveTab;
    },
    watchDomChange: function watchDomChange() {
      var _this7 = this;
      var onResize = debounce(function () {
        _this7.resetScrollPosition();
      }, 300);
      window.addEventListener("resize", onResize);
      this.$once("beforeDestroy", function () {
        window.removeEventListener("resize", onResize);
      });
      if (!this.$refs.navsContainer) return;
      if (!window.ResizeObserver) return;
      var resizeObserver = new window.ResizeObserver(onResize);
      resizeObserver.observe(this.$refs.navsContainer);
      this.$once("beforeDestroy", function () {
        resizeObserver.disconnect();
      });
    },
    resetScrollPosition: function resetScrollPosition() {
      this.fixScrollLeft();
      this.calculateCanShowArrow();
    },
    handleScrollToLeft: function handleScrollToLeft() {
      var container = this.$refs.navsContainer;
      if (!container) return;
      var leftOperationsZoneWidth = getDomWidth(this.$refs.leftOperationsZone);
      var leftIconWidth = getDomWidth(this.$refs.leftIcon);
      var containerWidth = getDomWidth(container);
      this.scrollLeft = Math.max(-(leftOperationsZoneWidth - leftIconWidth), this.scrollLeft - containerWidth);
    },
    handleScrollToRight: function handleScrollToRight() {
      var container = this.$refs.navsContainer;
      var wrap = this.$refs.navsWrap;
      var rightOperationsZoneWidth = getDomWidth(this.$refs.rightOperationsZone);
      var rightIconWidth = getDomWidth(this.$refs.rightIcon);
      var containerWidth = getDomWidth(container);
      var wrapWidth = getDomWidth(wrap);
      this.scrollLeft = Math.min(this.scrollLeft + containerWidth, wrapWidth - containerWidth + rightOperationsZoneWidth - rightIconWidth);
    },
    shouldMoveToLeftSide: function shouldMoveToLeftSide(activeTabEl) {
      var _this8 = this;
      var totalWidthBeforeActiveTab = activeTabEl.offsetLeft;
      var container = this.$refs.navsContainer;
      if (!container) return;
      var leftCoverWidth = getLeftCoverWidth({
        leftZone: this.$refs.leftOperationsZone,
        leftIcon: this.$refs.leftIcon,
        totalWidthBeforeActiveTab: totalWidthBeforeActiveTab
      });
      var isCurrentTabHiddenInLeftZone = function isCurrentTabHiddenInLeftZone() {
        return _this8.scrollLeft + leftCoverWidth > totalWidthBeforeActiveTab;
      };
      if (isCurrentTabHiddenInLeftZone()) {
        this.scrollLeft = totalWidthBeforeActiveTab - leftCoverWidth;
        return true;
      }
      return false;
    },
    shouldMoveToRightSide: function shouldMoveToRightSide(activeTabEl) {
      var _this9 = this;
      var totalWidthBeforeActiveTab = activeTabEl.offsetLeft;
      var activeTabWidth = activeTabEl.offsetWidth;
      var container = this.$refs.navsContainer;
      var wrap = this.$refs.navsWrap;
      if (!container || !wrap) return;
      var containerWidth = getDomWidth(container);
      var rightCoverWidth = getRightCoverWidth({
        rightZone: this.$refs.rightOperationsZone,
        rightIcon: this.$refs.rightIcon,
        wrap: wrap,
        totalWidthBeforeActiveTab: totalWidthBeforeActiveTab,
        activeTabWidth: activeTabWidth
      });
      var isCurrentTabHiddenInRightZone = function isCurrentTabHiddenInRightZone() {
        return _this9.scrollLeft + containerWidth - rightCoverWidth < totalWidthBeforeActiveTab + activeTabWidth;
      };
      if (isCurrentTabHiddenInRightZone()) {
        this.scrollLeft = totalWidthBeforeActiveTab + activeTabWidth - containerWidth + rightCoverWidth;
        return true;
      }
      return false;
    },
    moveActiveTabIntoView: function moveActiveTabIntoView() {
      var _this10 = this;
      var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
          needCheckUpdate: true
        },
        needCheckUpdate = _ref6.needCheckUpdate;
      if (["left", "right"].includes(this.placement)) return false;
      var activeTabEl = getActiveTabEl(this.navs, this.value);
      if (!activeTabEl) {
        if (needCheckUpdate) {
          this.$once("hook:updated", function () {
            _this10.moveActiveTabIntoView({
              needCheckUpdate: false
            });
          });
        }
        return false;
      }
      return this.shouldMoveToLeftSide(activeTabEl) || this.shouldMoveToRightSide(activeTabEl);
    },
    fixIfLastItemNotTouchRightSide: function fixIfLastItemNotTouchRightSide(containerWidth, wrapWidth) {
      var rightOperationsZoneWidth = getDomWidth(this.$refs.rightOperationsZone);
      if (this.scrollLeft + containerWidth - rightOperationsZoneWidth > wrapWidth) {
        this.scrollLeft = wrapWidth + rightOperationsZoneWidth - containerWidth;
        return true;
      }
      return false;
    },
    fixIfItemTotalWidthIsLessThenContainerWidth: function fixIfItemTotalWidthIsLessThenContainerWidth(containerWidth, wrapWidth) {
      if (wrapWidth <= containerWidth) {
        this.scrollLeft = 0;
        return true;
      }
      return false;
    },
    fixScrollLeft: function fixScrollLeft() {
      if (["left", "right"].includes(this.placement.toLowerCase())) return;
      var container = this.$refs.navsContainer;
      var wrap = this.$refs.navsWrap;
      if (!wrap || !container) return false;
      var containerWidth = getDomWidth(container);
      var wrapWidth = getDomWidth(wrap);
      return this.fixIfItemTotalWidthIsLessThenContainerWidth(containerWidth, wrapWidth) || this.fixIfLastItemNotTouchRightSide(containerWidth, wrapWidth);
    },
    handleAddTab: function handleAddTab(e) {
      emitEvent(this, "add", {
        e: e
      });
    },
    tabClick: function tabClick(event, nav) {
      var value = nav.value,
        disabled = nav.disabled;
      if (disabled || this.value === value) return false;
      emitEvent(this, "change", value);
    },
    removeBtnClick: function removeBtnClick(_ref7) {
      var e = _ref7.e,
        value = _ref7.value,
        index = _ref7.index;
      emitEvent(this, "remove", {
        e: e,
        value: value,
        index: index
      });
    },
    renderArrows: function renderArrows() {
      var h = this.$createElement;
      var _this$useGlobalIcon = this.useGlobalIcon({
          ChevronLeftIcon: ChevronLeftIcon,
          ChevronRightIcon: ChevronRightIcon,
          AddIcon: AddIcon
        }),
        ChevronLeftIcon$1 = _this$useGlobalIcon.ChevronLeftIcon,
        ChevronRightIcon$1 = _this$useGlobalIcon.ChevronRightIcon,
        AddIcon$1 = _this$useGlobalIcon.AddIcon;
      return [h("div", {
        "ref": "leftOperationsZone",
        "class": ["".concat(this.classPrefix, "-tabs__operations"), "".concat(this.classPrefix, "-tabs__operations--left")]
      }, [h("transition", {
        "attrs": {
          "name": "fade",
          "mode": "out-in",
          "appear": true
        }
      }, [this.canToLeft ? h("div", {
        "ref": "leftIcon",
        "class": this.leftIconClass,
        "on": {
          "click": this.handleScrollToLeft
        }
      }, [h(ChevronLeftIcon$1)]) : null])]), h("div", {
        "ref": "rightOperationsZone",
        "class": ["".concat(this.classPrefix, "-tabs__operations"), "".concat(this.classPrefix, "-tabs__operations--right")]
      }, [h("transition", {
        "attrs": {
          "name": "fade",
          "mode": "out-in",
          "appear": true
        }
      }, [this.canToRight ? h("div", {
        "ref": "rightIcon",
        "class": this.rightIconClass,
        "on": {
          "click": this.handleScrollToRight
        }
      }, [h(ChevronRightIcon$1)]) : null]), this.addable ? h("div", {
        "class": this.addIconClass,
        "on": {
          "click": this.handleAddTab
        }
      }, [h(AddIcon$1)]) : null])];
    },
    renderNavs: function renderNavs() {
      var h = this.$createElement;
      return h("div", {
        "class": this.navContainerClass
      }, [h("div", {
        "class": this.navScrollContainerClass
      }, [h("div", {
        "ref": "navsWrap",
        "class": this.navsWrapClass,
        "style": this.wrapTransformStyle
      }, [this.renderNavBar(), this.navs])])]);
    },
    renderNavBar: function renderNavBar() {
      var h = this.$createElement;
      if (this.theme === "card") return null;
      return h("div", {
        "class": this.navBarClass,
        "style": this.navBarStyle
      });
    }
  },
  mounted: function mounted() {
    var _this11 = this;
    this.$nextTick(function () {
      _this11.watchDomChange();
      _this11.calculateNavBarStyle();
      _this11.calculateCanShowArrow();
    });
    setTimeout(function () {
      _this11.calculateMountedScrollLeft();
    });
  },
  render: function render() {
    var h = arguments[0];
    return h("div", {
      "ref": "navsContainer",
      "class": ["".concat(this.classPrefix, "-tabs__nav")],
      "style": this.navsContainerStyle
    }, [this.renderArrows(), this.renderNavs()]);
  }
});

export { TTabNav as default };
//# sourceMappingURL=tab-nav.js.map
