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

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

  componentDidMount() {
    this.teamTop = this.props.departmentCompletionData.length;
    let teamName = [];
    let finishQty = [];
    this.props.departmentCompletionData.forEach((item) => {
      teamName.push(item.TEAM_NAME);
      let finishData = Number(item.CALC * 100).toFixed(2);
      finishQty.push(finishData);
    });
    let departmentCompletions = document.getElementById("departmentCompletion");
    let color = [
      "#c6cee2",
      "#a1b2cc",
      "#9aa193",
      "#cadabd",
      "#f1dfde",
      "#e8e8dc",
      "#f18772",
    ];
    let opt = { index: 0 };
    if (departmentCompletions) {
      let myChart = echarts.init(departmentCompletions);
      myChart.setOption(
        {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (param) {
              return (
                param[0].name +
                "<br>" +
                param[0].marker +
                " " +
                param[0].seriesName +
                "：" +
                param[0].value +
                "%"
              );
            },
          },
          grid: {
            top: "2%",
            bottom: -15,
            right: "10%",
            left: "10%",
            containLabel: true,
          },
          xAxis: {
            show: false,
          },
          yAxis: [
            {
              triggerEvent: true,
              show: true,
              inverse: true,
              data: teamName,
              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: true,
              data: finishQty,
              axisLine: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                color: "#666",
                align: "left",
                margin: 20,
                fontSize: 12,
                formatter: function (value) {
                  return value + "%";
                },
              },
            },
          ],
          series: [
            {
              name: "完成率",
              type: "bar",
              yAxisIndex: 0,
              data: finishQty,
              barWidth: 10,
              itemStyle: {
                color: "#1990FF",
                barBorderRadius: 30,
              },
              formatter: "{value}%",
            },
          ],
        },
        true
      );
    }
  }

  render() {
    return (
      <React.Fragment>
        <div
          id="departmentCompletion"
          style={{ width: "100%", height: "70%" }}
        ></div>
      </React.Fragment>
    );
  }
}

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