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 BI013RiskAnalysisModel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pagination: {},
      retData: [],
      LEVEL1TOTAL: 0,
      LEVEL2TOTAL: 0,
      LEVEL3TOTAL: 0,
      LEVEL4TOTAL: 0,
      HAZARDTOTALCOUNT: 0,
      RISKTOTALCOUNT: 0,
      MEASURESTOTALCOUNT: 0,
    };
  }

  componentDidMount() {
    let currentMineType = "";
    if (this.props.formParam != undefined || this.props.formParam != null) {
      currentMineType = this.props.formParam.type;
    } else {
      currentMineType = localStorage.getItem("currentMineType");
    }
    this.getBaseInfoData(currentMineType);
  }

  //获取数据
  getBaseInfoData = (mineType) => {
    const json2 = initFilter(this.props.login.OrgId);
    extendOrder(json2, "CREATE_TIME", 1);
    json2.Parameter1 = mineType;
    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.setState({
            LEVEL1TOTAL: level1all,
            LEVEL2TOTAL: level2all,
            LEVEL3TOTAL: level3all,
            LEVEL4TOTAL: level4all,
            HAZARDTOTALCOUNT: ret.Data.HAZARDTOTALCOUNT,
            RISKTOTALCOUNT: ret.Data.RISKTOTALCOUNT,
            MEASURESTOTALCOUNT: ret.Data.MEASURESTOTALCOUNT,
          });
          // 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.slice(0, 20));
        this.chart4(ret?.Data.DATECOUNTS);
      },
    });
  };
  chart1 = () => {
    let showData = [];
    let color = [];
    let allNum = 0;
    showData.push({ value: this.state.LEVEL1TOTAL, name: "一级" });
    showData.push({ value: this.state.LEVEL2TOTAL, name: "二级" });
    showData.push({ value: this.state.LEVEL3TOTAL, name: "三级" });
    showData.push({ value: this.state.LEVEL4TOTAL, name: "四级" });
    showData.map((item) => {
      if (item.name === "一级") {
        color.push("#c92a2a");
      } else if (item.name === "二级") {
        color.push("#ffa94d");
      } else if (item.name === "三级") {
        color.push("#ffe066");
      } else if (item.name === "四级") {
        color.push("#4285F4");
      }
      allNum = allNum + item.value;
    });

    let chart1s = document.getElementById("chartone");
    let myChart = echarts.init(chart1s);
    myChart.setOption({
      color: color,
      title: [
        {
          text: "风险分级占比",
          left: "center",
          top: "2%",
        },
        {
          text: allNum,
          x: "26%",
          y: "center",
          textStyle: {
            fontSize: 26,
            fontWeight: "normal",
            color: ["#333"],
          },
        },
      ],
      tooltip: {
        trigger: "item",
        formatter: "{b}:({d}%)",
      },
      legend: {
        orient: "vartical",
        x: "left",
        top: "35%",
        left: "65%",
        bottom: "0%",
        data: showData,
        // itemWidth: 20,
        // itemHeight: 14,
        // itemGap :15,
        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: ["45%", "65%"],
          center: ["30%", "50%"],
          itemStyle: {
            //图形样式
            normal: {
              borderColor: "#ffffff",
              borderWidth: 1,
              padding: "0 20px",
            },
          },
          label: {
            show: false,
          },
          // color: color,
          data: showData,
        },
      ],
    }, true);
  };
  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: "风险区域统计",
          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",
            // label: {
            //   show: true,
            //   position: "insideRight",
            //   color: "#fff",
            //   formatter: "{c}",
            //   fontSize: "12",
            // },
            barWidth: 10,
            itemStyle: {
              color: "#1990FF",
              barBorderRadius: 30,
            },
            // itemStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            //     { offset: 0, color: "#01AEF6" },
            //     { offset: 1, color: "#9999FF" },
            //   ]),
            // },
            data: areaCount,
            show: false,
          },
        ],
      }, true);
    }
  };

  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({
        color: ["#72b85b", "#f6841a", "#cc0404"],
        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",
            smooth: true,
          },
          {
            name: "职业危害库",
            data: hazardArr,
            type: "line",
            smooth: true,
          },
        ],
      }, true);
    }
  };
  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: "44px" }}>
          <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={12} style={{ height: "430px" }}>
            <div
              // className="dashboard-div-style"
              style={{ border: "1px solid rgb(232,232,232)" }}
            >
              <div id="chartone" style={{ width: "100%", height: "430px" }}></div>
            </div>
          </Col>
          <Col span={10} style={{ height: "430px" }}>
            <div
              // className="dashboard-div-style"
              style={{ border: "1px solid rgb(232,232,232)" }}
            >
              <div id="chart2" style={{ width: "100%", height: "430px" }}></div>
            </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: "20px" }}>
          <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>
        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(
  BI013RiskAnalysisModel
);
