import React from "react";
import { connect } from "dva";
import {
  initFilter,
  extendRule,
  extendInclude,
  getIsPC,
  openNotificationMobile,
} from "../../../utils/common";
import {
  ChartBarShow_Vertical,
  LineShow,
} from "../../../utils/commonEcharsShow";
import { notification, Button, Descriptions } from "antd";
import echarts from "echarts";
import styles from "../HI/StepForm2.css";

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

// 部门级 2023年度安全检查情况综合统计分析
class BI053BSSafeCheckYear extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        titleDate: "      ",
        countPlan: "      ",
        countFinishIntTime: "    ",
        countFinishOutTime: "    ",
        countNotFinish: "    ",
        count1: 0,
        count2: 0,
        count3: 0,
        count4: 0,
        parm7: "",
        parm8: "",

        count21: 0,
        count22: 0,
        count23: 0,
        parm27: "",
        count10: 7, //选矿安全检查数量
        count20: 3, //尾矿安全检查数量
        year: new Date().getFullYear(),
        depName: "选矿部",
      },
      listSafeCheckTypeYear: [],
      listCheckTypeYear: [],
    };
  }

  componenthidMount() {
    if (!getIsPC()) {
      openNotificationMobile("bottomRight", notification);
      this.state.displayStr = "none";
      this.state.displayNum = 24;
      //alert('手机');
    } else {
      this.state.displayStr = "";
      this.state.displayNum = 16;
      //alert('PC');
    }
    this.loadData();

    //定时器功能，暂时不开启
    // this.timerID = setInterval(() => this.getBaseInfoData(1, this.state.tableKey, 5), 120000);
  }
  componentDidMount() {
    this.loadData();
  }
  componentWillUnmount() {
    // this.timerID && clearTimeout(this.timerID);
  }

  //加载数据赋值
  loadData = () => {
    var orgId = this.props.login ? this.props.login.OrgId : "";
    var parm = this.props.login.currActivatedMenu.MENU_FORM_PARAMS;
    if (parm == null || parm == undefined) parm = "MineType=10_20";
    let json = initFilter(orgId, parm);
    this.props.dispatch({
      type: "app/getDataByPost",
      payload: json,
      url: "BI/BISafeYear/BIDepartmentSafeYearShow",
      onComplete: (result) => {
        if (result) {
          var count1 = 0;
          var count2 = 0;
          var count3 = 0;
          var count4 = 0;
          var parm7 = "";
          var parm8 = "";

          var count21 = 0;
          var count22 = 0;
          var count23 = 0;
          var parm27 = "";
          var count10 = 0; //选矿数量
          var count20 = 0; //尾矿数量

          var depName = "部门级";
          //数量赋值
          if (result.listSummary != null && result.listSummary.length == 2) {
            result.listSummary.forEach((item) => {
              if (item.PART == 1) {
                count1 = item.Count1;
                count2 = item.Count2;
                count3 = item.Count3;
                count4 = item.Count4;
                parm7 = item.Parameter7;
                parm8 = item.Parameter8;
                if (item.Parameter9 != null) depName = item.Parameter9; //部门名称
              } else if (item.PART == 3) {
                count21 = item.Count1;
                count22 = item.Count2;
                count23 = item.Count3;
                parm27 = item.Parameter7;
              }
            });
          }
          var year = new Date().getFullYear();
          if (
            result.listSafeCheckTypeYear != null &&
            result.listSafeCheckTypeYear.length > 0
          ) {
            year = result.listSafeCheckTypeYear[0].YEAR;

            result.listSafeCheckTypeYear.forEach((e) => {
              if (e.MineType == 10) {
                count10++;
              } else if (e.MineType == 20) {
                count20++;
              }
            });
          }

          this.setState({
            data: {
              count1: count1,
              count2: count2,
              count3: count3,
              count4: count4,
              parm7: parm7,
              parm8: parm8,

              count21: count21,
              count22: count22,
              count23: count23,
              parm27: parm27,
              count10: count10,
              count20: count20,
              listSafeCheckTypeYear: result.listSafeCheckTypeYear,
              listCheckTypeYear: result.listCheckTypeYear,
              year: year,
              depName: depName,
            },
          });

          //   ChartBarShow_Vertical(
          //     echarts,
          //     "divRisk",
          //     result.listCheckTypeYear,
          //     "安全检查隐患整改统计图（近12个月）"
          //   );
          var xAxisData = [];
          var yAxisData1 = [];
          var yAxisData2 = [];
          var yAxisData3 = [];

          result.listCheckTypeYear.forEach((item) => {
            xAxisData.push(item.YEAR + "-" + item.MONTH);
            yAxisData1.push(item.INTTIMECOUNT);
            yAxisData2.push(item.OUTTIMECOUNT);
            yAxisData3.push(item.NOTFINISHCOUN);
          });
          let divRisks = document.getElementById("divRisk");
          if (divRisks) {
            let myChart = echarts.init(divRisks);

            myChart.setOption({
              color: ["#67afee", "#e67f82", "#858FAC"],
              title: {
                text: "安全检查隐患整改统计图（近12个月）",
                left: "center",
              },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                },
              },
              grid: {
                left: "7%",
                // right: "10%",
                bottom: 0,
                top: "25%",
                containLabel: true,
                z: 22,
              },
              xAxis: {
                type: "category",
                data: xAxisData,
                axisLabel: {
                  show: true,
                  color: "rgb(170,170,170)",
                  interval: 0,
                  textStyle: {
                    lineHeight: 14,
                  },
                },
              },
              legend: {
                data: ["按期整改", "延期整改", "未完成"],
                left: "center",
                align: "left",
                top: "10%",
                textStyle: {
                  color: "#000",
                },
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 35,
              },
              yAxis: {
                type: "value",
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: ["#f2f2f2"],
                  },
                },
                axisLabel: {
                  color: "rgb(170,170,170)",
                  formatter: "{value} ",
                },
              },
              series: [
                {
                  name: "按期整改",
                  type: "bar",
                  stack: "总量",
                  data: yAxisData1,
                  barWidth: "18px",
                  label: {
                    show: true,
                  },
                  emphasis: {
                    focus: "series",
                  },
                  //   barMinHeight: 2,
                },
                {
                  name: "延期整改",
                  type: "bar",
                  stack: "总量",
                  data: yAxisData2,
                  barWidth: "18px",
                  label: {
                    show: true,
                  },
                  emphasis: {
                    focus: "series",
                  },
                  //   barMinHeight: 2,
                },
                {
                  name: "未完成",
                  type: "bar",
                  stack: "总量",
                  data: yAxisData3,
                  barWidth: "18px",
                  label: {
                    show: true,
                  },
                  emphasis: {
                    focus: "series",
                  },
                  //   barMinHeight: 2,
                },
              ],
            });
          }

          var dataXAxis = [];
          var dataSeries = [];
          if (
            result.listCheckTypeYear != null &&
            result.listCheckTypeYear != undefined &&
            result.listCheckTypeYear.length > 0
          ) {
            result.listCheckTypeYear.forEach((item) => {
              dataXAxis.push(item.YEAR + "-" + item.MONTH);
              dataSeries.push(item.FINISHPERCENT);
            });
          }

          let divRiskPercents = document.getElementById("divRiskPercent");
          if (divRiskPercents) {
            let myChart = echarts.init(divRiskPercents);
            myChart.setOption({
              title: {
                text: "安全检查隐患整改率（近12个月）",
                left: "center",
              },
              tooltip: {
                trigger: "axis",
                formatter: '{b0}<br />{a0}:{c0}%'
              },
              legend: {
                data: ["隐患整改率"],
                left: "center",
                align: "left",
                top: "10%"
              },
              grid: {
                containLabel: true,
                left: "7%",
                // right: "10%",
                bottom: 0,
                top: "25%",
              },
              //   toolbox: {
              //     feature: {
              //       saveAsImage: {},
              //     },
              //   },
              xAxis: {
                type: "category",
                boundaryGap: false, //坐标轴两边留白
                data: dataXAxis,
                axisLabel: {
                  //坐标轴刻度标签的相关设置。
                  interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
                  //	margin:15,
                  textStyle: {
                    color: "#1B253A",
                    fontStyle: "normal",
                    fontFamily: "微软雅黑",
                    fontSize: 12,
                  },
                  //rotate:50,
                },
                axisTick: {
                  //坐标轴刻度相关设置。
                  show: false,
                },
                axisLine: {
                  //坐标轴轴线相关设置
                  lineStyle: {
                    color: "#E5E9ED",
                    // opacity:0.2
                  },
                },
                splitLine: {
                  //坐标轴在 grid 区域中的分隔线。
                  show: true,
                  lineStyle: {
                    color: "#E5E9ED",
                    // 	opacity:0.1
                  },
                },
              },
              yAxis: [
                {
                  type: "value",
                  splitNumber: 5,
                  axisLabel: {
                    textStyle: {
                      color: "#a8aab0",
                      fontStyle: "normal",
                      fontFamily: "微软雅黑",
                      fontSize: 12,
                    },
                    formatter: function (name) {
                      return name + '%'
                    },
                  },
                  axisLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  splitLine: {
                    show: true,
                    lineStyle: {
                      color: "#E5E9ED",
                      // 	opacity:0.1
                    },
                  },
                },
              ],
              series: [
                {
                  name: "隐患整改率",
                  type: "line",
                  smooth: true,
                  itemStyle: {
                    normal: {
                      color: "#3A84FF",
                      lineStyle: {
                        color: "#3A84FF",
                        width: 1,
                      },
                      areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                          {
                            offset: 0,
                            color: "rgba(58,132,255,0)",
                          },
                          {
                            offset: 1,
                            color: "rgba(58,132,255,0.35)",
                          },
                        ]),
                      },
                    },
                  },
                  data: dataSeries,
                },
              ],
            });
          }

          //   LineShow(
          //     echarts,
          //     "divRiskPercent",
          //     "安全检查隐患整改率（近12个月）",
          //     dataXAxis,
          //     dataSeries
          //   );
        }
      },
    });
  };

  // 搜索
  handleSearch = (item) => {
    this.getBaseInfoData(1, item, null);
  };

  closeModal = () => {
    this.setState({
      searchVisible: false,
      searchTodayVisible: false,
    });
  };

  render() {
    const { data } = this.state;
    return (
      <div
        style={{
          backgroundColor: "white",
          width: "1200px",
          top: "0",
          bottom: "0",
          left: "0",
          right: "0",
          margin: "auto",
          borderStyle: "solid",
          borderColor: "#ccc",
          borderWidth: "1px",
        }}
      >
        <div className={styles.routeHome}>
          <h1 className={styles.showPrintHead}>
            {" "}
            {data.depName}{" "}
            {/* <a href="#" style={{ fontWeight: "600", color: "black" }}> */}
            {data.year}年度
            {/* </a> */}
            安全检查情况综合统计分析
          </h1>{" "}
          {/* {this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS == "30" ? "矿山部" : "选矿部"}  */}
          {/* <h3 style={{ textAlign: 'center' }}>({data.titleDate})</h3> */}
          <div style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            //   marginBottom: "20px",
          }}>
            <div className={styles.menuPie}>
              <li>
                计划检查数
                <br />
                <div className={styles.dataStyle}>
                  {data.count1}
                </div>
              </li>
              <li>
                按时已办
                <br />
                <div className={styles.dataStyle1}>
                  {data.count2}
                </div>
              </li>
              <li>
                超时已办
                <br />
                <div className={styles.dataStyle2}>
                  {data.count3}
                </div>
              </li>
              <li>
                未完成数
                <br />
                <div className={styles.dataStyle3}>
                  {data.count4}
                </div>
              </li>
              <li>
                完成率
                <br />
                <div className={styles.dataStyle}>
                  {data.parm7}
                </div>
              </li>
              <li>
                及时完成率
                <br />
                <div className={styles.dataStyle}>
                  {data.parm8}
                </div>
              </li>
            </div>
          </div>
          {/* <hr /> */}
          {/* 表一 */}
          <div style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            //   marginBottom: "20px",
            margin: "0px 20px 20px 20px",
            flexDirection: 'column'
          }}>
            <div>
              {data?.listSafeCheckTypeYear ? (
                <div>
                  <div className={styles.menuPie4}>
                    {data.listSafeCheckTypeYear.map((item) => {
                      console.log(
                        data.listSafeCheckTypeYear,
                        "data.listSafeCheckTypeYeardata.listSafeCheckTypeYear"
                      );
                      if (item.NAME != "合计") {
                        if (item.MineType == 10) {
                          return (
                            <li>
                              {item.NAME} <br /> {item.COUNTTOTAL}
                            </li>
                          );
                        }
                      }
                    })}
                  </div>
                  <div className={styles.menuPie4}>
                    {data.listSafeCheckTypeYear.map((item) => {
                      console.log(
                        data.listSafeCheckTypeYear,
                        "data.listSafeCheckTypeYeardata.listSafeCheckTypeYear"
                      );
                      if (item.NAME != "合计") {
                        if (item.MineType == 20) {
                          return (
                            <li style={{ backgroundColor: 'rgba(226,240,217,1)' }}>
                              {item.NAME} <br /> {item.COUNTTOTAL}
                            </li>
                          );
                        }
                      }
                    })}
                  </div>
                </div>
              ) : (
                <div className={styles.menuPie}>
                  <li>巡回检查</li>
                  <li>例行检查</li>
                  <li>专业检查</li>
                  <li>季节性检查</li>
                  <li>节假日检查</li>
                  <li>复产前检查</li>
                  <li>上级布置</li>
                </div>
              )}
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                width: "1100px",
              }}
            >
              <table className={styles.tableRow}>
                <tbody>
                  <tr>
                    <th>序号</th>
                    <th>检查层级</th>
                    <th>1月</th>
                    <th>2月</th>
                    <th>3月</th>
                    <th>4月</th>
                    <th>5月</th>
                    <th>6月</th>
                    <th>7月</th>
                    <th>8月</th>
                    <th>9月</th>
                    <th>10月</th>
                    <th>11月</th>
                    <th>12月</th>
                    <th>合计</th>
                    <th>备注</th>
                  </tr>
                  {data?.listSafeCheckTypeYear ? (
                    data.listSafeCheckTypeYear.map((item, i) => {
                      if (item.NAME == "合计") {
                        return (
                          <tr>
                            <td colSpan={2}>{item.NAME}</td>
                            <td>
                              {item.COUNTJANUARY == 0 ? "" : item.COUNTJANUARY}
                            </td>
                            <td>
                              {item.COUNTFEBRUARY == 0
                                ? ""
                                : item.COUNTFEBRUARY}
                            </td>
                            <td>
                              {item.COUNTMARCH == 0 ? "" : item.COUNTMARCH}
                            </td>
                            <td>
                              {item.COUNTAPRIL == 0 ? "" : item.COUNTAPRIL}
                            </td>
                            <td>{item.COUNTMAY == 0 ? "" : item.COUNTMAY}</td>
                            <td>{item.COUNTJUNE == 0 ? "" : item.COUNTJUNE}</td>
                            <td>{item.COUNTJULY == 0 ? "" : item.COUNTJULY}</td>
                            <td>
                              {item.COUNTAUGUST == 0 ? "" : item.COUNTAUGUST}
                            </td>
                            <td>
                              {item.COUNTSEPTEMBER == 0
                                ? ""
                                : item.COUNTSEPTEMBER}
                            </td>
                            <td>
                              {item.COUNTOCTOBER == 0 ? "" : item.COUNTOCTOBER}
                            </td>
                            <td>
                              {item.COUNTNOVEMBER == 0
                                ? ""
                                : item.COUNTNOVEMBER}
                            </td>
                            <td>
                              {item.COUNTDECEMBER == 0
                                ? ""
                                : item.COUNTDECEMBER}
                            </td>
                            <td>
                              {item.COUNTTOTAL == 0 ? "" : item.COUNTTOTAL}
                            </td>
                            <td></td>
                          </tr>
                        );
                      } else if (item.ROW_NO == 0) {
                        return (
                          <tr>
                            {/* <td>{item.ROW_NO + 1}</td> */}
                            <td>{i + 1}</td>
                            <td>{item.NAME}</td>
                            <td>
                              {item.COUNTJANUARY == 0 ? "" : item.COUNTJANUARY}
                            </td>
                            <td>
                              {item.COUNTFEBRUARY == 0
                                ? ""
                                : item.COUNTFEBRUARY}
                            </td>
                            <td>
                              {item.COUNTMARCH == 0 ? "" : item.COUNTMARCH}
                            </td>
                            <td>
                              {item.COUNTAPRIL == 0 ? "" : item.COUNTAPRIL}
                            </td>
                            <td>{item.COUNTMAY == 0 ? "" : item.COUNTMAY}</td>
                            <td>{item.COUNTJUNE == 0 ? "" : item.COUNTJUNE}</td>
                            <td>{item.COUNTJULY == 0 ? "" : item.COUNTJULY}</td>
                            <td>
                              {item.COUNTAUGUST == 0 ? "" : item.COUNTAUGUST}
                            </td>
                            <td>
                              {item.COUNTSEPTEMBER == 0
                                ? ""
                                : item.COUNTSEPTEMBER}
                            </td>
                            <td>
                              {item.COUNTOCTOBER == 0 ? "" : item.COUNTOCTOBER}
                            </td>
                            <td>
                              {item.COUNTNOVEMBER == 0
                                ? ""
                                : item.COUNTNOVEMBER}
                            </td>
                            <td>
                              {item.COUNTDECEMBER == 0
                                ? ""
                                : item.COUNTDECEMBER}
                            </td>
                            <td>{item.COUNTTOTAL}</td>
                            {/* {item.MineType == 10 ? <td rowSpan={data.count10}>选矿</td> : <td rowSpan={data.count20}>尾矿</td>} */}
                            {item.MineType == 10 ? (
                              i == 0 ? (
                                <td rowSpan={data.count10}>选矿</td>
                              ) : null
                            ) : i == data.count10 ? (
                              <td rowSpan={data.count20}>尾矿</td>
                            ) : null}
                          </tr>
                        );
                      } else {
                        return (
                          <tr>
                            {/* <td>{item.ROW_NO + 1}</td> */}
                            <td>{i + 1}</td>
                            <td>{item.NAME}</td>
                            <td>
                              {item.COUNTJANUARY == 0 ? "" : item.COUNTJANUARY}
                            </td>
                            <td>
                              {item.COUNTFEBRUARY == 0
                                ? ""
                                : item.COUNTFEBRUARY}
                            </td>
                            <td>
                              {item.COUNTMARCH == 0 ? "" : item.COUNTMARCH}
                            </td>
                            <td>
                              {item.COUNTAPRIL == 0 ? "" : item.COUNTAPRIL}
                            </td>
                            <td>{item.COUNTMAY == 0 ? "" : item.COUNTMAY}</td>
                            <td>{item.COUNTJUNE == 0 ? "" : item.COUNTJUNE}</td>
                            <td>{item.COUNTJULY == 0 ? "" : item.COUNTJULY}</td>
                            <td>
                              {item.COUNTAUGUST == 0 ? "" : item.COUNTAUGUST}
                            </td>
                            <td>
                              {item.COUNTSEPTEMBER == 0
                                ? ""
                                : item.COUNTSEPTEMBER}
                            </td>
                            <td>
                              {item.COUNTOCTOBER == 0 ? "" : item.COUNTOCTOBER}
                            </td>
                            <td>
                              {item.COUNTNOVEMBER == 0
                                ? ""
                                : item.COUNTNOVEMBER}
                            </td>
                            <td>
                              {item.COUNTDECEMBER == 0
                                ? ""
                                : item.COUNTDECEMBER}
                            </td>
                            <td>{item.COUNTTOTAL}</td>
                          </tr>
                        );
                      }
                    })
                  ) : (
                    <tr>
                      <td colSpan={16}>数据加载中...</td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
          {/* 表一 */}
          <div>
            <div
              style={{
                width: "100%",
                // height: "90px",

                marginTop: "15px",
                display: "flex",
                flexDirection: "column",
                marginBottom: "40px",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              {" "}
              {/*  */}
              <div
                style={{
                  height: "2px",
                  width: "100%",
                  border: "1px dashed rgba(0, 0, 0, 0.65)",
                }}
              ></div>
              <div style={{
                margin: "40px 20px 0px 20px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}>
                <div className={styles.menuPie}>
                  <li>
                    隐患数
                    <br />
                    <div className={styles.dataStyle}>{data.count21}</div>

                  </li>
                  <li>
                    延期整改数
                    <br />
                    <div className={styles.dataStyle}> {data.count22}</div>

                  </li>
                  <li>
                    按期整改数
                    <br />
                    <div className={styles.dataStyle}>{data.count23}</div>

                  </li>
                  <li>
                    整改率
                    <br />
                    <div className={styles.dataStyle}> {data.parm27}</div>

                  </li>
                </div>
              </div>
              <div
                style={{
                  width: "1100px",
                  height: "500px",
                  //   float: "left",
                  marginTop: "20px",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  border: "1px solid #E8E8E8",
                  marginBottom: "40px",
                }}
              >
                <div
                  id="divRisk"
                  style={{
                    width: "100%",
                    height: "400px",
                    //   float: "left",
                    marginTop: "20px",
                    display: "flex",
                    justifyContent: "center",
                  }}
                ></div>
              </div>
              <div
                style={{
                  width: "1100px",
                  height: "500px",
                  //   float: "left",
                  marginTop: "20px",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  border: "1px solid #E8E8E8",
                }}
              >

                <div
                  id="divRiskPercent"
                  style={{
                    width: "100%",
                    height: "400px",
                    //   float: "left",
                    marginTop: "20px",
                  }}
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(
  BI053BSSafeCheckYear
);
