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 BI056Dilg3_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月"],
        mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
        listLegendName: [
          ['巡回检查', '例行检查', '专业检查', '综合检查', '重大事故隐患专项排查'],
          ['巡回检查', '例行检查', '专业检查', '综合检查'],
          ['日常巡检', '防洪安全检查', '坝体安全检查', '库区安全检查', '重大事故隐患专项排查'],
          ['巡回检查', '例行检查', '专业检查', '综合检查', '重大事故隐患专项排查']
        ],
        //每个生产单元  每种检查类型 1-12 月数量
        checkTypeCount1: [[2, 3, 3, 5, 3, 2, 6, 2, 1, 0, 1, 2], [1, 2, 3, 3, 2, 4, 5, 3, 1, 0, 9, 8], [1, 2, 3, 4, 5, 3, 2, 4, 1, 1, 4, 0], [2, 1, 1, 0, 0, 3, 3, 2, 2, 0, 0, 1], [1, 1, 1, 3, 3, 1, 3, 1, 2, 2, 3, 4]],
        checkTypeCount2: [[2, 3, 6, 6, 3, 2, 6, 3, 8, 0, 1, 2], [1, 2, 7, 3, 5, 4, 5, 4, 1, 4, 9, 2], [1, 2, 8, 4, 5, 3, 2, 4, 3, 4, 0, 6], [2, 3, 1, 0, 3, 3, 3, 6, 3, 4, 6, 1]],
        checkTypeCount3: [[0, 0, 3, 3, 5, 5, 7, 7, 3, 4, 7, 1], [5, 7, 0, 0, 1, 1, 2, 1, 4, 0, 3, 6], [2, 2, 5, 7, 4, 0, 0, 4, 4, 0, 0, 4], [1, 5, 4, 2, 4, 0, 2, 0, 4, 0, 0, 4], [1, 1, 1, 0, 1, 0, 0, 5, 0, 0, 1, 0]],
        checkTypeCount4: [[4, 2, 2, 5, 4, 0, 2, 5, 0, 2, 4, 4], [4, 0, 4, 0, 0, 4, 0, 0, 4, 0, 4, 0], [1, 0, 3, 0, 1, 3, 0, 7, 2, 0, 3, 0], [1, 0, 3, 1, 1, 3, 3, 3, 2, 0, 3, 0], [1, 0, 3, 0, 1, 3, 0, 2, 2, 1, 0, 2]],
      }
    }
  }

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

  componentDidMount() {
    // this.getBaseInfoData();
    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_3_2",
      payload: json,
      onlyData: false,
      onComplete: (ret) => {
        if (ret && ret.IsSuccessful) {
          this.setState({
            Data: Object.assign({}, this.state.Data, {
              "mineTypeName": ret.Data.lisMineTypeOrder,
              "listLegendName": ret.Data.lisMineCheckType,
              "checkTypeCount1": ret.Data.Count3_1.length >= 1 ? ret.Data.Count3_1[0] : null,
              "checkTypeCount2": ret.Data.Count3_1.length >= 2 ? ret.Data.Count3_1[1] : null,
              "checkTypeCount3": ret.Data.Count3_1.length >= 3 ? ret.Data.Count3_1[2] : null,
              "checkTypeCount4": ret.Data.Count3_1.length >= 4 ? ret.Data.Count3_1[3] : null
            })
          })
          this.getBaseInfoData();
        } else {
          message.error("获取信息失败，请刷新后再试！");
        }
      }
    });
  };

  getBaseInfoData = (mineType) => {
    this.CheckCount(this.state.Data, "div1", 1);
    this.CheckCount(this.state.Data, "div2", 2);
    this.CheckCount(this.state.Data, "div3", 3);
    this.CheckCount(this.state.Data, "div4", 4);
  };

  // index 从1开始
  CheckCount = (Data, divId, index) => {
    let divShow = document.getElementById(divId);
    if (divShow) {
      let myChart = echarts.init(divShow);
      const labelOption = {
        show: true,
        position: 'top',
        formatter: '{c}',
        textStyle: {
          fontSize: 12, // 字体大小
          color: '#333', // 字体颜色
        }
      };
      var title = Data.mineTypeName[index - 1]
      var month = (new Date()).getMonth() + 1//取当前月
      // mineTypeName[]  mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
      var dataList = []
      switch (index) {
        case 1: dataList = Data.checkTypeCount1
          break;
        case 2: dataList = Data.checkTypeCount2
          break;
        case 3: dataList = Data.checkTypeCount3
          break;
        case 4: dataList = Data.checkTypeCount4
          break;
      }

      var LegendName = Data.listLegendName[index - 1]
      var seriesShow = []
      for (let i = 0; i < LegendName.length; i++) {
        seriesShow.push({
          name: LegendName[i],
          barWidth: this.state.barWidth,
          type: 'bar',
          barGap: 0,
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: dataList[i],//.slice(0, month),
          itemStyle: { color: this.state.ColorShow[i] },
        })
      }

      myChart.setOption(
        {
          // 检查类型次数统计
          title: {
            text: title,
            left: "center",
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
          },
          legend: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: Data.legendName
          },
          xAxis: [
            {
              type: 'category',
              axisTick: { show: false },
              data: Data.axisLabelMonth,
              axisLine: {
                lineStyle: {
                  color: "#0c3b71",
                },
              },
              axisLabel: {
                show: true,
                color: "rgb(170,170,170)",
                interval: 0,
                textStyle: {
                  lineHeight: 14,
                },
              },
            },
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: seriesShow
        },
        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={11} style={{ padding: 0 }}>
            <div id="div1" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
          </Col>
          <Col span={1} > </Col>
          <Col span={11} style={{ padding: 0 }}>
            <div id="div2" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
          </Col>
        </Row>
        <Row gutter={12} style={{ marginTop: "30px", textAlign: "center" }}>
          <Col span={1} > </Col>
          <Col span={11} style={{ padding: 0 }}>
            <div id="div3" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
          </Col>
          <Col span={1} > </Col>
          <Col span={11} style={{ padding: 0 }}>
            <div id="div4" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
          </Col>
        </Row>
        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg3_2);