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;
  series: Array<object>;
  data: Array<object>;
  background: string;
  textStyle: {
    color: string;
    fontSize: string;
    fontWeight: any;
    fontFamily: string;
  };
}

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

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

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

  useEffect(() => {
    if (data && data.length > 0) {
      setNewSeries(data);
    } else {
      setNewSeries(series);
    }
  }, [series, data]);

  return (
    <Carouseld>
      <Carousel {...slidSetting} className="slid" style={size}>
        {newSeries &&
          newSeries.length > 0 &&
          newSeries.map((item: any, index: number) => {
            return (
              <div key={index} className={slidName}>
                <img src={item?.value || item} alt="" />
                {item?.label ? (
                  <div
                    className="tip"
                    style={{
                      background: background,
                      color: textStyle?.color,
                      fontSize: textStyle?.fontSize,
                      fontWeight: textStyle?.fontWeight,
                      fontFamily: textStyle?.fontFamily,
                    }}
                  >
                    {item.label}
                  </div>
                ) : null}
              </div>
            );
          })}
      </Carousel>
    </Carouseld>
  );
};
export default Carousels;