import { Carousel } from 'antd';
import React, { useEffect, useState } from 'react';

import { Carouseld } from './styled';
interface CarouselProps {
  size: Record<string, any>;
  type: string;
  autoplay: boolean;
  autoplaySpeed: number;
  speed: number;
  data: Array<string>;
}

const Carousels = (props: CarouselProps) => {
  const {
    size = { width: 200, height: 50 },
    data = [
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/1db44d1f-a2fa-4036-9e88-c4c9ef445194.jpg',
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/1db44d1f-a2fa-4036-9e88-c4c9ef445194.jpg',
    ],
    type = 'fill1',
    autoplay,
    autoplaySpeed = 3,
    speed = 1,
  } = props;
  // 图片填充类型
  // const slidName = type
  const [slidName, setSlidName] = useState(type);

  // 轮播设置
  const slidSetting = {
    autoplay,
    autoplaySpeed: autoplaySpeed * 1000,
    speed: speed * 1000,
  };

  useEffect(() => {
    setSlidName(type);
  }, [data]);

  return (
    <Carouseld>
      <Carousel {...slidSetting} className="slid" style={size}>
        {data.map((item: any, index: number) => {
          return (
            <div key={index} className={slidName}>
              <img src={item} alt="" />
            </div>
          );
        })}
      </Carousel>
    </Carouseld>
  );
};
export default Carousels;