import React from "react";
import { Col, Row, Tabs, Pagination, Image, Typography, Divider } from "antd";
import Layout from "../../Layout";
import { HeaderImg } from "../Solution";
import '../style/news.less';
import { FootImg } from "../../App";
import LeftImg1 from '../../static/web/org/bsns/2.jpg';
import LeftImg2 from '../../static/web/org/bsns/1.jpg';
import LeftImg3 from '../../static/web/org/bsns/3.jpg';
import LeftImg4 from '../../static/web/org/bsns/6.jpg';
import LeftImg5 from '../../static/web/org/bsns/9.jpg';
import LeftImg6 from '../../static/web/org/bsns/10.jpg';
import LeftImg7 from '../../static/web/org/bsns/5.jpg';
import LeftImg8 from '../../static/web/org/bsns/7.jpg';
import { useNavigate } from "react-router-dom";

const { Paragraph, Text, Title } = Typography;
const News_items = [
    '新闻资讯',
    '行业资讯',
    '知识百科',
];
const leftImages = [
    LeftImg1,
    LeftImg2,
    LeftImg3,
    LeftImg4,
    LeftImg5,
    LeftImg6
];
const rightImages = [
    LeftImg3,
    LeftImg7,
    LeftImg8,
    LeftImg5,
    LeftImg6
];

const LeftTabs = (props) => {
    return <div className="news_list" onClick={props.onClick}>
        <Row>
            <Col span={7}>
                <Image src={leftImages[props.num]} preview={false} />
            </Col>
            <Col span={14} offset={1}>
                <Title level={5} ellipsis={{
                    rows: 1
                }}>标题占位标题占位标题占位标题占位标题占位标题占位</Title>
                <Paragraph ellipsis={{
                    rows: 2
                }}>标题占位标题占位标题占位标题占位标题占位标题占位标题占位标题占位标题占位标题占位标题占位标题占位标题占位位标题占位</Paragraph>
                <Paragraph>2023/6/6</Paragraph>
            </Col>
        </Row>
    </div>
}
const RightTabs = (props) => <Row>
    <Col span={8}>
        <Image src={rightImages[props.num]} preview={false} />
    </Col>
    <Col span={14} offset={2}>
        <Title level={5} ellipsis={{
            rows: 1
        }}>标题占位标题占位标题占位标题占位标题占位标题占位</Title>
        <Paragraph>2023/6/6</Paragraph>
    </Col>
    <Divider />
</Row>
export const RightCol = () => <Col span={7} offset={1}>
    <div className="news_recommend">
        <Title level={4}>推荐文章</Title>
        {new Array(5).fill(null).map((_, i) => <RightTabs key={i} num={i} />)}
    </div>
    <div className="recommend_tags">
        <Row justify='space-between'>
            <Col><Title level={4}>推荐标签</Title></Col>
            <Col><Text>查看更多</Text></Col>
        </Row>
        <Row gutter={[16, 16]}>
            {new Array(6).fill(null).map((_, i) => <Col key={i.toString()} span={8}>
                <div className="span">标签占位</div>
            </Col>)}

        </Row>
    </div>
</Col>

const News = () => {
    const navigator = useNavigate();
    const ToDetail = (value) => {
        navigator('/news/detail', { state: value });
    }
    return (
        <Layout>
            <HeaderImg />
            <div className="news_tabs">
                <Tabs
                    defaultActiveKey="1"
                    centered
                    tabBarGutter={0}
                    items={News_items.map((item, i) => {
                        const id = String(i + 1);
                        return {
                            label: item,
                            key: id,
                            children: <>
                                <Row className='news_container'>
                                    <Col span={16} style={{ textAlign: 'center' }}>
                                        {new Array(6).fill(null).map((_, index) => <LeftTabs key={index}
                                            onClick={() => ToDetail(String(item + 1))} num={index}
                                        />)}
                                        <Pagination defaultCurrent={1} total={50} />
                                    </Col>
                                    <RightCol />
                                </Row>
                            </>,
                        };
                    })}
                />
            </div>
            <FootImg />
        </Layout>
    )
}

export default News;