import React, { Component } from 'react';
import Echarts from 'echarts'
import yellowClock from '../../assets/images/yellow-clock.png';
import redClock from '../../assets/images/red-clock.png';
import greenClock from '../../assets/images/green-clock.png';
import yellowBar from '../../assets/images/yellow-bar.png';
import redBar from '../../assets/images/red-bar.png';
import greenBar from '../../assets/images/green-bar.png';
import yellowUp from '../../assets/images/yellow-up.svg';
import redUp from '../../assets/images/red-up.svg';
import greenUp from '../../assets/images/green-up.svg';
import './BottomBody2.less'
export default class BottomBody2 extends Component {

    constructor() {
        super();
        this.state = {
            yellow: ['1', '2', '3', '4'],
            lefty: [3, 2, 3, 4, 5, 6, 3, 2, 3, 4, 5, 8],
            righty: [30, 20, 30, 40, 50, 60, 30, 20, 30, 40, 50, 80]
        };

    }
    componentDidMount() {
        let Min1 = this.calMin([this.state.lefty]), Min2 = this.calMin([this.state.righty]),
            Max1 = this.calMax([this.state.lefty]), Max2 = this.calMax([this.state.righty]);
        const myChart = Echarts.init(document.getElementById('BottomBody2-main'));
        myChart.setOption({
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    data: ['05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月', '01月', '02月', '03月', '04月'],
                    "splitLine": {
                        "show": false
                    },
                    axisTick: { //y轴刻度线
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#00b7f3',
                            fontWeight: "bolder"
                        }
                    },
                },
                {
                    type: 'category',
                    boundaryGap: true,
                    data: (function () {
                    })()
                }
            ],
            yAxis: [
                {
                    name: '巡视次数',
                    nameTextStyle: {
                        padding: [0, 30, 0, 0]    // 四个数字分别为上右下左与原位置距离
                    },
                    type: 'value',
                    axisTick: { //y轴刻度线
                        show: false
                    },
                    axisLine: { //y轴
                        show: false,
                        lineStyle: {
                            // 设置y轴颜色
                            color: '#00b7f3'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            // 设置y轴颜色
                            color: '#00b7f3'
                        }
                    },
                    min: Min1,
                    max: Max1,
                    splitNumber: 5,
                    interval: (Max1 - Min1) / 5
                },
                {
                    name: '发现缺陷',
                    nameTextStyle: {
                        padding: [0, -30, 0, 0]    // 四个数字分别为上右下左与原位置距离
                    },
                    type: 'value',
                    axisTick: { //y轴刻度线
                        show: false
                    },
                    axisLine: { //y轴
                        show: false,
                        lineStyle: {
                            // 设置y轴颜色
                            color: '#e9df11'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            // 设置y轴颜色
                            color: '#00b7f3'
                        }
                    },
                    min: Min2,
                    max: Max2,
                    splitNumber: 5,
                    interval: (Max2 - Min2) / 5
                }
            ],
            series: [
                {
                    name: '预购队列',
                    type: 'bar',
                    barWidth: 20,
                    data: [3, 2, 3, 4, 5, 6, 3, 2, 3, 4, 5, 8],
                    itemStyle: {

                        normal: {
                            //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
                            color: '#00b7f3',
                            barBorderRadius: [7, 7, 0, 0]
                        },
                    }
                },
                {
                    name: '最新成交价',
                    type: 'line',
                    data: [3, 2, 3, 4, 5, 6, 3, 2, 3, 4, 5, 8],
                    itemStyle: {
                        //通常情况下:
                        normal: {
                            //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
                            color: '#e9df11'
                        },
                    }
                }
            ]
        });
    }
    calMax(arr) {
        let max = 0;
        arr.forEach((el) => {
            el.forEach((el1) => {
                if (!(el1 === undefined || el1 === '')) {
                    if (max < el1) {
                        max = el1;
                    }
                }
            })
        })
        let maxint = Math.ceil(max / 9.5);//不让最高的值超过最上面的刻度
        let maxval = maxint * 10;//让显示的刻度是整数
        return maxval;
    }
    calMin(arr) {
        let min = 0;
        arr.forEach((el) => {
            el.forEach((el1) => {
                if (!(el1 === undefined || el1 === '')) {
                    if (min > el1) {
                        min = el1;
                    }
                }
            })
        })
        let minint = Math.floor(min / 10);
        let minval = minint * 10;//让显示的刻度是整数
        return minval;
    }


    render() {
        return (
            <div className="BottomBody2">
                <div className="BottomBody2-title f25 ac blod white">
                    配网运维
                </div>
                <div className="BottomBody2-container f20 flex">
                    <div className="BottomBody2-yellow yellow flex-1 flex-l">
                        <img className="BottomBody2-clock" src={yellowClock} alt="" />
                        <span className="name">主要故障</span>
                        {this.state.yellow.map((item, index) => {
                            return <img key={index} className="BottomBody2-Bar" src={yellowBar} alt="" />
                        })}
                    </div>
                    <div className="BottomBody2-red red flex-1 flex-l">
                        <img className="BottomBody2-clock" src={redClock} alt="" />
                        <span className="name">超长故障</span>
                        {this.state.yellow.map((item, index) => {
                            return <img key={index} className="BottomBody2-Bar" src={redBar} alt="" />
                        })}
                    </div>
                    <div className="BottomBody2-green green flex-1 flex-l">
                        <img className="BottomBody2-clock" src={greenClock} alt="" />
                        <span className="name">频繁停电台区</span>
                        {this.state.yellow.map((item, index) => {
                            return <img key={index} className="BottomBody2-Bar" src={greenBar} alt="" />
                        })}
                    </div>
                </div>
                <div className="BottomBody2-containerTwo ac flex">
                    <div className="flex-1 list">
                        <div className="title white-two  flex">
                            <span className='flex-1'>次数</span>
                            <span className='flex-1'>停运率</span>
                        </div>
                        <div className="title yellow blod f20 flex">
                            <span className='flex-1'>470</span>
                            <span className='flex-1'>0.09次/条</span>
                            <img src={yellowUp} alt="" />
                        </div>
                    </div>
                    <div className="flex-1 list">
                        <div className="title white-two flex">
                            <span className='flex-1'>次数</span>
                            <span className='flex-1'>停运率</span>
                        </div>
                        <div className="title red blod f20 flex">
                            <span className='flex-1'>470</span>
                            <span className='flex-1'>28.73%</span>
                            <img src={redUp} alt="" />
                        </div>
                    </div>
                    <div className="flex-1 list">
                        <div className="title white-two flex">
                            <span className='flex-1'>台数</span>
                            <span className='flex-1'>占比</span>
                        </div>
                        <div className="title green blod f20 flex">
                            <span className='flex-1'>242</span>
                            <span className='flex-1'>0.57%</span>
                            <img src={greenUp} alt="" />
                        </div>
                    </div>
                </div>
                <div className="BottomBody2-hide ac blod white-two">
                    运行巡视质量指数(73.18%)
                </div>
                <div className="BottomBody2-main" id="BottomBody2-main" style={{ width: '100%', height: '29vh' }}></div>
            </div>
        )
    }
}

Lifelong learning lifelong benefit