import React, { useState, useEffect, useRef, Component } from 'react'
import { connect } from 'dva'
import { initFilter, addRuleAndGroups, guid, extendInclude, extendRule, extendOrder, extend, initQueryFilter } from "../../../utils/common"
import { Table, Row, Col, Button, Select, DatePicker, message } from 'antd';
import echarts from 'echarts';
import moment from 'moment'
class BI008RiskAnalysis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pagination: {},
      retData: [],
      totalUsers: 0,
      totalActiveUsers: 0,
      todayCount: 0,
      LEVEL1TOTAL: 0,
      LEVEL2TOTAL: 0,
      LEVEL3TOTAL: 0,
      LEVEL4TOTAL: 0,
      HAZARDTOTALCOUNT: 0,
      RISKTOTALCOUNT: 0,
      MEASURESTOTALCOUNT: 0
    };
  };

  componentDidMount() {
    this.state.columns1 = [
      {
        title: '部门',
        dataIndex: 'NAME',
      },
      {
        title: '一级风险',
        dataIndex: 'LEVEL1',
      },
      {
        title: '二级风险',
        dataIndex: 'LEVEL2',
      },
      {
        title: '三级风险',
        dataIndex: 'LEVEL3',
      },
      {
        title: '四级风险',
        dataIndex: 'LEVEL4',
      },
    ]
    const json = initFilter(this.props.login.OrgId);
    this.getBaseInfoData();
  };

  //获取数据
  getBaseInfoData = () => {
    const json2 = initFilter(this.props.login.OrgId)
    extendOrder(json2, "CREATE_TIME", 1);
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BI/BIController/getRiskData',
      payload: json2,
      onlyData: false,
      onComplete: (ret) => {
        if (ret) {
          this.state.retData = ret?.Data.RISKLEVELCOUNTS;
          let level1all = 0;
          let level2all = 0;
          let level3all = 0;
          let level4all = 0;
          for (let i = 0; i < ret.Data.RISKLEVELCOUNTS.length; i++) {
            level1all += ret.Data.RISKLEVELCOUNTS[i].LEVEL1;
            level2all += ret.Data.RISKLEVELCOUNTS[i].LEVEL2;
            level3all += ret.Data.RISKLEVELCOUNTS[i].LEVEL3;
            level4all += ret.Data.RISKLEVELCOUNTS[i].LEVEL4;
          }
          this.state.LEVEL1TOTAL = level1all;
          this.state.LEVEL2TOTAL = level2all;
          this.state.LEVEL3TOTAL = level3all;
          this.state.LEVEL4TOTAL = level4all;
          this.state.HAZARDTOTALCOUNT = ret.Data.HAZARDTOTALCOUNT;
          this.state.RISKTOTALCOUNT = ret.Data.RISKTOTALCOUNT;
          this.state.MEASURESTOTALCOUNT = ret.Data.MEASURESTOTALCOUNT;

        }
        this.chart1();
        this.chart2(ret?.Data.AREACOUNTS.filter(t => t.AREATYPE == 0).slice(0, 10));
        this.chart3(ret?.Data.AREACOUNTS.filter(t => t.AREATYPE == 1).slice(0, 10));
        this.chart4(ret?.Data.DATECOUNTS);
      }
    })
  };
  chart1 = () => {
    let chart1s = document.getElementById('chart1');
    let myChart = echarts.init(chart1s);
    myChart.setOption(
      {
        grid: {
          top: '2%',
          left: '1%',
          right: '1%',
        },
        title: {
          text: "风险分级占比",
          left: 'center',
          top: "2%"
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '2%'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            
            labelLine: {
              show: false
            },
            data: [
              { value: this.state.LEVEL1TOTAL, name: '一级风险' },
              { value: this.state.LEVEL2TOTAL, name: '二级风险' },
              { value: this.state.LEVEL3TOTAL, name: '三级风险' },
              { value: this.state.LEVEL4TOTAL, name: '四级风险' },
            ],
            itemStyle: {
              normal: {
                  color: function (colors) {
                      var colorList = [ "red","orange","yellow","blue" ];
                      return colorList [colors.dataIndex];
                  }
              },
          }
          }
        ]
      }
    );
  }
  chart2 = (data) => {
    let areaName = [];
    let areaCount = [];
    data.forEach(item => {
      areaName.push(item.AREANAME);
      areaCount.push(item.AREACOUNT);
    })
    let chart2s = document.getElementById('chart2');
    if (chart2s) {
      let myChart = echarts.init(chart2s);
      myChart.setOption({
        title: {
          text: "矿山-风险区域统计TOP10",
          left: 'center',
          top: "2%"
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '10%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false,
            lineStyle: {
              color: '#172749'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: 0,
            formatter: '{value}',  // 给每个数值添加%
          },
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#172749'
            }
          },
          data: areaName,
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            label: {
              show: true,
              position: 'insideRight',
              color: '#fff',
              formatter: '{c}',
              fontSize: '12'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#01AEF6" },
                { offset: 1, color: "#9999FF" },
              ]),
            },
            data: areaCount,
            show: false

          },
        ],
      });
    }
  }
  chart3 = (data) => {
    let areaName = [];
    let areaCount = [];
    data.forEach(item => {
      areaName.push(item.AREANAME);
      areaCount.push(item.AREACOUNT);
    })
    let chart3s = document.getElementById('chart3');
    if (chart3s) {
      let myChart = echarts.init(chart3s);
      myChart.setOption({
        title: {
          text: "选矿-风险区域统计TOP10",
          left: 'center',
          top: "2%"
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '10%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false,
            lineStyle: {
              color: '#172749'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: 0,
            formatter: '{value}',  // 给每个数值添加%
          },
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#172749'
            }
          },
          data: areaName,
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            label: {
              show: true,
              position: 'insideRight',
              color: '#fff',
              formatter: '{c}',
              fontSize: '12'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#01AEF6" },
                { offset: 1, color: "#9999FF" },
              ]),
            },
            data: areaCount,
            show: false

          },
        ],
      });
    }
  }
  chart4 = (data) => {
    let riskArr = [];
    let hazardArr = [];
    let dates = [];
    for (let i = 0; i < data.length; i++) {
      if (data[i].TYPE == 0) {
        riskArr.push(data[i].COUNT);
        dates.push(moment(data[i].DATE).format('YYYY/MM'))
      } else {
        hazardArr.push(data[i].COUNT);
      }
    }
    let currMonth=dates.length;
    for (let i = 1; i < (13 - currMonth); i++) {
      dates.push(moment(dates[dates.length]).add(i, 'months').format('YYYY/MM'))
    }
    let chart4s = document.getElementById('chart4');
    if (chart4s) {
      let myChart = echarts.init(chart4s);
      myChart.setOption({
        grid: {
          left: '5%',
          right: '5%',
        },
        legend: {
          bottom: '0px'
        },
        title: {
          text: "月度风险辨识统计走势",
          left: 'center',
          top: "2%"
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        xAxis: {
          type: 'category',
          data: dates,
          axisLabel: {
            showMaxLabel: true
          }
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '危险源/风险库',
            data: riskArr,
            type: 'line',
          }, {
            name: '职业危害库',
            data: hazardArr,
            type: 'line',
          }
        ]
      });
    }
  }
  render() {
    return (
      <div style={{ backgroundColor: 'white', width: '1200px', top: '0', bottom: '0', left: '0', right: '0', margin: 'auto', borderStyle: 'solid', borderColor: '#ccc', borderWidth: '1px', }}>
        <h1 style={{ textAlign: "center", marginTop: '30px', fontWeight: 'bold' }}>风险管理统计分析</h1>
        <Row gutter={10} style={{ marginTop: "14px" }}>
          <Col span={1}></Col>
          <Col span={2} style={{ textAlign: 'center' }}>
            <div>
              <Button style={{ width: "100px", height: "70px", borderRadius: '8px', marginBottom: "10px", backgroundColor: "red" }}><span style={{
                color
                  : "white"
              }}>一级风险</span><br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: 'white' }}>{this.state.LEVEL1TOTAL}</span></Button>
              <Button style={{ width: "100px", height: "70px", borderRadius: '8px', marginBottom: "10px", backgroundColor: "orange" }}><span style={{
                color
                  : "white"
              }}>二级风险</span><br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: 'white' }}>{this.state.LEVEL2TOTAL}</span></Button>
              <Button style={{ width: "100px", height: "70px", borderRadius: '8px', marginBottom: "10px", backgroundColor: "yellow" }}><span style={{
                color
                  : "black"
              }}>三级风险</span><br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: 'black' }}>{this.state.LEVEL3TOTAL}</span></Button>
              <Button style={{ width: "100px", height: "70px", borderRadius: '8px', marginBottom: "10px", backgroundColor: "blue" }}><span style={{
                color
                  : "white"
              }}>四级风险</span><br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: 'white' }}>{(this.state.LEVEL4TOTAL)}</span></Button>
            </div>
          </Col>
          <Col span={10}>
            <div className="dashboard-div-style" style={{ border: '1px gray dotted' }}>
              <div id="chart1" style={{ width: '100%', height: '340px' }}></div>
            </div>
          </Col>
          <Col span={10} style={{ height: '300px' }}>
            <div>
              <Table
                dataSource={this.state.retData}
                columns={this.state.columns1}
                bordered
                loading={this.state.showLoading}
                size="small"
                rowKey="1"
                pagination={false}
              />
            </div>
          </Col>
        </Row>
        <hr style={{ border: '1px dashed #ccc', marginBottom: "20px", marginTop: "20px" }}></hr>
        <Row gutter={10} style={{ marginTop: "14px" }}>
          <Col span={1}></Col>
          <Col span={3} style={{ textAlign: 'center' }}>
            <div>
              <Button style={{ width: "120px", height: "70px", borderRadius: '8px', marginBottom: "10px" }}><span>危险源/风险库</span><br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: "brown" }}>{this.state.RISKTOTALCOUNT}</span>条</Button>
              <Button style={{ width: "120px", height: "70px", borderRadius: '8px', marginBottom: "10px" }}><span>职业危害库</span><br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: "brown" }}>{this.state.HAZARDTOTALCOUNT}</span>条</Button>
              <Button style={{ width: "120px", height: "70px", borderRadius: '8px', marginBottom: "10px" }}><span>管控措施</span><br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: "brown" }}>{this.state.MEASURESTOTALCOUNT}</span>条</Button>
            </div>
          </Col>
          <Col span={19}>
            <div className="dashboard-div-style" style={{ border: '1px gray dotted' }}>
              <div id="chart4" style={{ width: '100%', height: '300px' }}></div>
            </div>
          </Col>
        </Row>
        <hr style={{ border: '1px dashed #ccc', marginBottom: "20px", marginTop: "20px" }}></hr>
        <Row gutter={10} style={{ marginTop: "14px" }}>
          <Col span={1}></Col>
          <Col span={11}>
            <div className="dashboard-div-style" style={{ border: '1px gray dotted' }}>
              <div id="chart2" style={{ width: '100%', height: '400px' }}></div>
            </div>
          </Col>
          <Col span={11}>
            <div className="dashboard-div-style" style={{ border: '1px gray dotted' }}>
              <div id="chart3" style={{ width: '100%', height: '400px' }}></div>
            </div>
          </Col>
        </Row>
        <br />
      </div>
    )
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI008RiskAnalysis)