// 核心库
import React, { Component } from "react";
import { connect } from "dva";
import { withRouter } from "dva/router";
import echarts from "echarts";

class RiskLevel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      riskLevelData: [],
    };
  }

  componentDidMount() {
    let riskLevel = [];
    let showData = [];
    let color = [];
    this.setState({
      riskLevelData: this.props.riskLevelPage,
    });
    this.props.riskLevelPage.forEach((item) => {
      riskLevel.push(item.RISK_LEVEL);
      // color.push(item.COLOR);
      if (item.RISK_LEVEL === "一级") {
        color.push("#c92a2a");
      } else if (item.RISK_LEVEL === "二级") {
        color.push("#ffa94d");
      } else if (item.RISK_LEVEL === "三级") {
        color.push("#ffe066");
      } else if (item.RISK_LEVEL === "四级") {
        color.push("#4285F4");
      }
      showData.push({ value: item.COUNT, name: item.RISK_LEVEL });
    });
    let allNum = 0;
    showData.map((item) => {
      allNum = allNum + item.value;
    });
    let riskLevels = document.getElementById("riskLevel");
    if (riskLevels) {
      let myChart = echarts.init(riskLevels);
      myChart.setOption({
        color: color,
        title: {
          text: allNum,
          x: "26%",
          y: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: "normal",
            color: ["#333"],
          },
          subtextStyle: {
            color: "#666",
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}:({d}%)",
        },
        legend: {
          orient: "vartical",
          x: "left",
          top: "20%",
          left: "55%",
          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%", "75%"],
            center: ["30%", "50%"],
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "#ffffff",
                borderWidth: 1,
                padding: "0 20px",
              },
            },
            label: {
              show: false,
            },
            // color: color,
            data: showData,
          },
        ],
      });
    }
  }

  render() {
    return (
      <React.Fragment>
          <div
              id="riskLevel"
              style={{
                width: "100%",
                height: "80%",
                // minHeight: "180px",
              }}
            ></div>
      </React.Fragment>
    );
  }
}

export default withRouter(connect(({ login }) => ({ login }))(RiskLevel));
