import { Col, Descriptions, Radio, Row, Table } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import './style.less';
import * as echarts from 'echarts';
import warn_icon_01 from '@/assets/screen/warn_icon_01.png'
import warn_icon_02 from '@/assets/screen/warn_icon_02.png'
import moment from 'moment';

const onCell = (_: any, rowIndex: any) => ({ className: rowIndex % 2 == 0 ? "screen-table-odd-content" : "screen-table-even-content", });
const onHeaderCell = () => ({ className: "screen-table-header", });

const evalColumn: any[] = [
    {
        title: '项目名称',
        dataIndex: 'name',
        key: 'name',
        ellipsis: true,
        onCell,
        onHeaderCell,
    },
    {
        title: '时间',
        dataIndex: 'time',
        key: 'time',
        align: 'center',
        onCell,
        onHeaderCell,
    },
    {
        title: '所属单位',
        dataIndex: 'unit',
        key: 'unit',
        align: 'center',
        ellipsis: true,
        onCell,
        onHeaderCell,
    },
    {
        title: '评标地点',
        dataIndex: 'place',
        key: 'place',
        align: 'center',
        ellipsis: true,
        onCell,
        onHeaderCell,
    },
    {
        title: '专家人数',
        dataIndex: 'number',
        key: 'number',
        align: 'center',
        onCell,
        onHeaderCell,
    },
];
const todayEvalColumn: any[] = [
    {
        title: '项目名称',
        dataIndex: 'name',
        key: 'name',
        ellipsis: true,
        width: '20%',
        onCell,
        onHeaderCell,
    },
    {
        title: '中标供应商名称',
        dataIndex: 'supplierName',
        key: 'supplierName',
        ellipsis: true,
        align: 'center',
        onCell,
        onHeaderCell,
    },
    {
        title: '拟签约金额',
        dataIndex: 'money',
        key: 'money',
        align: 'center',
        ellipsis: true,
        width: '25%',
        onCell,
        onHeaderCell,
    },
];

const dataSource = [
    {
        id: '1',
        name: '中国联通集团股份有限公司',
        time: "11:00",
        unit: '北京',
        place: '评标地点',
        number: '5',
        supplierName: '通信工程局有限责任公司',
        money: '100000',
    },
    {
        id: '2',
        name: '中国联通集团股份有限公司',
        time: "11:00",
        unit: '北京',
        place: '评标地点',
        number: '7',
        supplierName: '通信工程局有限责任公司',
        money: '100000',
    },
    {
        id: '3',
        name: '中国联通集团股份有限公司',
        time: "11:00",
        unit: '北京',
        place: '评标地点',
        number: '7',
        supplierName: '通信工程局有限责任公司',
        money: '100000',
    },
    {
        id: '4',
        name: '中国联通集团股份有限公司',
        time: "11:00",
        unit: '北京',
        place: '评标地点',
        number: '7',
        supplierName: '通信工程局有限责任公司',
        money: '100000',
    },
    {
        id: '5',
        name: '中国联通集团股份有限公司',
        time: "11:00",
        unit: '北京',
        place: '评标地点',
        number: '7',
        supplierName: '通信工程局有限责任公司',
        money: '100000',
    },
];
const GraphChart = (props: { type: string }) => {
    const { type } = props;
    const random = Math.random().toString();
    useEffect(() => {
        type EChartsOption = echarts.EChartsOption;
        const chartDom = document.getElementById(random)!;
        const myChart = echarts.init(chartDom);
        const categoryOption: any = {
            legend: { top: '3%', textStyle: { color: '#fff' } },
            tooltip: {},
            grid: { left: '8%', right: '4%', top: '16%', bottom: 60 },
            dataset: {
                dimensions: ['product', '专家人数', '专家签到数量'],
                source: [
                    { product: '招标项目', '专家人数': 43.3, '专家签到数量': 85.8, },
                    { product: '公开比选', '专家人数': 83.1, '专家签到数量': 73.4, },
                    { product: '公开询价', '专家人数': 86.4, '专家签到数量': 65.2, },
                    { product: '公开招募', '专家人数': 72.4, '专家签到数量': 53.9, },
                    { product: '竞争性谈判', '专家人数': 72.4, '专家签到数量': 53.9, },
                    { product: '单一来源', '专家人数': 72.4, '专家签到数量': 53.9, },
                ]
            },
            xAxis: { type: 'category', axisLabel: { interval: 0, color: '#fff' } },
            yAxis: { axisLabel: { color: '#fff' } },
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [{ type: 'bar' }, { type: 'bar' }]
        };
        const pieOption: any = {
            legend: {
                orient: 'vertical',
                right: '3%',
                top: 'middle',
                textStyle: { color: '#fff' }
            },
            tooltip: {},
            dataset: {
                source: [
                    ['product', 'today', 'tomorrow', 'total'],
                    ['招标项目', 86.5, 92.1, 85.7],
                    ['公开比选', 41.1, 30.4, 65.1],
                    ['公开询价', 24.1, 67.2, 79.5],
                    ['公开招募', 55.2, 67.1, 69.2],
                    ['竞争性谈判', 86.4, 65.2, 82.5],
                    ['单一来源', 72.4, 53.9, 39.1],
                ]
            },
            series: [
                {
                    type: 'pie',
                    radius: ['44%', '77%'],
                    center: ['15%', '45%'],
                    // No encode specified, by default, it is 'today'.
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 24,
                            fontWeight: 'bold',
                            color: '#fff'
                        }
                    }
                },
                {
                    type: 'pie',
                    radius: ['44%', '77%'],
                    center: ['45%', '45%'],
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 24,
                            fontWeight: 'bold',
                            color: '#fff'
                        }
                    },
                    encode: {
                        itemName: 'product',
                        value: 'tomorrow'
                    }
                },
                {
                    type: 'pie',
                    radius: ['44%', '77%'],
                    center: ['75%', '45%'],
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20px',
                            fontWeight: 'bold',
                            color: '#fff'
                        }
                    },
                    encode: {
                        itemName: 'product',
                        value: 'total'
                    }
                }
            ]
        };

        const option: EChartsOption = type == "pie" ? pieOption : categoryOption;
        myChart.setOption(option);
    }, [])
    return (
        <div id={random} style={{ width: '100%', height: '100%' }}></div>
    )
}

