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";
// import { float } from "html2canvas/dist/types/css/property-descriptors/float";

// 年度安全检查统计 弹窗 年度安全检查统计  按月 按生产单元
class BI056Dilg1_1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ColorShow: ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
      barWidth: this.props.barWidth,
      isShow1: false,
      isShow2: false,
      isShowbtn1: true,
      isShowbtn2: true,
      isShowbtn3: true,
      isShowbtn4: true,
      dtStart: null,//开始时间
      dtEnd: null,//结束时间
      mineType: 0,//生产单元
      detailForm: {
        formCode: "",
        title: "",
      },
      ret: {
        IsSuccessful: true,
        Data: {
          checkMineType: {
            legendName: ["公司级", "部门级", "车间级", "班组级"],
            axisLabelMonth: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],

            mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
            checkCountMonth: [
              //有几月的数据就统计到几月 时间不到不统计 也不能放入0
              // 公司级 、 部门级  车间级 班组级  各一个数组
              // [公司级露天矿1月数据,公司级选矿厂1月数据,公司级尾矿库1月数据,公司级职能部门1月数据  ,公司级露天矿2月数据,公司级选矿厂2月数据,公司级尾矿库2月数据,公司级职能部门2月数据]

              // 公司级
              [1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6, 7, 7, 7, 7, 8, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, 11, 11, 11, 11, 12, 12, 12, 12],
              // 部门级
              [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
              // 车间级
              [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
              // 班组级
              [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60]

              // // 2个月的数据如下图
              // [1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4],
              // // 部门级
              // [5, 5, 5, 5, 5, 5, 5, 5, 7, 7, 7, 7, 8, 8, 8, 8],
              // // 车间级
              // [30, 30, 30, 30, 30, 30, 30, 30, 9, 9, 9, 9, 4, 4, 4, 4],
              // // 班组级
              // [60, 60, 60, 60, 60, 60, 60, 60, 10, 10, 10, 10, 11, 11, 10, 11]

            ]
          },
        }
      }
    }
  }


  componenthidMount() {
    this.getBaseInfoData();
  }

  componentDidMount() {
    this.getBaseInfoData();
  }

  //获取数据
  getBaseInfoDataOnline = (mineType) => {
    const json2 = initFilter(this.props.login.OrgId);
    extendOrder(json2, "CREATE_TIME", 1);
    json2.Parameter1 = mineType;
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BIController/getRiskPerformanceData",
      payload: json2,
      onlyData: false,
      onComplete: (ret) => {
        this.this.state.CheckCount(ret?.Data.checkMineType, "divCheckCount1");
      },
    });
  };

  getBaseInfoData = (mineType) => {

    // var month = (new Date()).getMonth() + 1
    // if ((i + 1 + seasonIndex * 3) <= month)

    this.CheckCount(this.state.ret.Data.checkMineType, "divCheckCount1", 0);

    // this.CheckCount(this.state.ret.Data.checkMineType, "divCheckCount2", 1);
    // this.CheckCount(this.state.ret.Data.checkMineType, "divCheckCount3", 2);
    // this.CheckCount(this.state.ret.Data.checkMineType, "divCheckCount4", 3);
  };

  // seasonIndex 从0开始
  CheckCount = (Data, divId, seasonIndex) => {
    let divShow = document.getElementById(divId);
    if (divShow) {
      let myChart = echarts.init(divShow);

      // 3 一个季度 3个月
      var axisLabelMonth = []
      for (let i = 0; i < 3; i++) {
        axisLabelMonth.push((i + 1 + seasonIndex * 3) + '月');
      }

      var xAxisName = []
      for (let i = 0; i < 3; i++) {
        for (let j = 0; j < Data.mineTypeName.length; j++) {
          xAxisName.push((i + 1 + seasonIndex * 3) + '月 ' + Data.mineTypeName[i])//3个月一图表
        }
      }

      const labelOption = {
        show: true,
        position: 'top',
        formatter: '{c}',
        textStyle: {
          fontSize: 12, // 字体大小
          color: '#333', // 字体颜色
        }
      };


      var month = (new Date()).getMonth() + 1//取当前月

      var seriesShow = []
      for (let i = 0; i < Data.mineTypeName.length; i++) {
        var seriesData = []//数据  在每组数据中获取  Data.checkCountMonth[i]  

        var dateIndexMin = 0
        var dateIndexMax = 0

        if ((seasonIndex * 3) < month) {
          dateIndexMin = (seasonIndex * 3) * Data.mineTypeName.length
          // 12 = 3*Data.mineTypeName.length
          dateIndexMax = (dateIndexMin + 12) > (month * Data.mineTypeName.length) ? (month * Data.mineTypeName.length) : (dateIndexMin + 12)
        } else {
          dateIndexMin = (seasonIndex * 3) * Data.mineTypeName.length
          dateIndexMax = month * Data.mineTypeName.length

          if (dateIndexMin > dateIndexMax) {
            dateIndexMin = dateIndexMax
          }
        }

        for (let j = dateIndexMin; j < dateIndexMax; j++) {
          if (Data.checkCountMonth[i].length > j) {
            seriesData.push(Data.checkCountMonth[i][j])
          }
        }

        seriesShow.push({
          name: Data.legendName[i],
          barWidth: this.state.barWidth,
          type: 'bar',
          barGap: 0,
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: seriesData,
          itemStyle: { color: this.state.ColorShow[i] },
        })
      }

      myChart.setOption(
        {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
          },
          legend: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: Data.legendName
          },
          // toolbox: {
          //   show: true,
          //   orient: 'vertical',
          //   left: 'right',
          //   top: 'center',
          //   feature: {
          //     mark: { show: true },
          //     dataView: { show: true, readOnly: false },
          //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
          //     restore: { show: true },
          //     saveAsImage: { show: true }
          //   }
          // },

          xAxis: [
            {
              type: 'category',
              axisTick: { show: false },
              data: xAxisName,
              axisLine: {
                lineStyle: {
                  color: "#0c3b71",
                },
              },
              axisLabel: {
                show: true,
                color: "rgb(170,170,170)",
                interval: 0,
                textStyle: {
                  lineHeight: 14,
                },
                formatter: function (param) {
                  return param.split("月")[1];//X轴显示 把月份去除 加是以为 鼠标事件要显示月份
                },
              },
            },
            {
              type: 'category',
              position: 'bottom', // 将分组x轴位置定至底部，不然默认在顶部
              offset: 50, // 向下偏移，使分组文字显示位置不与原x轴重叠
              axisLine: {
                show: false // 隐藏分组x轴的轴线
              },
              axisTick: {
                show: true,
                length: 50, // 延长刻度线做分组线 
                inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
                // lineStyle: {
                //   color: '#ff9800'
                // }, // 非必须，仅为了演示，明显标示出分组刻度线
              },
              axisLabel: {
                inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
                interval: 0, // 强制显示全部刻度名
                formatter: function (val, index) {
                  // console.log('测试999 val--- ', val);
                  // console.log('测试999 index--- ', index);
                  return '    ' + val // 这儿可以根据 返回 空字符串，来调整 第二个 x 轴值出现的位置。
                }
              },
              data: axisLabelMonth// ['1月', '2月','3月']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: seriesShow
        },
        true
      );
    }
  };

  render() {
    const { isShowbtn1, isShowbtn2, isShowbtn3, isShowbtn4 } = this.state;
    return (
      <div
        style={{
          backgroundColor: "#fff",
          top: "0",
          bottom: "0",
          left: "0",
          right: "0",
          margin: "auto",
          // borderStyle: "solid",
          // borderColor: "#ccc",
          // borderWidth: "1px",
        }}
      >

        {/* 第一行 */}
        <Row gutter={12} style={{ marginTop: "5px", textAlign: "center" }}>
          <Col span={1} > </Col>
          <Col span={11} 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 style={{ float: "right" }}>
              {
                isShowbtn1 ? <Button style={{ zIndex: 1 }}>第一季度</Button> : null
              }
              {
                isShowbtn2 ? <Button style={{ zIndex: 1, marginLeft: '5px' }}>第二季度</Button> : null
              }
              {
                isShowbtn3 ? <Button style={{ zIndex: 1, marginLeft: '5px' }}>第三季度</Button> : null
              }
              {
                isShowbtn4 ? <Button style={{ zIndex: 1, marginLeft: '5px' }}>第四季度</Button> : null
              }
            </div>
            <div id="divCheckCount1" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>

          </Col>
          <Col span={1} > </Col>
          {/* <Col span={11} 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="divCheckCount2" 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 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="divCheckCount3" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
          </Col>
          <Col span={1} > </Col>
          <Col span={11} 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="divCheckCount4" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
          </Col>
        </Row> */}
        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg1_1);