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";
import IconFont from "../../../utils/iconFont";
import { T } from "antd/lib/upload/utils";

// 年度安全检查统计 弹窗 年度安全检查统计  按月 按生产单元
class BI056Dilg2_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: {
        mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
        yAxisName: [
          ["露天矿 隐患名称", "电机车轨道枕木下沉", "电机车刹车闸瓦磨损", "电机车导线线夹断裂", "电机车轨道断裂", "电机车刹车泵漏气"],
          ["选矿厂 隐患名称", "电车车轨道枕木下沉", "电机车刹车闸瓦磨损", "电机车导线线夹断裂", "电机车轨道断裂", "电机车刹车泵漏气"],
          ["尾矿库 隐患名称", "电机车轨道枕木下沉", "电机车刹车闸瓦磨损", "电机车导线线夹断裂", "电机车轨道断裂", "电机车刹车泵漏气"],
          ["职能部门 隐患名称", "电机车轨道枕木下沉", "电机车刹车闸瓦磨损", "电机车导线线夹断裂", "电机车轨道断裂", "电机车刹车泵漏气"]
        ],
        count: [
          [31, 22, 18, 15, 8, 5],
          [29, 20, 17, 16, 8, 5],
          [26, 21, 15, 13, 3, 2],
          [25, 21, 13, 10, 3, 1]
        ]
      }
    }
  }

  componenthidMount() {
    // this.getBaseInfoData();
    this.getBaseInfoDataOnline();
  }

  componentDidMount() {
    // this.getBaseInfoData();
    this.getBaseInfoDataOnline();
  }

  getBaseInfoData = (mineType) => {
    this.RiskTop(this.state.Data, 0);
    this.RiskTop(this.state.Data, 1);
    this.RiskTop(this.state.Data, 2);
    this.RiskTop(this.state.Data, 3);
  }

  RiskTop = (Data, idIndex) => {
    let divShow = document.getElementById('divShow' + idIndex); //0-3
    if (divShow) {
      var count = Data.count
      let myChart = echarts.init(divShow);
      var title = this.state.Data.mineTypeName[idIndex]
      var yAxisName = Data.yAxisName[idIndex]
      var seriesData = Data.count[idIndex]
      var ColorShow = this.state.ColorShow
      debugger
      myChart.setOption(
        {
          title: {
            text: title,
            left: "center",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "12%",
            top: "10%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "value",
            },
          ],
          yAxis: [
            {
              type: "category",
              data: yAxisName,//Data.yAxisName,
            },
          ],
          series: [
            {
              type: "bar",
              data: seriesData,// count,
              itemStyle: {
                color: function (params) {
                  return ColorShow[params.dataIndex]
                }
              },
              barWidth: 25,//横轴的柱状图宽度
              label: {
                normal: {
                  show: true,
                  // position: 'insideRight', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    // color: '#333', // 字体颜色
                  },
                },
              },
            },
          ],
        },
        true
      );
    }
  };

  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_2_2",
      payload: json,
      onlyData: false,
      onComplete: (ret) => {
        if (ret && ret.IsSuccessful) {
          this.setState({   //设置setState全局变量
            Data: {
              mineTypeName: ret.Data.lisMineTypeOrder,// ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
              yAxisName: ret.Data.ListDescreption,//["露天矿", "选矿厂", "尾矿库", "职能部门"],
              count: ret.Data.ListCount
            },      //将ret对象赋值给data, data供页面调用
          })
          this.RiskTop(this.state.Data, 0);
          this.RiskTop(this.state.Data, 1);
          this.RiskTop(this.state.Data, 2);
          this.RiskTop(this.state.Data, 3);
        } else {
          message.error("获取信息失败，请刷新后再试！");
        }
      },
    });
  };


  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={11} className="risk-model-col" style={{ padding: 0 }}>
            <div id="divShow0" className="risk-chart" style={{ width: "100%", height: "330px" }}></div>
          </Col>
          <Col span={1} > </Col>
          <Col span={11} className="risk-model-col" style={{ padding: 0 }}>
            <div id="divShow1" className="risk-chart" style={{ width: "100%", height: "330px" }}></div>
          </Col>
        </Row>
        <Row gutter={12} style={{ marginTop: "30px", textAlign: "center" }}>
          <Col span={1} > </Col>
          <Col span={11} className="risk-model-col" style={{ padding: 0 }}>
            <div id="divShow2" className="risk-chart" style={{ width: "100%", height: "330px" }}></div>
          </Col>
          <Col span={1} > </Col>
          <Col span={11} className="risk-model-col" style={{ padding: 0 }}>
            <div id="divShow3" className="risk-chart" style={{ width: "100%", height: "330px" }}></div>
          </Col>
        </Row>
        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg2_2);