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 BI056Dilg2_1 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: "",
      },
      IsSuccessful: true,
      Data: {
        legendName: ['已整改', '未整改', '整改率'],
        xAxisName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        titleMineType: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
        countDeal: [[5, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6], [7, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6], [13, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6], [15, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6]],
        countNotDeal: [[1, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2], [2, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2], [3, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2], [4, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2]],
        linePercent: [[100.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 66.67], [70.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 66.67], [80.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 90], [90.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 80]],
      }
    }
  }

  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_2_1",
      payload: json,
      onlyData: false,
      onComplete: (ret) => {
        if (ret && ret.IsSuccessful) {
          this.setState({
            Data: Object.assign({}, this.state.Data, { "titleMineType": ret.Data.lisMineTypeOrder, "countDeal": ret.Data.listFinish2_1, "countNotDeal": ret.Data.listNotFinish2_1, "linePercent": ret.Data.listFinish2_1Percent })
          })
          this.getBaseInfoData()
        } else {
          message.error("获取信息失败，请刷新后再试！");
        }
        // Data: {
        //   legendName: ['已整改', '未整改', '整改率'],
        //   xAxisName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        //   titleMineType: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
        //   countDeal: [[5, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6], [7, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6], [13, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6], [15, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6]],
        //   countNotDeal: [[1, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2], [2, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2], [3, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2], [4, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2]],
        //   linePercent: [[100.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 66.67], [70.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 66.67], [80.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 90], [90.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 80]],
        // }
      },
    });
  };

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


  RiskDeal = (Data, index) => {
    let divID = document.getElementById("div" + index)
    if (divID) {
      let myChart = echarts.init(divID);
      var listseries = []

      var title = Data.titleMineType[index - 1] + "隐患整改情况"
      for (let i = 0; i < Data.legendName.length; i++) {
        if (i < 2) {

          listseries.push({
            name: Data.legendName[i],
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: i == 0 ? Data.countDeal[index - 1] : (i == 1 ? Data.countNotDeal[index - 1] : Data.linePercent[index - 1]),
            itemStyle: { color: this.state.ColorShow[i == 0 ? 6 : (i - 1)] },
            barWidth: 30,// this.state.barWidth

          })
        } else {
          listseries.push(
            {
              name: Data.legendName[i],
              type: "line",
              label: {
                show: true,
                position: "top",
                formatter: "{c}%",
                color: this.state.ColorShow[3]
              },
              lineStyle: {
                color: this.state.ColorShow[3],// "#ffb122"
              },
              data: Data.linePercent[index - 1],
              itemStyle: { color: this.state.ColorShow[3] },//this.state.ColorShow[i]
              yAxisIndex: 1
            })
        }
      }

      myChart.setOption(
        {
          title: {
            text: title,
            left: "center",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (value) {
              var tooltipShow = ''
              if (value.length > 0) {
                tooltipShow += value[0].axisValueLabel + '<br/>'
                for (var i = 0; i < value.length; i++) {
                  if (value[i].componentSubType == "bar") {
                    tooltipShow += value[i].marker + value[i].seriesName + ":" + value[i].value + "<br/>"
                  } else {
                    tooltipShow += value[i].marker + value[i].seriesName + ":" + value[i].value + "%"
                  }
                }
              }
              return tooltipShow
            }
          },
          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.xAxisName,
            axisLabel: {
              interval: 0,
              rotate: 20,
              formatter: function (value) {
                return value
              }
            }
          },
          yAxis: [
            {
              name: '整改情况',
              type: 'value',
            }, {
              name: "完成率(%)",
              type: "value",
              min: 0,
              max: 70,
              position: "middle",// "right",
              formatter: "{value}%",
              min: 0,
              max: 100,
              axisLabel: {
                // textStyle: { fontSize: 20 },
                formatter: '{value} %',     // 给坐标轴标签加单位
              },
              splitLine: {     //网格线
                show: false
              }
            }
          ],
          series: listseries
        },
        true
      );
    }
  };

  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={11} style={{ padding: 0 }}>
            <div id="div1" style={{ width: "100%", height: "330px" }}></div>
          </Col>
          <Col span={1} > </Col>
          <Col span={11} style={{ padding: 0 }}>
            <div id="div2" 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" style={{ width: "100%", height: "330px" }}></div>
          </Col>
          <Col span={1} > </Col>
          <Col span={11} style={{ padding: 0 }}>
            <div id="div4" style={{ width: "100%", height: "330px" }}></div>
          </Col>
        </Row>
        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg2_1);