import React, { useEffect } from 'react';
import './index.less';
import { Carousel, Col, Divider, List, Row } from 'antd';
import * as echarts from 'echarts';
import topic_header from '@/assets/topic/topic_header.jpg'
import topic_activity_logo from '@/assets/topic/topic_activity_logo.png'
import topic_red_flag from '@/assets/topic/topic_red_flag.png'
import topic_other from '@/assets/topic/topic_other.png'
import topic_example1 from '@/assets/topic/topic_example1.jpg'
import topic_example2 from '@/assets/topic/topic_example2.jpg'
import topic_example3 from '@/assets/topic/topic_example3.jpg'
import topic_example4 from '@/assets/topic/topic_example4.jpg'
import topic_example5 from '@/assets/topic/topic_example5.jpg'
import topic_example6 from '@/assets/topic/topic_example6.jpg'
import topic_project_picture from '@/assets/topic/topic_project_picture.jpg'
import topic_bottom_button from '@/assets/topic/topic_bottom_button.png'
import topic_right_material from '@/assets/topic/topic_right_material.png'
import topic_partymember from '@/assets/topic/topic_partymember.png'
import topic_partybranch from '@/assets/topic/topic_partybranch.png'
import topic_totalamount from '@/assets/topic/topic_totalamount.png'
import topic_totalnumber from '@/assets/topic/topic_totalnumber.png'
import topic_commodity from '@/assets/topic/topic_commodity.png'
import topic_protocol from '@/assets/topic/topic_protocol.png'
import topic_banner1 from '@/assets/topic/topic_banner1.jpg'

const LeftCardTop = (props: any) => {
    return (
        <>
            <div className='left-card-top'>
                <div>
                    <span className='left-card-title'>{props.title}</span>
                    <img src={topic_red_flag} className='left-card-flag' />
                </div>
                <div>
                    <span className='left-card-other'>更多</span>
                    <img src={topic_other} className='left-card-otherimg' />
                </div>
            </div>
            <Divider className='left-card-divider' />
        </>
    )
}

const RightDisplayTitle = (props: any) => {
    return (
        <div className='right-display-title'>
            {props.title}
        </div>
    )
}

const RightDisplayContent = (props: any) => {
    return (
        <div className='right-display-content'>
            <img src={right_data[props.type].img} className='right-display-content-img' />
            <div className='right-display-content-right'>
                <div className='right-display-content-title'>
                    <span>{right_data[props.type].name}</span>
                    {right_data[props.type].type != null && <span className='right-display-content-percentage'>
                        <span>同比</span>
                        {right_data[props.type].type == 1 ? (
                            <span className='right-display-content-percentage-increase'>{right_data[props.type].percentage}% ↑</span>
                        ) : (
                            <span className='right-display-content-percentage-reduce'>{right_data[props.type].percentage}% ↓</span>
                        )}
                    </span>}
                </div>
                <div className='right-display-content-content'>
                    <span className={`right-display-content-number ${props.color}`}>{right_data[props.type].number}</span>
                    <span className='right-display-content-unit'>{right_data[props.type].unit}</span>
                </div>
            </div>
        </div>
    )
}

