import React, { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.less';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { enquireScreen } from 'enquire-js';
import { listCustomer } from '@/services/cms';
import { useRequest } from '@@/plugin-request/request';
let isMobile: any;
enquireScreen((b: any) => {
  isMobile = b;
});

const Customer: React.FC = () => {
  const [swiper, setSwiper] = useState<Swiper>();
  const { data: customerList } = useRequest(() => {
    return listCustomer(1, 100);
  });

  return (
    <div className="customer">
      <div className="customer-container">
        <div className="main-content">
          <div className="content1">客户声音</div>
          <div className="content2">
            10余年来，高潜服务并长期陪伴了多家大型集团及中小型企业，他们如是说...
          </div>
        </div>
        <div className="main-details">
          <LeftOutlined
            className="content-nav"
            onClick={() => {
              swiper?.slidePrev();
            }}
          />
          <div className="swiper-wrapper">
            <Swiper
              spaceBetween={30}
              initialSlide={0}
              loop={true}
              slidesPerGroup={isMobile ? 1 : 2}
              slidesPerView={isMobile ? 1 : 2}
              onSlideChange={() => console.log('slide change')}
              onSwiper={(swiper) => {
                setSwiper(swiper);
              }}
            >
              {customerList?.records?.map((item, index) => {
                return (
                  <SwiperSlide key={item.id || index}>
                    <div className="col-md-5">
                      <div className="card-item">
                        <div className="circle-box">
                          <img src={item.avatar}></img>
                        </div>
                        <div className="card-content">
                          <div className="group">
                            <div className="card-content1">{item.name}</div>
                            <div className="card-content2">{item.title}</div>
                          </div>
                          <div className="card-content3">{item.content}</div>
                        </div>
                      </div>
                    </div>
                  </SwiperSlide>
                );
              })}
            </Swiper>
          </div>
          <RightOutlined
            className="content-nav"
            onClick={() => {
              swiper?.slideNext();
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default Customer;
