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) {
          console.log(ret);
          // this.state.retData = ret?.Data.RISKLEVELCOUNTS;
          this.setState({
            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 showData = [
      { value: this.state.LEVEL1TOTAL, name: "一级风险" },
      { value: this.state.LEVEL2TOTAL, name: "二级风险" },
      { value: this.state.LEVEL3TOTAL, name: "三级风险" },
      { value: this.state.LEVEL4TOTAL, name: "四级风险" },
    ];
    let chart1s = document.getElementById("chart1");
    let myChart = echarts.init(chart1s);
    myChart.setOption({
      color: ["#c92a2a", "#ffa94d", "#ffe066", "#4285F4", "#fa8a89"],
      title: [
        {
          text:
            this.state.LEVEL1TOTAL +
            this.state.LEVEL2TOTAL +
            this.state.LEVEL3TOTAL +
            this.state.LEVEL4TOTAL,
          x: "24%",
          y: "40%",
          textStyle: {
            fontSize: 26,
            fontWeight: "normal",
            color: ["#333"],
          },
        },
        {
          text: "风险分级占比",
          x: "23%",
          y: "55%",
          textStyle: {
            color: "#666",
            fontSize: 12,
          },
        },
      ],
      tooltip: {
        trigger: "item",
        formatter: "{b} : ( {c} | {d}% )",
      },
      legend: {
        icon: "pin",
        orient: "vartical",
        x: "60%",
        y: "center",
        data: showData,
        // itemWidth: 20,
        // itemHeight: 14,
        itemGap: 25,
        formatter: function (name) {
          //通过name获取到数组对象中的单个对象
          let singleData = showData.filter(function (item) {
            return item.name == name;
          });
          let countAll = 0;
          showData.map((item) => {
            countAll = countAll + item.value;
          });

          return (
            name +
            "  |  " +
            singleData[0].value +
            "   |   " +
            Number((singleData[0].value / countAll) * 100).toFixed(2) +
            "%"
          );
        },
      },
      grid: {
        left: 30,
        containLabel: true,
        bottom: 10,
        top: 10,
        right: 30,
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          clockwise: false,
          // minAngle: 20,
          avoidLabelOverlap: false,
          radius: ["50%", "65%"],
          center: ["30%", "50%"],
          itemStyle: {
            //图形样式
            normal: {
              borderColor: "#ffffff",
              borderWidth: 4,
              padding: "0 20px",
              borderRadius: 50,
            },
          },
          label: {
            show: false,
          },
          // color: color,
          data: showData,
        },
      ],
    });
  };
  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: {
          show: false,
        },
        yAxis: [
          {
            triggerEvent: true,
            show: true,
            inverse: false,
            data: areaName,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#666",
              align: "right",
              margin: 20,
              fontSize: 13,

              rich: {
                idx0: {
                  color: "#FB375E",
                  backgroundColor: "#FFE8EC",
                  borderRadius: 100,
                  padding: [5, 8],
                },
                idx1: {
                  color: "#FF9023",
                  backgroundColor: "#FFEACF",
                  borderRadius: 100,
                  padding: [5, 8],
                },
                idx2: {
                  color: "#01B599",
                  backgroundColor: "#E1F7F3",
                  borderRadius: 100,
                  padding: [5, 8],
                },
                idx: {
                  color: "#333",
                  borderRadius: 100,
                  padding: [5, 8],
                },
                title: {
                  width: 165,
                },
              },
            },
          },
          {
            triggerEvent: true,
            show: true,
            inverse: false,
            data: areaCount,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#666",
              align: "left",
              margin: 20,
              fontSize: 12,
            },
          },
        ],
        series: [
          {
            name: "数量",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              color: "#1990FF",
              barBorderRadius: 30,
            },
            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: {
          show: false,
        },
        yAxis: [
          {
            triggerEvent: true,
            show: true,
            inverse: false,
            data: areaName,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#666",
              align: "right",
              margin: 20,
              fontSize: 13,

              rich: {
                idx0: {
                  color: "#FB375E",
                  backgroundColor: "#FFE8EC",
                  borderRadius: 100,
                  padding: [5, 8],
                },
                idx1: {
                  color: "#FF9023",
                  backgroundColor: "#FFEACF",
                  borderRadius: 100,
                  padding: [5, 8],
                },
                idx2: {
                  color: "#01B599",
                  backgroundColor: "#E1F7F3",
                  borderRadius: 100,
                  padding: [5, 8],
                },
                idx: {
                  color: "#333",
                  borderRadius: 100,
                  padding: [5, 8],
                },
                title: {
                  width: 165,
                },
              },
            },
          },
          {
            triggerEvent: true,
            show: true,
            inverse: false,
            data: areaCount,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#666",
              align: "left",
              margin: 20,
              fontSize: 12,
            },
          },
        ],
        series: [
          {
            name: "数量",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              color: "#1990FF",
              barBorderRadius: 30,
            },
            data: areaCount,
            show: false,
          },
        ],
      });
    }
  };
  chart4 = (data) => {
    let riskArr = [];
    let hazardArr = [];
    let dates = [];
    let color = [
      "#0090FF",
      "#36CE9E",
      "#FFC005",
      "#FF515A",
      "#8B5CFF",
      "#00CA69",
    ];
    const hexToRgba = (hex, opacity) => {
      let rgbaColor = "";
      let reg = /^#[\da-f]{6}$/i;
      if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
          "0x" + hex.slice(3, 5)
        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
      }
      return rgbaColor;
    };
    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({
        color: color,
        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,
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#333",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#D9D9D9",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#666",
            },
          },
          nameTextStyle: {
            color: "#666",
            fontSize: 12,
            lineHeight: 40,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#E9E9E9",
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "危险源/风险库",
            data: riskArr,
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 8,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[0], 0.3),
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[0], 0.1),
                    },
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 10,
              },
            },
          },
          {
            name: "职业危害库",
            data: hazardArr,
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[1],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[1], 0.5),
                shadowOffsetY: 8,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[1], 0.3),
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[1], 0.1),
                    },
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[1], 0.1),
                shadowBlur: 10,
              },
            },
          },
        ],
      });
    }
  };
  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={11}>
            <div
              className="dashboard-div-style"
              style={{ border: "1px gray dotted" }}
            >
              <div id="chart1" style={{ width: "100%", height: "410px" }}></div>
            </div>
          </Col>
          <Col span={11}>
            <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: "20px" }}>
          <Col span={1}></Col>
          <Col span={22} style={{ textAlign: "center" }}>
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "space-around",
                border: "1px #888 solid",
                padding: "8px 0px",
              }}
            >
              <div
                style={{
                  width: "120px",
                  height: "70px",
                  borderRadius: "8px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "space-around",
                  // marginBottom: "10px",
                }}
              >
                <span>危险源/风险库</span>
                {/* <br></br> */}
                <div>
                  <span
                    style={{
                      fontWeight: "bold",
                      fontSize: "20px",
                      color: "brown",
                    }}
                  >
                    {this.state.RISKTOTALCOUNT}
                  </span>
                  条
                </div>
              </div>
              <div
                style={{
                  width: "120px",
                  height: "70px",
                  borderRadius: "8px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "space-around",
                  // marginBottom: "10px",
                }}
              >
                <span>职业危害库</span>
                {/* <br></br> */}
                <div>
                  <span
                    style={{
                      fontWeight: "bold",
                      fontSize: "20px",
                      color: "brown",
                    }}
                  >
                    {this.state.HAZARDTOTALCOUNT}
                  </span>
                  条
                </div>
              </div>
              <div
                style={{
                  width: "120px",
                  height: "70px",
                  borderRadius: "8px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "space-around",
                  // marginBottom: "10px",
                }}
              >
                <span>管控措施</span>
                {/* <br></br> */}
                <div>
                  <span
                    style={{
                      fontWeight: "bold",
                      fontSize: "20px",
                      color: "brown",
                    }}
                  >
                    {this.state.MEASURESTOTALCOUNT}
                  </span>
                  条
                </div>
              </div>
            </div>
          </Col>
        </Row>
        <Row gutter={10} style={{ marginTop: "14px" }}>
          <Col span={1}></Col>
          <Col span={22}>
            <div style={{ border: "1px solid rgb(232,232,232)" }}>
              <div id="chart4" style={{ width: "100%", height: "350px" }}></div>
            </div>
          </Col>
        </Row>
        {/* <hr
          style={{
            border: "1px dashed #ccc",
            marginBottom: "20px",
            marginTop: "20px",
          }}
        ></hr> */}
        <Row gutter={10} style={{ marginTop: "24px" }}>
          <Col span={1}></Col>
          <Col span={11} style={{ borderRight: "1px solid #e7e6e4" }}>
            <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);
