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/StepForm1.css";

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

class BI051BSCompanyYear 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: "",

        year: new Date().getFullYear(),
        company: "公司级",
      },
      listSafeCheckYear: [],
      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 : "";
    let json = initFilter(orgId);
    this.props.dispatch({
      type: "app/getDataByPost",
      payload: json,
      url: "BI/BISafeYear/BISafeYearShow",
      onComplete: (data) => {
        if (data) {
          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 = "";

          //数量赋值
          if (data.listSummary != null && data.listSummary.length == 2) {
            data.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;
              } else if (item.PART == 3) {
                count21 = item.Count1;
                count22 = item.Count2;
                count23 = item.Count3;
                parm27 = item.Parameter7;
              }
            });
          }
          var year = new Date().getFullYear();
          if (
            data.listSafeCheckYear != null &&
            data.listSafeCheckYear.length > 0
          )
            year = data.listSafeCheckYear[0].YEAR;
          var companyName =
            data.NAME == undefined || data.NAME == null ? "公司级" : data.NAME;
          this.setState({
            data: {
              count1: count1,
              count2: count2,
              count3: count3,
              count4: count4,
              parm7: parm7,
              parm8: parm8,

              count21: count21,
              count22: count22,
              count23: count23,
              parm27: parm27,

              listSafeCheckYear: data.listSafeCheckYear,
              listCheckTypeYear: data.listCheckTypeYear,
              year: year,
              company: companyName,
            },
          });
          var divchekData = [];
          var divchekData1 = [];

          data.listSafeCheckYear.forEach((item) => {
            if (item.NAME != "合计") {
              divchekData.push({ name: item.NAME, value: item.COUNTTOTAL });
              divchekData1.push(item.NAME);
            }
          });
          //   COUNTTOTAL
          var colorList = [
            "#47A2FF ",
            "#53C8D1",
            "#59CB74",
            "#FBD444",
            "#7F6AAD",
            "#585247",
          ];
          let divcheks = document.getElementById("divchek");
          if (divcheks) {
            let myChart = echarts.init(divcheks);

            myChart.setOption({
              title: {
                text: "年度检查数",
                subtext:
                  data.listSafeCheckYear[data.listSafeCheckYear.length - 1]
                    .COUNTTOTAL,
                textStyle: {
                  fontSize: 14,
                  color: "#999",
                  lineHeight: 20,
                },
                subtextStyle: {
                  fontSize: 20,
                  color: "#333",
                },
                textAlign: "center",
                left: "49%",
                top: "33%",
              },
              tooltip: {
                trigger: "item",
              },
              //   toolbox: {
              //     show: true,
              //   },
              legend: {
                // type: "scroll",
                bottom: "10%",
                // top: "center",
                itemGap: 30,
                selectedMode: false,
                icon: "pin",
                data: divchekData1,
                textStyle: {
                  color: "#77899c",
                  rich: {
                    uname: {
                      width: 100,
                    },
                    unum: {
                      color: "#4ed139",
                      width: 40,
                      align: "right",
                    },
                  },
                },
              },
              color: colorList,
              series: [
                {
                  name: "姓名",
                  type: "pie",
                  minAngle: 10,
                  radius: [50, 70],
                  center: ["50%", "40%"],
                  clockwise: true,
                  avoidLabelOverlap: true,
                  hoverOffset: 15,
                  itemStyle: {
                    borderWidth: 3,
                    borderColor: "#fff",
                    alignItems: "center",
                  },
                  label: {
                    show: true,
                    position: "outside",
                    formatter: (params) => {
                      return (
                        "{name|" +
                        params.name +
                        "}\n{value|" +
                        params.value +
                        "}"
                      );
                    },
                    rich: {
                      hr: {
                        backgroundColor: "t",
                        borderRadius: 3,
                        width: 3,
                        height: 3,
                        padding: [3, 3, 0, -12],
                      },
                      a: {
                        padding: [-30, 15, -20, 15],
                      },
                    },
                  },
                  labelLine: {
                    normal: {
                      length: 20,
                      length2: 30,
                      lineStyle: {
                        width: 1,
                      },
                    },
                  },
                  data: divchekData,
                },
              ],
            });
          }

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

          data.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 (
            data.listCheckTypeYear != null &&
            data.listCheckTypeYear != undefined &&
            data.listCheckTypeYear.length > 0
          ) {
            data.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",
              },
              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,
                    },
                  },
                  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,
    });
  };

  // ChartBarShow_Vertical(echarts, divId, data, title) {
  //   var element = document.getElementById(divId)
  //   if (element != undefined && data != null && data.length > 0) {
  //     var myChart = echarts.init(element);
  //     var series = []
  //     var xAxisData = []
  //     var yAxisData1 = []
  //     var yAxisData2 = []
  //     var yAxisData3 = []

  //     data.forEach((item) => {
  //       xAxisData.push(item.YEAR + "-" + item.MONTH)
  //       yAxisData1.push(item.INTTIMECOUNT)
  //       yAxisData2.push(item.OUTTIMECOUNT)
  //       yAxisData3.push(item.NOTFINISHCOUN)
  //     })

  //     var option = {
  //       title: {
  //         text: title,
  //         left: 'center'
  //       },
  //       tooltip: {
  //         trigger: 'axis',
  //         axisPointer: {
  //           type: 'shadow'
  //         }
  //       },
  //       legend: {
  //         bottom: '0px'
  //       },
  //       grid: {
  //         left: '3%',
  //         right: '4%',
  //         bottom: '10%',
  //         containLabel: true
  //       },
  //       xAxis: {
  //         type: 'category',
  //         data: xAxisData
  //       },
  //       yAxis: {
  //         type: 'value'
  //       },
  //       series: [
  //         {
  //           name: '按期整改',
  //           type: 'bar',
  //           stack: 'total',
  //           label: {
  //             show: true
  //           },
  //           emphasis: {
  //             focus: 'series'
  //           },
  //           data: yAxisData1
  //         },
  //         {
  //           name: '延期整改',
  //           type: 'bar',
  //           stack: 'total',
  //           label: {
  //             show: true
  //           },
  //           emphasis: {
  //             focus: 'series'
  //           },
  //           data: yAxisData2
  //         },
  //         {
  //           name: '未完成',
  //           type: 'bar',
  //           stack: 'total',
  //           label: {
  //             show: true
  //           },
  //           emphasis: {
  //             focus: 'series'
  //           },
  //           data: yAxisData3
  //         }
  //       ]
  //     };
  //     // 使用刚指定的配置项和数据显示图表。
  //     myChart.setOption(option);
  //   }
  // }

  // LineShow(echarts, divId, title, dataXAxis, dataSeries) {

  //   var chartDom = document.getElementById(divId);
  //   if (chartDom != null && chartDom != undefined) {
  //     var myChart = echarts.init(chartDom);
  //     var option;
  //     option = {
  //       title: {
  //         text: title,
  //         left: 'center'
  //       },
  //       label: {
  //         show: true,
  //         position: 'top'
  //       },
  //       xAxis: {
  //         type: 'category',
  //         data: dataXAxis
  //       },
  //       yAxis: {
  //         type: 'value'
  //       },
  //       series: [
  //         {
  //           data: dataSeries,
  //           type: 'line'
  //         }
  //       ]
  //     };

  //     option && myChart.setOption(option);
  //   }
  // }

  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.company} {data.year}年度安全检查情况综合统计分析
          </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>
                {/* <a href="#" style={{ color: "red" }}> */}
                {/* </a> */}
              </li>
              <li>
                完成率
                <br />
                <div className={styles.dataStyle4}>{data.parm7}</div>
                {/* <a href="#" style={{ color: "red" }}> */}
                {/* </a> */}
              </li>
              <li>
                及时完成率
                <br />
                <div className={styles.dataStyle5}>{data.parm8}</div>
              </li>
            </div>
          </div>
          {/* <hr /> */}
          {/* 表一 */}
          <div
            style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              //   marginBottom: "20px",
                // margin:'0px 20px 20px 20px'
            }}
          >
            <div style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            //   marginBottom: "20px",
              width:'1100px',
              flexDirection:'row',
            //   margin:'0px 20px 20px 20px'
        }}>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                // margin:'0px 15px',
                width: "40%",
                height: "100%",
              }}
            >
              {data?.listSafeCheckYear ? (
                // <div className={styles.menuPie4}>
                //   {data.listSafeCheckYear.map((item) => {
                //     if (item.NAME != "合计") {
                //       return (
                //         <li>
                //           {item.NAME} <br /> {item.COUNTTOTAL}
                //         </li>
                //       );
                //     }
                //   })}
                // </div>
                <div
                  id="divchek"
                  style={{
                    width: "500px",
                    height: "425px",
                    //   float: "left",
                    //    marginTop: "20px",
                    display: "flex",
                    justifyContent: "center",
                  }}
                ></div>
              ) : (
                <ul className={styles.menuPie2}>
                  <li>公司级</li>
                  <li>部门级</li>
                  <li>车间级</li>
                  <li>班组级</li>
                </ul>
              )}
            </div>

            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                width: "60%",
              }}
            >
              <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>
                  </tr>
                  {data?.listSafeCheckYear ? (
                    data.listSafeCheckYear.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>
                          </tr>
                        );
                      } else {
                        return (
                          <tr>
                            <td>{item.ROW_NO + 1}</td>
                            <td>{item.NAME}</td>
                            <td>{item.COUNTJANUARY}</td>
                            <td>{item.COUNTFEBRUARY}</td>
                            <td>{item.COUNTMARCH}</td>
                            <td>{item.COUNTAPRIL}</td>
                            <td>{item.COUNTMAY}</td>
                            <td>{item.COUNTJUNE}</td>
                            <td>{item.COUNTJULY}</td>
                            <td>{item.COUNTAUGUST}</td>
                            <td>{item.COUNTSEPTEMBER}</td>
                            <td>{item.COUNTOCTOBER}</td>
                            <td>{item.COUNTNOVEMBER}</td>
                            <td>{item.COUNTDECEMBER}</td>
                            <td>{item.COUNTTOTAL}</td>
                          </tr>
                        );
                      }
                    })
                  ) : (
                    <tr>
                      <td colSpan={15}>数据加载中...</td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
            </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",
                }}
              >
                <ul 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>
                </ul>
              </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",
                  marginBottom: "40px",
                }}
              >
                <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 }))(
  BI051BSCompanyYear
);