import React, { useState } from "react";
import { Carousel } from 'antd';
import '../asstes/css/Example.css'
import Carousel1_1 from '../asstes/img/CocoPi2/卡片.png';
import Carousel1_2 from '../asstes/img/CocoPi2/卡片-1.png';
import Carousel1_3 from '../asstes/img/CocoPi2/卡片-2.png';
import Carousel1_4 from '../asstes/img/CocoPi2/卡片-3.png';
import Carousel1_5 from '../asstes/img/CocoPi2/卡片-12.png';
import Carousel1_6 from '../asstes/img/CocoPi2/卡片-14.png';
import Carousel1_7 from '../asstes/img/CocoPi2/卡片-13.png';
import Carousel1_8 from '../asstes/img/CocoPi2/卡片-15.png';
import Carousel2_1 from '../asstes/img/CocoPi2/卡片-4.png';
import Carousel2_2 from '../asstes/img/CocoPi2/卡片-6.png';
import Carousel2_3 from '../asstes/img/CocoPi2/卡片-5.png';
import Carousel2_4 from '../asstes/img/CocoPi2/卡片-7.png';
import Carousel2_5 from '../asstes/img/CocoPi2/卡片-16.png';
import Carousel2_6 from '../asstes/img/CocoPi2/卡片-18.png';
import Carousel2_7 from '../asstes/img/CocoPi2/卡片-17.png';
import Carousel2_8 from '../asstes/img/CocoPi2/卡片-19.png';
import Carousel3_1 from '../asstes/img/CocoPi2/卡片-8.png';
import Carousel3_2 from '../asstes/img/CocoPi2/卡片-10.png';
import Carousel3_3 from '../asstes/img/CocoPi2/卡片-9.png';
import Carousel3_4 from '../asstes/img/CocoPi2/卡片-11.png';
import Carousel3_5 from '../asstes/img/CocoPi2/卡片-20.png';
import Carousel3_6 from '../asstes/img/CocoPi2/卡片-22.png';
import Carousel3_7 from '../asstes/img/CocoPi2/卡片-21.png';
import Carousel3_8 from '../asstes/img/CocoPi2/卡片-23.png';

import img1 from '../asstes/img/初级1.png';
import img3 from '../asstes/img/中级1.png';
// import img4 from '../asstes/img/中级2.png';
import img5 from '../asstes/img/高级1.png';
// import img6 from '../asstes/img/高级2.png';

import biArrowLeft from '../asstes/img/bi_arrow_left.png';
import biArrowRight from '../asstes/img/bi_arrow_right.png';



const carouselRef = React.createRef();
function Example() {
    const [state1, setState1] = useState(0);
    const [imgSrc, setImgSrc] = useState(img1)
    const onChange = (e) => {
        setState1(e)
        if (e === 0 || e === 1) {
            setImgSrc(img1)
        } else if (e === 2 || e === 3) {
            setImgSrc(img3)
        } else if (e === 4 || e === 5) {
            setImgSrc(img5)
        }
    };
    const switchClickState = (type) => {
        let a = state1
        if (type === 'prev') {
            if (state1 === 0) {
                a = 5
            } else {
                a = a-1
            }
        } else {
            if (state1 === 5) {
                a = 0
            } else {
                a = a + 1
            }
        }
        carouselRef.current.goTo(a);
    }
    return (
        <div className="Example">
            <h1>课程案例</h1>
            <div className="Example_content">
                <div className="img_title">
                    <img src={imgSrc} alt="" />
                </div>
                <img onClick={() => switchClickState("prev")} className="bi_arrow_left" src={biArrowLeft} alt="left" />
                <img onClick={() => switchClickState("next")} className="bi_arrow_right" src={biArrowRight} alt="left" />
                <Carousel arrow={true} infinite afterChange={onChange} slideNumber={state1} ref={carouselRef}
                    arrowOffset={16} arrowSize={16}>
                    <div className="contentStyle">
                        <img src={Carousel1_1} alt="" />
                        <img src={Carousel1_3} alt="" />
                        <img src={Carousel1_2} alt="" />
                        <img src={Carousel1_4} alt="" />
                    </div>
                    <div className="contentStyle">
                        <img src={Carousel1_5} alt="" />
                        <img src={Carousel1_6} alt="" />
                        <img src={Carousel1_7} alt="" />
                        <img src={Carousel1_8} alt="" />
                    </div>
                    <div className="contentStyle">
                        <img src={Carousel2_1} alt="" />
                        <img src={Carousel2_2} alt="" />
                        <img src={Carousel2_3} alt="" />
                        <img src={Carousel2_4} alt="" />
                    </div>
                    <div className="contentStyle">
                        <img src={Carousel2_5} alt="" />
                        <img src={Carousel2_6} alt="" />
                        <img src={Carousel2_7} alt="" />
                        <img src={Carousel2_8} alt="" />
                    </div>
                    <div className="contentStyle">
                        <img src={Carousel3_1} alt="" />
                        <img src={Carousel3_2} alt="" />
                        <img src={Carousel3_3} alt="" />
                        <img src={Carousel3_4} alt="" />
                    </div>
                    <div className="contentStyle">
                        <img src={Carousel3_5} alt="" />
                        <img src={Carousel3_6} alt="" />
                        <img src={Carousel3_7} alt="" />
                        <img src={Carousel3_8} alt="" />
                    </div>
                </Carousel>
            </div>
        </div>
    )
}

export default Example;