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

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

  componentDidMount() {
    // console.log(this.props.ListSafeCheckYearMonth, "000000");
    let data = [];
    data = this.props.ListSafeCheckYearMonth;
    let xData = [];
    let data1 = [];
    let data2 = [];
    let data3 = [];
    let seriesName = [];

    data.map((item) => {
      // var yeM = item.YEAR.toString().substring(2)
      // if (item.MONTH > 9) {
      //   xData.push(yeM + '' + item.MONTH);
      // } else {
      //   xData.push(yeM + '0' + item.MONTH);
      // }

      // var yeM = item.YEAR.toString().substring(2)
      // if (item.MONTH > 9) {
      //   xData.push(item.MONTH + '月');
      // } else {
      //   xData.push(item.MONTH + '月');
      // }

      xData.push(item.YEAR + '年' + item.MONTH + '月');
      seriesName = item.listSOURCENAME;
      data1.push(item.listListCount);
    });
    for (var i = 0; i < data[0].listListCount.length; i++) {
      for (var j = 0; j < data.length; j++) {
        data2.push(data1[j][i]);
      }
    }
    for (var i = 0; i < data2.length; i += data.length) {
      data3.push(data2.slice(i, i + data.length));
    }
    let series = [];
    for (let i = 0; i < data3.length; i++) {
      series.push({
        name: seriesName[i],
        type: "bar",
        stack: "总量",
        data: data3[i],
        barWidth: "40%",
      });
    }
    //图标2
    let dangerTotals = document.getElementById("safecheck");
    if (dangerTotals) {
      let myChart = echarts.init(dangerTotals);
      myChart.setOption({
        color: ["#4285F4", "#72b85b", "#c92a2a", "#ffa94d"],

        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          transitionDuration: 0,
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "15%",
          top: "5%",
          containLabel: true,
          z: 22,
        },
        xAxis: {
          type: "category",
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#0c3b71",
            },
          },
          axisLabel: {
            show: true,
            color: "rgb(170,170,170)",
            interval: 0,
            textStyle: {
              lineHeight: 14,
            },
            formatter: function (param) {
              return param.split('年')[1]
            }
          },
        },
        legend: {
          data: seriesName,
          left: "center",
          align: "left",
          bottom: "2%",
          textStyle: {
            color: "#000",
          },
          itemWidth: 10,
          itemHeight: 10,
          // itemGap: 15,
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#f2f2f2"],
            },
          },
          axisLine: {
            lineStyle: {
              color: "#0c3b71",
            },
          },
          axisLabel: {
            color: "rgb(170,170,170)",
            formatter: "{value} ",
          },
        },
        series: series,
      });
    }

  }

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

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