const RightGraphContent = (props: any) => {
    const random = Math.random().toString();
    useEffect(() => {
        type EChartsOption = echarts.EChartsOption;
        const chartDom = document.getElementById(random)!;
        const myChart = echarts.init(chartDom);
        const option: EChartsOption = {
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: props.name,
                    type: 'pie',
                    radius: '90%',
                    color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4'],
                    data: props.data,
                    label: {
                        formatter: props.type == 1 ? '{b}\n\n{c}件 {d}%' : '{b}',
                        fontSize: 12,
                        color: '#fff',
                        position: 'inner',
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }, [])
    return (
        <div id={random} style={{ width: '100%', height: '100%' }}></div>
    )
}

const example_list = [
    {
        img: topic_example1,
        text: '支队领导带领党员民警参观5G创新中心'
    },
    {
        img: topic_example2,
        text: '支队领导带领党员民警参观5G创新中心'
    },
    {
        img: topic_example3,
        text: '支队领导带领党员民警参观5G创新中心'
    },
    {
        img: topic_example4,
        text: '支队领导带领党员民警参观5G创新中心'
    },
    {
        img: topic_example5,
        text: '支队领导带领党员民警参观5G创新中心'
    },
    {
        img: topic_example6,
        text: '支队领导带领党员民警参观5G创新中心'
    },
]

const listData = [
    {
        title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
        time: '05-25 16:19',
    },
    {
        title: '喜报｜联通智慧党建产品，荣获国家级创新大赛一等奖',
        time: '05-25 16:19',
    },
    {
        title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
        time: '05-25 16:19',
    },
    {
        title: '喜报｜联通智慧党建产品，荣获国家级创新大赛一等奖',
        time: '05-25 16:19',
    },
    {
        title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
        time: '05-25 16:19',
    },
    {
        title: '喜报｜联通智慧党建产品，荣获国家级创新大赛一等奖',
        time: '05-25 16:19',
    },
    {
        title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
        time: '05-25 16:19',
    },
    {
        title: '喜报｜联通智慧党建产品，荣获国家级创新大赛一等奖',
        time: '05-25 16:19',
    },
    {
        title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
        time: '05-25 16:19',
    },
    {
        title: '喜报｜联通智慧党建产品，荣获国家级创新大赛一等奖',
        time: '05-25 16:19',
    },
    {
        title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
        time: '05-25 16:19',
    },
    {
        title: '喜报｜联通智慧党建产品，荣获国家级创新大赛一等奖',
        time: '05-25 16:19',
    },
];

const length = ['集团', '北京分公司', '山东分公司'];
const card_length = [1, 2, 3, 4];

const right_data = {
    partymember: {
        name: '党员数量',
        img: topic_partymember,
        number: 1275,
        unit: '个',
        type: null,
        percentage: null,
    },
    partybranch: {
        name: '党支部数量',
        img: topic_partybranch,
        number: 75,
        unit: '个',
        type: null,
        percentage: null,
    },
    totalamount: {
        name: '订单交易总额',
        img: topic_totalamount,
        number: 274.5,
        unit: '亿元',
        type: 1,
        percentage: 0.9,
    },
    totalnumber: {
        name: '订单总数量',
        img: topic_totalnumber,
        number: 1297,
        unit: '个',
        type: 1,
        percentage: 0.9,
    },
    commodity: {
        name: '商品数量',
        img: topic_commodity,
        number: 76321,
        unit: '件',
        type: 1,
        percentage: 1.9,
    },
    protocol: {
        name: '协议数量',
        img: topic_protocol,
        number: 257,
        unit: '个',
        type: 0,
        percentage: 0.7,
    },
}

const right_graph_data = [
    {
        name: '物资采购计划',
        sub: '总采购数量',
        type: 1,
        number: 22324,
        unit: '件',
        data: [
            { value: 1421, name: '已完成数量' },
            { value: 2369, name: '进行中数量' },
        ],
    },
    {
        name: '攻坚克难项目',
        sub: '总课题数量',
        type: 1,
        number: 223,
        unit: '个',
        data: [
            { value: 165, name: '已完成数量' },
            { value: 265, name: '进行中数量' },
        ],
    },
    {
        name: '建议类型',
        sub: null,
        type: 0,
        number: null,
        unit: null,
        data: [
            { value: 40, name: '系统优化' },
            { value: 30, name: '组织优化' },
            { value: 20, name: '制度优化' },
        ],
    },
]

const Home: React.FC<{}> = () => {
    return (
        <div className="topic-global">
            <div className="topic-background">
                <div className="top-picture">
                    <img src={topic_header} />
                </div>
                <div className="top-global">
                    <div className='left-global'>
                        <Carousel className='left-carousel'>
                            <div>
                                <img src={topic_banner1} className='carousel-content' />
                            </div>
                            <div>
                                <h3 className='carousel-content'>2</h3>
                            </div>
                            <div>
                                <h3 className='carousel-content'>3</h3>
                            </div>
                            <div>
                                <h3 className='carousel-content'>4</h3>
                            </div>
                        </Carousel>
                        <div className='left-activity'>
                            <img src={topic_activity_logo} />
                        </div>
                        <div className='left-card'>
                            <div className='left-graceful'>
                                <LeftCardTop title="活动风采" />
                                <div>
                                    <Row gutter={[20, 31]}>
                                        {example_list.map((item, index) => (
                                            <Col span={8} key={index}>
                                                <div className='left-graceful-bg' style={{ backgroundImage: `url(${item.img})` }}>
                                                    <div className='left-graceful-textbg'>
                                                        <span className='left-graceful-text'>{item.text}</span>
                                                    </div>
                                                </div>
                                            </Col>
                                        ))}
                                    </Row>
                                </div>
                            </div>
                            <div className='left-project'>
                                <LeftCardTop title="攻坚克难项目" />
                                <div className='left-project-content'>
                                    <img src={topic_project_picture} />
                                    <div className='left-project-content-list'>
                                        <List
                                            size='small'
                                            split={false}
                                            dataSource={listData}
                                            renderItem={item => (
                                                <List.Item>
                                                    <div className='left-project-content-item'>
                                                        <span className='left-project-content-item-title'>{item.title}</span>
                                                        <span className='left-project-content-item-time'>{item.time}</span>
                                                    </div>
                                                </List.Item>
                                            )}
                                        >
                                        </List>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className='right-global'>
                        <div>
                            <img src={topic_right_material} className='right-material' />
                        </div>
                        <div className='right-display'>
                            <RightDisplayTitle title="党员及支部数量情况" />
                            <RightDisplayContent type="partymember" color="number-blue" />
                            <RightDisplayContent type="partybranch" color="number-blue" />
                        </div>
                        <Divider className='right-divider' />
                        <div className='right-display'>
                            <RightDisplayTitle title="2022年订单交易情况" />
                            <RightDisplayContent type="totalamount" color="number-orange" />
                            <RightDisplayContent type="totalnumber" color="number-orange" />
                            <RightDisplayContent type="commodity" color="number-orange" />
                            <RightDisplayContent type="protocol" color="number-orange" />
                        </div>
                        <Divider className='right-divider' />
                        {right_graph_data.map(item => (
                            <div className='right-graph' key={item.name}>
                                <div className='right-graph-title'>
                                    {item.name}
                                </div>
                                <div className='right-graph-subtitle'>
                                    {item.type == 1 && `${item.sub}：${item.number}${item.unit}`}
                                </div>
                                <div className='right-graph-content'>
                                    <RightGraphContent name={item.name} type={item.type} data={item.data} />
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
                <div className='bottom-global'>
                    <LeftCardTop title="活动联系人" />
                    {length.map(item => (
                        <div key={item}>
                            <div className='bottom-title'>{item}</div>
                            <div className='bottom-content'>
                                <Row gutter={[20, 20]}>
                                    {card_length.map(item => (
                                        <Col span={6} key={item}>
                                            <div className='bottom-card'>
                                                <div className='bottom-card-flex'>
                                                    <div className='bottom-card-title'>
                                                        <span>张三</span>
                                                        <span className='bottom-card-title-type'>(IP物资类)</span>
                                                    </div>
                                                    <img src={topic_bottom_button} />
                                                </div>
                                                <div className='bottom-card-content'>
                                                    <div>邮箱：1214567@chinaunicom.cn</div>
                                                    <div>电话：12111112222</div>
                                                    <div>部门：xxxx部</div>
                                                </div>
                                            </div>
                                        </Col>
                                    ))}
                                </Row>
                            </div>
                        </div>
                    ))}
                    <div className='bottom-other'>
                        <div>
                            <span className='bottom-other-text'>更多</span>
                            <img src={topic_other} className='bottom-other-icon' />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Home;