export default () => {
    const [time, setTime] = useState<string>('');
    useEffect(() => {

        const interval = setInterval(function () {
            const date = moment().format("YYYY-MM-DD HH:mm:ss");
            setTime(date);
        }, 1000);
        return () => {
            clearInterval(interval)
        };
    }, [])
    //异常预警
    const EarlyWarn = ({ img, name, num }: { img: string, name: string, num: string | number }) => {
        return (
            <div className='screen-warn-content'>
                <img src={img} className='screen-warn-img' />
                <div className='screen-warn-content'>
                    <div className='screen-warn-num'>{num}</div>
                    <div>{name}</div>
                </div>
            </div>
        )
    }
    return (
        <div className="screen-bg">
            <div className='top-block'>
            </div>
            <div className='top'>
                <Row>
                    <Col span={6}>
                        <div className='top-left'>
                            <span>当前时间：2022-07-14 07:00:00</span>
                        </div>
                    </Col>
                    <Col span={12}>
                        <div className='top-title'>
                            <span>数字化评标监控平台</span>
                        </div>
                    </Col>
                    <Col span={6}>
                        <div className='top-right'>
                            <span>当前时间：{time}</span>
                        </div>
                    </Col>
                </Row>
            </div>
            <Row className="screen-content">
                <Col span={18}>
                    <Row>
                        <Col span={8} className='screen-right4'>
                            <div className='screen-card'>
                                <div className='card-title'>
                                    <span>今日评标专家数量</span>
                                </div>
                                <GraphChart type="category" />
                            </div>
                            <div className='screen-card screen-top8'>
                                <div className='card-title'>
                                    <span>评标室监控</span>
                                </div>
                                <Descriptions size="small" column={2}>
                                    <Descriptions.Item label="项目名称" span={2}>监控及相关设备IT服务建设购置项目</Descriptions.Item>
                                    <Descriptions.Item label="标段名称">监控及相关设备IT服务建设购置项目（标段一）</Descriptions.Item>
                                    <Descriptions.Item label="监控设备名称">摄像头1</Descriptions.Item>
                                    <Descriptions.Item label="评标室名称">集团第一评标室</Descriptions.Item>
                                    <Descriptions.Item label="省分">北京</Descriptions.Item>
                                </Descriptions>
                            </div>
                        </Col>
                        <Col span={16} className='screen-left4 screen-right4'>
                            <div className='middle-c'>
                                <div className='map-bg'>
                                    大屏地图
                                </div>
                            </div>
                        </Col>
                        <Col span={24} className='screen-top8 screen-right4'>
                            <div className='screen-card'>
                                <div className='screen-graph-top'>
                                    <span className='screen-graph-title'>今日项目数量：50</span>
                                    <span className='screen-graph-title'>明日项目数量：40</span>
                                    <span className='screen-graph-title'>累计项目数量：500</span>
                                    <Radio.Group defaultValue="a" buttonStyle="solid" size='small'>
                                        <Radio.Button value="a">当月</Radio.Button>
                                        <Radio.Button value="b">年</Radio.Button>
                                    </Radio.Group>
                                </div>
                                <div className='screen-graph-chart'>
                                    <GraphChart type="pie" />
                                </div>
                                <div className='screen-graph-end'>
                                    <span>&gt;&gt;项目列表</span>
                                </div>
                            </div>
                        </Col>
                    </Row>
                </Col>
                <Col span={6} className='screen-left4'>
                    <div className='screen-card'>
                        <div className='card-title'>
                            <span>异常预警</span>
                        </div>
                        <div className='screen-warn'>
                            <EarlyWarn name="陌生人预警" img={warn_icon_01} num={10} />
                            <EarlyWarn name="评标室人数预警" img={warn_icon_02} num={20} />
                        </div>
                    </div>
                    <div className='screen-card screen-top8'>
                        <div className='card-title'>
                            <span>评标中项目（20）</span>
                        </div>
                        <Table
                            pagination={false}
                            className="screen-table"
                            rowKey="id"
                            size="small"
                            dataSource={dataSource}
                            columns={evalColumn}
                        />
                    </div>
                    <div className='screen-card screen-top8'>
                        <div className='card-title'>
                            <span>今日中标项目信息（10）</span>
                        </div>
                        <Table
                            pagination={false}
                            className="screen-table"
                            rowKey="id"
                            size="small"
                            dataSource={dataSource}
                            columns={todayEvalColumn}
                        />
                    </div>
                </Col>
            </Row>
        </div>
    );
};;