import React, { useState } from "react";
import Layout from "../Layout";
import { HeaderImg } from "./Solution";
import { Tabs, Pagination, Row } from 'antd';
import { ImgMap } from "../App";
import { useNavigate } from "react-router-dom";
import './style/case.less';

const TabsItems = [
    '经营业',
    '制造业',
    '连锁业',
    '互联网',
    '门店',
    '机械重工',
    '光谷电力',
]

const Case = () => {
    const [current, setCurrent] = useState(1);
    const navigator = useNavigate();
    const ToDetail = (value) => {
        navigator('/case/detail', { state: value });
    }
    const onChange = (page) => {
        setCurrent(page);
    }
    return (<>
        <Layout>
            {<HeaderImg />}
            <div className="client_case">
                <div className="title">客户案例</div>
                <Tabs
                    defaultActiveKey="1"
                    centereds='true'
                    popupClassName='more_list'
                    items={TabsItems.map((item, i) => {
                        return {
                            label: item,
                            key: i,
                            children: <>
                                <ImgMap onClick={() => ToDetail(Math.floor(Math.random() * 20) + 1)} />
                                <ImgMap onClick={() => ToDetail(Math.floor(Math.random() * 20) + 1)} />
                                <ImgMap onClick={() => ToDetail(Math.floor(Math.random() * 20) + 1)} />
                            </>,
                        };
                    })}
                />
            </div>
            <div className="pagination">
                <Row justify='center'>
                    <Pagination
                        current={current}
                        onChange={onChange}
                        total={50} />
                </Row>
            </div>
        </Layout>
    </>)
};

export default Case;