import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
import { jsx } from 'react/jsx-runtime';
import React__default from 'react';
import SlickCarousel from 'react-slick';
import clsx from 'clsx';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/typeof-498dd2b1.js';

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/2/28 上午11:01\n* @description Carousel\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-carousel {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  line-height: 1.5715;\n  list-style: none;\n}\n.paraui-v3-carousel .slick-slider {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  touch-action: pan-y;\n  -webkit-touch-callout: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.paraui-v3-carousel .slick-list {\n  position: relative;\n  display: block;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n}\n.paraui-v3-carousel .slick-list:focus {\n  outline: none;\n}\n.paraui-v3-carousel .slick-list.dragging {\n  cursor: pointer;\n}\n.paraui-v3-carousel .slick-list .slick-slide {\n  pointer-events: none;\n}\n.paraui-v3-carousel .slick-list .slick-slide input.ant-radio-input,\n.paraui-v3-carousel .slick-list .slick-slide input.ant-checkbox-input {\n  visibility: hidden;\n}\n.paraui-v3-carousel .slick-list .slick-slide.slick-active {\n  pointer-events: auto;\n}\n.paraui-v3-carousel .slick-list .slick-slide.slick-active input.ant-radio-input,\n.paraui-v3-carousel .slick-list .slick-slide.slick-active input.ant-checkbox-input {\n  visibility: visible;\n}\n.paraui-v3-carousel .slick-list .slick-slide > div > div {\n  vertical-align: bottom;\n}\n.paraui-v3-carousel .slick-slider .slick-track,\n.paraui-v3-carousel .slick-slider .slick-list {\n  transform: translate3d(0, 0, 0);\n  touch-action: pan-y;\n}\n.paraui-v3-carousel .slick-track {\n  position: relative;\n  top: 0;\n  left: 0;\n  display: block;\n}\n.paraui-v3-carousel .slick-track::before,\n.paraui-v3-carousel .slick-track::after {\n  display: table;\n  content: \"\";\n}\n.paraui-v3-carousel .slick-track::after {\n  clear: both;\n}\n.paraui-v3-carousel .slick-slide {\n  display: none;\n  float: left;\n  height: 100%;\n  min-height: 1px;\n}\n.paraui-v3-carousel .slick-slide img {\n  display: block;\n}\n.paraui-v3-carousel .slick-slide.slick-loading img {\n  display: none;\n}\n.paraui-v3-carousel .slick-slide.dragging img {\n  pointer-events: none;\n}\n.paraui-v3-carousel .slick-initialized .slick-slide {\n  display: block;\n}\n.paraui-v3-carousel .slick-loading .slick-slide {\n  visibility: hidden;\n}\n.paraui-v3-carousel .slick-vertical .slick-slide {\n  display: block;\n  height: auto;\n}\n.paraui-v3-carousel .slick-arrow.slick-hidden {\n  display: none;\n}\n.paraui-v3-carousel .slick-prev,\n.paraui-v3-carousel .slick-next {\n  position: absolute;\n  top: 50%;\n  display: block;\n  width: 20px;\n  height: 20px;\n  margin-top: -10px;\n  padding: 0;\n  color: transparent;\n  font-size: 0;\n  line-height: 0;\n  background: transparent;\n  border: 0;\n  outline: none;\n  cursor: pointer;\n}\n.paraui-v3-carousel .slick-prev:hover,\n.paraui-v3-carousel .slick-next:hover,\n.paraui-v3-carousel .slick-prev:focus,\n.paraui-v3-carousel .slick-next:focus {\n  color: transparent;\n  background: transparent;\n  outline: none;\n}\n.paraui-v3-carousel .slick-prev:hover::before,\n.paraui-v3-carousel .slick-next:hover::before,\n.paraui-v3-carousel .slick-prev:focus::before,\n.paraui-v3-carousel .slick-next:focus::before {\n  opacity: 1;\n}\n.paraui-v3-carousel .slick-prev.slick-disabled::before,\n.paraui-v3-carousel .slick-next.slick-disabled::before {\n  opacity: 0.25;\n}\n.paraui-v3-carousel .slick-prev {\n  left: -25px;\n}\n.paraui-v3-carousel .slick-prev::before {\n  content: \"←\";\n}\n.paraui-v3-carousel .slick-next {\n  right: -25px;\n}\n.paraui-v3-carousel .slick-next::before {\n  content: \"→\";\n}\n.paraui-v3-carousel .slick-dots {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 15;\n  display: flex !important;\n  justify-content: center;\n  margin-right: 15%;\n  margin-left: 15%;\n  padding-left: 0;\n  list-style: none;\n}\n.paraui-v3-carousel .slick-dots-bottom {\n  bottom: 12px;\n}\n.paraui-v3-carousel .slick-dots-top {\n  top: 12px;\n  bottom: auto;\n}\n.paraui-v3-carousel .slick-dots li {\n  position: relative;\n  display: inline-block;\n  flex: 0 1 auto;\n  box-sizing: content-box;\n  width: 16px;\n  height: 3px;\n  margin: 0 2px;\n  margin-right: 3px;\n  margin-left: 3px;\n  padding: 0;\n  text-align: center;\n  text-indent: -999px;\n  vertical-align: top;\n  transition: all 0.5s;\n}\n.paraui-v3-carousel .slick-dots li button {\n  display: block;\n  width: 100%;\n  height: 3px;\n  padding: 0;\n  color: transparent;\n  font-size: 0;\n  background: rgb(255, 255, 255);\n  border: 0;\n  border-radius: 1px;\n  outline: none;\n  cursor: pointer;\n  opacity: 0.3;\n  transition: all 0.5s;\n}\n.paraui-v3-carousel .slick-dots li button:hover,\n.paraui-v3-carousel .slick-dots li button:focus {\n  opacity: 0.75;\n}\n.paraui-v3-carousel .slick-dots li.slick-active {\n  width: 24px;\n}\n.paraui-v3-carousel .slick-dots li.slick-active button {\n  background: rgb(255, 255, 255);\n  opacity: 1;\n}\n.paraui-v3-carousel .slick-dots li.slick-active:hover,\n.paraui-v3-carousel .slick-dots li.slick-active:focus {\n  opacity: 1;\n}\n.paraui-v3-carousel .slick-loading .paraui-v3-carousel .slick-track {\n  visibility: hidden;\n}\n.paraui-v3-carousel-vertical .slick-dots {\n  top: 50%;\n  bottom: auto;\n  flex-direction: column;\n  width: 3px;\n  height: auto;\n  margin: 0;\n  transform: translateY(-50%);\n}\n.paraui-v3-carousel-vertical .slick-dots-left {\n  right: auto;\n  left: 12px;\n}\n.paraui-v3-carousel-vertical .slick-dots-right {\n  right: 12px;\n  left: auto;\n}\n.paraui-v3-carousel-vertical .slick-dots li {\n  width: 3px;\n  height: 16px;\n  margin: 4px 2px;\n  vertical-align: baseline;\n}\n.paraui-v3-carousel-vertical .slick-dots li button {\n  width: 3px;\n  height: 16px;\n}\n.paraui-v3-carousel-vertical .slick-dots li.slick-active {\n  width: 3px;\n  height: 24px;\n}\n.paraui-v3-carousel-vertical .slick-dots li.slick-active button {\n  width: 3px;\n  height: 24px;\n}\n.paraui-v3-carousel-rtl {\n  direction: rtl;\n}\n.paraui-v3-carousel-rtl .paraui-v3-carousel .slick-track {\n  right: 0;\n  left: auto;\n}\n.paraui-v3-carousel-rtl .paraui-v3-carousel .slick-prev {\n  right: -25px;\n  left: auto;\n}\n.paraui-v3-carousel-rtl .paraui-v3-carousel .slick-prev::before {\n  content: \"→\";\n}\n.paraui-v3-carousel-rtl .paraui-v3-carousel .slick-next {\n  right: auto;\n  left: -25px;\n}\n.paraui-v3-carousel-rtl .paraui-v3-carousel .slick-next::before {\n  content: \"←\";\n}\n.paraui-v3-carousel-rtl.paraui-v3-carousel .slick-dots {\n  flex-direction: row-reverse;\n}\n.paraui-v3-carousel-rtl.paraui-v3-carousel-vertical .slick-dots {\n  flex-direction: column;\n}";
styleInject(css_248z);

//Carousel
var Carousel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
  var _props$dots = props.dots,
    dots = _props$dots === void 0 ? true : _props$dots,
    _props$arrows = props.arrows,
    arrows = _props$arrows === void 0 ? false : _props$arrows,
    _props$draggable = props.draggable,
    draggable = _props$draggable === void 0 ? false : _props$draggable,
    _props$dotPosition = props.dotPosition,
    dotPosition = _props$dotPosition === void 0 ? 'bottom' : _props$dotPosition,
    className = props.className,
    restProps = __rest(props, ["dots", "arrows", "draggable", "dotPosition", "className"]);
  var slickRef = React__default.useRef();
  //切换到指定面板
  var goTo = function goTo(slide) {
    var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    slickRef.current.slickGoTo(slide, dontAnimate);
  };
  //ref 绑定实例方法
  React__default.useImperativeHandle(ref, function () {
    return {
      goTo: goTo,
      prev: slickRef.current.slickPrev,
      next: slickRef.current.slickNext,
      play: slickRef.current.slickPlay,
      pause: slickRef.current.slickPause
    };
  }, [slickRef.current]);
  //节点数量
  var prevCount = React__default.useRef(React__default.Children.count(props.children));
  React__default.useEffect(function () {
    if (prevCount.current !== React__default.Children.count(props.children)) {
      goTo(props.initialSlide || 0, false);
      prevCount.current = React__default.Children.count(props.children);
    }
  }, [props.children]);
  var newProps = Object.assign({}, restProps);
  //动画效果
  if (newProps.effect === 'fade') {
    newProps.fade = true;
  }
  var prefixCls = "".concat($prefixCls, "-carousel");
  var dotsClass = 'slick-dots';
  newProps.vertical = dotPosition === 'left' || dotPosition === 'right';
  //启用dots
  var enableDots = !!dots;
  //dots cls
  var dsClass = clsx(dotsClass, "".concat(dotsClass, "-").concat(dotPosition), typeof dots === 'boolean' ? false : dots === null || dots === void 0 ? void 0 : dots.className);
  //组件cls
  var cls = clsx(prefixCls, className, _defineProperty({}, "".concat(prefixCls, "-vertical"), newProps.vertical));
  return jsx("div", Object.assign({
    className: cls
  }, {
    children: jsx(SlickCarousel, Object.assign({
      ref: slickRef
    }, newProps, {
      dots: enableDots,
      dotsClass: dsClass,
      arrows: arrows,
      draggable: draggable
    }))
  }));
});

export { Carousel, Carousel as default };
