/**
 * tdesign v0.32.0
 * (c) 2021 tdesign
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var Vue = require('vue');
var debounce = require('lodash/debounce');
var tdesignIconsVue = require('tdesign-icons-vue');
var config = require('../config.js');
var tabs_tabNavItem = require('./tab-nav-item.js');
var utils_event = require('../utils/event.js');
var utils_helper = require('../utils/helper.js');
var tabs_props = require('./props.js');
var utils_renderTnode = require('../utils/render-tnode.js');
require('../utils/ripple.js');
require('../utils/set-style.js');
require('./tab-panel-props.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('lodash/camelCase');
require('@babel/runtime/helpers/typeof');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);

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__default["default"](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 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++) {
    if (navs[i].componentOptions.propsData.value === value) {
      var _navs$i$componentInst;

      return (_navs$i$componentInst = navs[i].componentInstance) === null || _navs$i$componentInst === void 0 ? void 0 : _navs$i$componentInst.$el;
    }
  }

  return null;
};

var getRightCoverWidth = function getRightCoverWidth(p) {
  var rightOperationsZoneWidth = getDomWidth(p.rightZone);
  var rightIconWidth = getDomWidth(p.rightIcon);
  var wrapWidth = getDomWidth(p.wrap);

  if (Math.abs(p.totalWidthBeforeActiveTab + p.activeTabWidth - wrapWidth) < 1) {
    return rightOperationsZoneWidth - rightIconWidth;
  }

  return rightOperationsZoneWidth;
};

var TTabNav = Vue__default["default"].extend(_objectSpread(_objectSpread({
  name: "TTabNav",
  components: {
    TTabNavItem: tabs_tabNavItem["default"],
    TIconChevronLeft: tdesignIconsVue.ChevronLeftIcon,
    TIconChevronRight: tdesignIconsVue.ChevronRightIcon,
    TIconClose: tdesignIconsVue.CloseIcon,
    TIconAdd: tdesignIconsVue.AddIcon
  }
}, {
  resizeObserver: null
}), {}, {
  props: {
    theme: tabs_props["default"].theme,
    panels: {
      type: Array,
      "default": function _default() {
        return [];
      }
    },
    value: tabs_props["default"].value,
    placement: tabs_props["default"].placement,
    size: tabs_props["default"].size,
    disabled: tabs_props["default"].disabled,
    addable: tabs_props["default"].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(tabs_tabNavItem["default"], {
          "ref": "tabItem".concat(index),
          "key": panel.value,
          "attrs": {
            "index": index,
            "theme": _this.theme,
            "size": _this.size,
            "placement": _this.placement,
            "label": utils_renderTnode.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: "translate3d(".concat(-this.scrollLeft, "px, 0, 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__default["default"](_ref, "".concat(config.prefix, "-tabs__btn"), true), _defineProperty__default["default"](_ref, "".concat(config.prefix, "-size-m"), this.size === "medium"), _defineProperty__default["default"](_ref, "".concat(config.prefix, "-size-l"), this.size === "large"), _ref;
    },
    leftIconClass: function leftIconClass() {
      return _objectSpread(_defineProperty__default["default"]({}, "".concat(config.prefix, "-tabs__btn--left"), true), this.iconBaseClass);
    },
    rightIconClass: function rightIconClass() {
      return _objectSpread(_defineProperty__default["default"]({}, "".concat(config.prefix, "-tabs__btn--right"), true), this.iconBaseClass);
    },
    addIconClass: function addIconClass() {
      return _objectSpread(_defineProperty__default["default"]({}, "".concat(config.prefix, "-tabs__add-btn"), true), this.iconBaseClass);
    },
    navContainerClass: function navContainerClass() {
      var _ref2;

      return _ref2 = {}, _defineProperty__default["default"](_ref2, "".concat(config.prefix, "-tabs__nav-container"), true), _defineProperty__default["default"](_ref2, "".concat(config.prefix, "-tabs__nav--card"), this.theme === "card"), _defineProperty__default["default"](_ref2, "".concat(config.prefix, "-is-").concat(this.placement), true), _defineProperty__default["default"](_ref2, "".concat(config.prefix, "-is-addable"), this.theme === "card" && this.addable), _ref2;
    },
    navScrollContainerClass: function navScrollContainerClass() {
      var _ref3;

      return _ref3 = {}, _defineProperty__default["default"](_ref3, "".concat(config.prefix, "-tabs__nav-scroll"), true), _defineProperty__default["default"](_ref3, "".concat(config.prefix, "-is-scrollable"), this.canToLeft || this.canToRight), _ref3;
    },
    navsWrapClass: function navsWrapClass() {
      return ["".concat(config.prefix, "-tabs__nav-wrap"), "".concat(config.prefix, "-is-smooth"), _defineProperty__default["default"]({}, "".concat(config.prefix, "-is-vertical"), this.placement === "left" || this.placement === "right")];
    },
    navBarClass: function navBarClass() {
      return ["".concat(config.prefix, "-tabs__bar"), "".concat(config.prefix, "-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.caculateCanShowArrow();
      });
    },
    dataCanUpdateNavBarStyle: function dataCanUpdateNavBarStyle() {
      var _this3 = this;

      this.$nextTick(function () {
        _this3.caculateNavBarStyle();
      });
    },
    value: function value() {
      var _this4 = this;

      this.$nextTick(function () {
        _this4.moveActiveTabIntoView();
      });
    },
    navs: function navs() {
      var _this5 = this;

      this.$nextTick(function () {
        _this5.fixScrollLeft();
      });
    }
  },
  methods: {
    caculateCanShowArrow: function caculateCanShowArrow() {
      this.caculateCanToLeft();
      this.caculateCanToRight();
    },
    caculateCanToLeft: function caculateCanToLeft() {
      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 > -(leftOperationsZoneWidth - leftIconWidth);
    },
    caculateCanToRight: function caculateCanToRight() {
      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;
      }

      this.canToRight = this.scrollLeft + getDomWidth(container) - getDomWidth(wrap) < -1;
    },
    caculateNavBarStyle: function caculateNavBarStyle() {
      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__default["default"](_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(utils_helper.firstUpperCase(sizePropName))]) || 0;
        }

        if (!_this6.navs[i]) return {};
        return _ref5 = {}, _defineProperty__default["default"](_ref5, offsetPropName, "".concat(offset, "px")), _defineProperty__default["default"](_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(utils_helper.firstUpperCase(sizePropName))]) || 0, "px")), _ref5;
      };

      this.navBarStyle = getNavBarStyle();
    },
    watchDomChange: function watchDomChange() {
      var _this7 = this;

      if (!this.$refs.navsContainer) return;
      if (!window.ResizeObserver) return;
      this.resizeObserver = new window.ResizeObserver(function () {
        _this7.resetScrollPosition();
      });
      this.resizeObserver.observe(this.$refs.navsContainer);
    },
    cancelWatchDomChange: function cancelWatchDomChange() {
      if (!this.resizeObserver) return;
      this.resizeObserver.disconnect();
    },
    resetScrollPosition: debounce__default["default"](function () {
      this.caculateCanShowArrow();
    }, 300),
    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 getLeftCoverWidth = function getLeftCoverWidth() {
        var leftOperationsZoneWidth = getDomWidth(_this8.$refs.leftOperationsZone);
        var leftIconWidth = getDomWidth(_this8.$refs.leftIcon);

        if (totalWidthBeforeActiveTab === 0) {
          return leftOperationsZoneWidth - leftIconWidth;
        }

        return leftOperationsZoneWidth;
      };

      var leftCoverWidth = getLeftCoverWidth();

      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) {
      utils_event.emitEvent(this, "add", {
        e: e
      });
    },
    tabClick: function tabClick(event, nav) {
      var value = nav.value,
          disabled = nav.disabled;

      if (disabled || this.value === value) {
        return false;
      }

      utils_event.emitEvent(this, "change", value);
    },
    removeBtnClick: function removeBtnClick(_ref7) {
      var e = _ref7.e,
          value = _ref7.value,
          index = _ref7.index;
      utils_event.emitEvent(this, "remove", {
        e: e,
        value: value,
        index: index
      });
    },
    renderArrows: function renderArrows() {
      var h = this.$createElement;
      return [h("div", {
        "ref": "leftOperationsZone",
        "class": ["".concat(config.prefix, "-tabs__operations"), "".concat(config.prefix, "-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(tdesignIconsVue.ChevronLeftIcon)]) : null])]), h("div", {
        "ref": "rightOperationsZone",
        "class": ["".concat(config.prefix, "-tabs__operations"), "".concat(config.prefix, "-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(tdesignIconsVue.ChevronRightIcon)]) : null]), this.theme === "card" && this.addable ? h("div", {
        "class": this.addIconClass,
        "on": {
          "click": this.handleAddTab
        }
      }, [h(tdesignIconsVue.AddIcon)]) : 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.caculateNavBarStyle();

      _this11.caculateCanShowArrow();
    });
  },
  beforeDestroy: function beforeDestroy() {
    this.cancelWatchDomChange();
  },
  render: function render() {
    var h = arguments[0];
    return h("div", {
      "ref": "navsContainer",
      "class": ["".concat(config.prefix, "-tabs__nav")],
      "style": this.navsContainerStyle
    }, [this.renderArrows(), this.renderNavs()]);
  }
}));

exports["default"] = TTabNav;
//# sourceMappingURL=tab-nav.js.map
