import React, { useState, useEffect, useRef, Component } from "react";
import { connect } from "dva";
import { initFilter, extendOrder, guid } from "../../../utils/common";
import { Row, Col, Modal, Table, Button, Select, DatePicker, message } from "antd";
import echarts from "echarts";
import moment from "moment";

// 年度安全检查统计 弹窗 年度安全检查统计  按月 按生产单元
class BI056Dilg1_2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ColorShow:this.props.data.ColorShow,//: ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
      barWidth: this.props.barWidth,
      isShow1: false,
      isShow2: false,
      dtStart: null,//开始时间
      dtEnd: null,//结束时间
      mineType: 0,//生产单元
      detailForm: {
        formCode: "",
        title: "",
      },
      Data: {
        axisLabelMonth: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        legendName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
        //各生产单元 1~12 月数量 时间未到为空 没有数量就为0
        checkrisk: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]],
      }
    }
  }

  componenthidMount() {
    //this.CheckCount(this.state.Data)
    this.getBaseInfoDataOnline();
  }

  componentDidMount() {
    //this.CheckCount(this.state.Data)
    this.getBaseInfoDataOnline();
  }

  //获取数据
  getBaseInfoDataOnline = (mineType) => {
    const json = initFilter(this.props.login.OrgId);
    extendOrder(json, "CREATE_TIME", 1);
    json.Parameter1 = mineType;
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BISafe/GetBI056_1_2",
      payload: json,
      onlyData: false,
      onComplete: (ret) => {
        if (ret && ret.IsSuccessful) {
          this.setState({
            Data: Object.assign({}, this.state.Data, { "legendName": ret.Data.lisMineTypeOrder, "checkrisk": ret.Data.ListCount })
          })
          this.CheckCount(this.state.Data)
        } else {
          message.error("获取信息失败，请刷新后再试！");
        }
      },
    });
  };



  CheckCount = (Data) => {
    let divRiskCount = document.getElementById("divRiskCount");
    if (divRiskCount) {
      let myChart = echarts.init(divRiskCount);
      var listSeries = []
      for (var i = 0; i < Data.legendName.length; i++) {
        listSeries.push({
          name: Data.legendName[i],
          data: Data.checkrisk[i],
          type: "bar",
          itemStyle: { color: this.state.ColorShow[i] },
          barWidth: this.state.barWidth,//横轴的柱状图宽度
          label: {
            normal: {
              show: true,
              position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
              formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
              textStyle: {
                fontSize: 12, // 字体大小
                color: '#333', // 字体颜色
              },
            },
          },
        })
      }

      myChart.setOption(
        {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: Data.legendName,
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "12%",
            top: "10%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: Data.axisLabelMonth,
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: listSeries
        },
        true
      );
    }
  };

  render() {
    return (
      <div style={{ backgroundColor: "#fff", top: "0", bottom: "0", left: "0", right: "0", margin: "auto" }}  >

        {/* 第一行 */}
        <Row gutter={12} style={{ marginTop: "5px", textAlign: "center" }}>
          <Col span={1} > </Col>
          <Col span={22} style={{ padding: 0 }}>
            {/* <div className="home-always-title">
              <div className="home-always-left">
                <div className="home-always-badge"></div>
                <div className="home-always-name">隐患数量统计</div>
              </div>
            </div> */}
            <div id="divRiskCount" style={{ width: "100%", height: "330px" }}></div>
          </Col>
          <Col span={1} > </Col>
        </Row>
        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg1_2);