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

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

  componentDidMount() {
    console.log(this.props.workTicketData, "22222");
    this.jobTop = this.props.workTicketData.length;
    let teamName = [];
    let wattingQty = [];
    let finishQty = [];
    let overFinishQty = [];
    let totalQty = [];
    this.props.workTicketData.forEach((item) => {
      teamName.push(item.TEAM_NAME);
      wattingQty.push(item.WAITTING_COUNT);
      finishQty.push(item.FINISH_COUNT);
      overFinishQty.push(item.OVER_FINISH_COUNT);
      totalQty.push(item.TOTAL_COUNT);
    });
    //图标2
    let workTickets = document.getElementById("workTicket");
    if (workTickets) {
      let myChart = echarts.init(workTickets);

      myChart.setOption({
        color: ["#72b85b", "#f6841a", "#cc0404"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          transitionDuration: 0, //防止浏览器抖动
        },
        grid: {
          left: "10%",
          // right: "30%",
          bottom: "15%",
          top: "5%",
          containLabel: true,
          // z: 22,
        },
        xAxis: {
          type: "category",
          data: teamName,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#0c3b71",
            },
          },
          axisLabel: {
            show: true,
            color: "rgb(170,170,170)",
            interval: 0,
            textStyle: {
              lineHeight: 14,
            },
            formatter: function (value) {
              if (teamName.length == 1) {
                return value;
              } else if (teamName.length < 5 && teamName.length > 1) {
                return value;
              } else {
                var ret = ""; //拼接加\n返回的类目项
                var maxLength = 3; //每项显示文字个数
                var valLength = value.length; //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                if (rowN > 1) {
                  //如果类目项的文字大于5,
                  for (var i = 0; i < rowN; i++) {
                    var temp = ""; //每次截取的字符串
                    var start = i * maxLength; //开始截取的位置
                    var end = start + maxLength; //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + "\n";
                    ret += temp; //凭借最终的字符串
                  }
                  return ret;
                } else {
                  return value;
                }
              }
            },
          },
        },
        legend: {
          data: ["正常已办", "超时已办", "超期未办"],
          left: "center",
          align: "left",
          bottom: "2%",
          textStyle: {
            color: "#000",
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35,
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#f2f2f2"],
            },
          },
          axisLine: {
            lineStyle: {
              color: "#0c3b71",
            },
          },
          axisLabel: {
            color: "rgb(170,170,170)",
            formatter: "{value} ",
          },
        },
        series: [
          {
            name: "正常已办",
            type: "bar",
            stack: null,
            data: finishQty,
            barWidth: "20%",
            barGap: "10%",
          },
          {
            name: "超时已办",
            type: "bar",
            stack: null,
            data: overFinishQty,
            barWidth: "20%",
            barGap: "10%",
          },
          {
            name: "超期未办",
            type: "bar",
            stack: null,
            data: wattingQty,
            barWidth: "20%",
            barGap: "10%",
          },
        ],
      });
    }
  }

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

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