function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useMemo, useState, useEffect, forwardRef, useImperativeHandle } from "react";
import classNames from "classnames";
import { useDebounceFn } from "ahooks";
import ChevronLeft from "@pisell/icon/es/ChevronLeft";
import ChevronRight from "@pisell/icon/es/ChevronRight";
import "./index.less";

// tabs 子组件定义

// 定义主键类型

// Tabs 可传递的参数

var Tabs = function Tabs(_ref, ref) {
  var renderTab = _ref.renderTab,
    rowKey = _ref.rowKey,
    _ref$name = _ref.name,
    name = _ref$name === void 0 ? "tabs-" : _ref$name,
    onChange = _ref.onChange,
    tab = _ref.tab,
    className = _ref.className,
    options = _ref.options;
  var _useState = useState(true),
    _useState2 = _slicedToArray(_useState, 2),
    isShowButton = _useState2[0],
    setIsShowButton = _useState2[1];
  useImperativeHandle(ref, function () {
    return {
      scroll: function scroll(tab) {
        if (tab) {
          var dom = document.querySelector("#".concat(name).concat(tab));
          if (dom) {
            setTabScroll(dom === null || dom === void 0 ? void 0 : dom.offsetLeft);
          }
        }
      }
    };
  });
  /**
   * @Title: 改变tab事件
   * @Describe:
   * @Author: Wzw
   * @param {RowKey} _key
   */
  var _onChange = function _onChange(_key, _item, e) {
    // setScroll(_tab, _key);
    // 如果传入了tab 并且有onChange, 则调用onChange, 否则设置组件内部tab
    if (onChange) {
      onChange(_key, _item);
    }
    setTabScroll(e.target.offsetLeft);
  };
  useEffect(function () {
    if (options !== null && options !== void 0 && options.length) {
      calculateWidth();
    }
  }, [options]);

  /**
   * @title: 判断是否展示箭头
   * @description:
   * @return {*}
   * @Author: chensheng.gu
   * @Date: 2023-08-01 15:59
   */
  var calculateWidth = function calculateWidth() {
    var content = document.querySelector("#pisell-tabs");
    var itemList = document.querySelector("#pisell-tabs-content");
    if ((itemList === null || itemList === void 0 ? void 0 : itemList.offsetWidth) + 60 < (content === null || content === void 0 ? void 0 : content.offsetWidth)) {
      setIsShowButton(false);
    }
  };

  /**
   * @title: 选项
   * @description:
   * @param {*} useMemo
   * @return {*}
   * @Author: zhiwei.Wang
   * @Date: 2023-06-03 10:44
   */
  var _options = useMemo(function () {
    return options || [];
  }, [options]);

  // 左侧按钮宽度
  var _useState3 = useState(0),
    _useState4 = _slicedToArray(_useState3, 2),
    leftWidth = _useState4[0],
    setLeftWidth = _useState4[1];
  //右侧按钮宽度
  var _useState5 = useState(40),
    _useState6 = _slicedToArray(_useState5, 2),
    rightWidth = _useState6[0],
    setRightWidth = _useState6[1];

  // 防抖
  var debounceChange = useDebounceFn(function (_ref2) {
    var current = _ref2.current,
      total = _ref2.total;
    if (current === 0) {
      setLeftWidth(0);
    } else {
      setLeftWidth(40);
    }
    if (current + 10 >= total) {
      setRightWidth(0);
    } else {
      setRightWidth(40);
    }
  }, {
    wait: 200
  });

  // 滚动时触发
  var onScroll = function onScroll(e) {
    var total = e.target.scrollWidth - e.target.clientWidth;
    var current = e.target.scrollLeft;
    debounceChange.run({
      current: current,
      total: total
    });
  };

  // 设置滚动位置
  var setTabScroll = function setTabScroll(val) {
    var dom = document.querySelector("#pisell-tabs-content");
    console.log("domdom", dom);
    if (!dom) {
      return;
    }
    dom.scrollLeft = val;
  };

  /**
   * @title: 手动触发滚动位置
   * @description:
   * @param {*} type
   * @return {*}
   * @Author: zhiwei.Wang
   * @Date: 2023-06-03 10:45
   */
  var onPageChange = function onPageChange(type) {
    var dom = document.querySelector("#pisell-tabs-content");
    if (!dom) {
      return;
    }
    if (type === "left") {
      setTabScroll((dom === null || dom === void 0 ? void 0 : dom.scrollLeft) - dom.clientWidth / 2);
    } else {
      setTabScroll((dom === null || dom === void 0 ? void 0 : dom.scrollLeft) + dom.clientWidth / 2);
    }
  };

  // 左侧按钮
  var leftBtn = useMemo(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: "booking-pisell-tabs-btn-left",
      style: {
        width: leftWidth,
        marginLeft: !leftWidth ? "20px" : 0
      },
      onClick: function onClick() {
        onPageChange("left");
      }
    }, /*#__PURE__*/React.createElement(ChevronRight, {
      className: "booking-pisell-tabs-btn-icon"
    }));
  }, [leftWidth]);

  // 右侧按钮
  var rightBtn = useMemo(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: "booking-pisell-tabs-btn-right",
      style: {
        width: rightWidth,
        marginRight: !rightWidth ? "20px" : 0
      },
      onClick: function onClick() {
        onPageChange("right");
      }
    }, /*#__PURE__*/React.createElement(ChevronLeft, {
      type: "icona-iconArrowsLine",
      className: "booking-pisell-tabs-btn-icon"
    }));
  }, [rightWidth]);

  // 中间内容
  var content = useMemo(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: "booking-pisell-tabs-content",
      id: "pisell-tabs-content",
      onScroll: onScroll
    }, _options.map(function (d, i) {
      var _key = rowKey ? d[rowKey] : i;
      return /*#__PURE__*/React.createElement("div", {
        className: classNames("booking-pisell-tabs-tab", {
          "booking-pisell-tabs-tab-active": tab === _key
        }),
        key: _key,
        id: name + "" + _key,
        onClick: function onClick(e) {
          _onChange(_key, d, e);
        }
      }, renderTab ? renderTab(d) : /*#__PURE__*/React.createElement("div", {
        className: "booking-pisell-tabs-tab-content"
      }, d.name));
    }));
  }, [_options, rowKey, name, tab]);
  return /*#__PURE__*/React.createElement("div", {
    className: classNames("booking-pisell-tabs", className),
    id: "pisell-tabs"
  }, isShowButton && leftBtn, content, isShowButton && rightBtn);
};
export default /*#__PURE__*/forwardRef(Tabs);