import React, { useState } from 'react';
import { useRequest } from '@@/plugin-request/request';
import { consultantList } from '@/services/cms';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.less';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { enquireScreen } from 'enquire-js';

let isMobile: any;
enquireScreen((b: any) => {
  isMobile = b;
});

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

  return (
    <div className="consultant">
      <div className="consultant-container">
        <div className="consultant-content">
          <div className="content1">高潜顾问</div>
        </div>
        <div className="consultant-details">
          <LeftOutlined
            className="content-nav"
            onClick={() => {
              swiper?.slidePrev();
            }}
          />
          <div className="swiper-wrapper">
            <Swiper
              spaceBetween={30}
              initialSlide={0}
              loop={true}
              slidesPerView={isMobile ? 1 : 4}
              onSlideChange={() => console.log('slide change')}
              onSwiper={(swiper) => {
                setSwiper(swiper);
              }}
            >
              {list?.records?.map((item, index) => {
                return (
                  <SwiperSlide key={item.id || index}>
                    <a href={`/partner?id=${item.id}`} className="col-md-4">
                      <div className="media">
                        <img src={item.photo}></img>
                      </div>

                      <div className="card-content">
                        <div className="content3">{item.cnName}</div>
                        <div className="content4">{item.title}</div>
                      </div>
                    </a>
                  </SwiperSlide>
                );
              })}
            </Swiper>
          </div>
          <RightOutlined
            className="content-nav"
            onClick={() => {
              swiper?.slideNext();
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default Consultant;
