import React from 'react';
import ReactEcharts from 'echarts-for-react';
import styles from './SituationDispose.less';
import Pyramid from './Pyramid'
import SituationTable from './SituationTable'
function echartsOption(seriesData) {
    let xAxisData = ['一大队', '二大队', '三大队', '四大队', '五大队', '六大队', '七大队']
    const series = [
        { name: '拥堵', color: 'rgb(38,250,228)' },
        { name: '事故', color: 'rgb(230,127,58)' },
        { name: '其他', color: 'rgb(37,160,254)' },
    ].map((r, sid) => {
        return {
            name: r.name,
            type: "bar",
            symbol: 'none',
            stack: 'total',
            barWidth: '20',
            itemStyle: {
                color: r.color
            },
            label: {
                show: false,
                color: "#fff",
                backgroundColor: "rgba(135, 103, 62, 1)",
                padding: [4, 4, 2, 4]
            },
            data: [100, 302, 301]
        };
    });

    const option = {
        grid: {
            top: "24",
            left: "0",
            right: "10",
            bottom: "0",
            containLabel: true,
        },
        legend: {
            selectedMode: false,
            right: 0,
            textStyle: {
                color: '#fff'
            },
        },
        xAxis: [
            {
                type: "category",
                data: xAxisData,
                axisLabel: {
                    textStyle: {
                        color: "#fff",
                        margin: 14,
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: "#9fabc1",
                    },
                },
            },
        ],
        yAxis: [
            {
                type: "value",
                show: true,
                axisLabel: {
                    textStyle: {
                        color: "#fff",
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#9fabc1",
                    },
                },
                splitLine: {
                    show: false,
                },
            },
        ],
        series
    }
    return option
}

function echartsData() {
    let seriesData = Array.from({ length: 24 }, (value, index) => index + 1);
    let option = echartsOption(seriesData)
    return option
}


class SituationDispose extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            arr: [
                { name: '实施', num: 6.2 },
                { name: '历史7天', num: 6.2 },
                { name: '历史30天', num: 6.2 },
                { name: '主城区', num: 6.2 }
            ],
            tagNum: 0
        }
    }
    componentDidMount() {
    }

    render() {
        return (
            <div className={styles.situationDispose}>
                <div className={styles.tit}>
                    <div>警情处置</div>
                </div>
                <Pyramid />
                <ReactEcharts
                    ref={e => {
                        // console.log(e)
                    }}
                    option={echartsData()}
                    notMerge
                    lazyUpdate
                    style={{ width: '100%', height: 180, marginBottom: 28 }}
                />
                <SituationTable />
            </div>
        );
    }
}

export default SituationDispose;