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) {
          console.log(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",
    ];
    console.log(divchekData1, "divchekData1");
    console.log(divchekData, "divchekData");
    let divcheks = document.getElementById("divchek");
    if (divcheks) {
      console.log('11111111',divcheks)
      let myChart = echarts.init(divcheks);

      myChart.setOption({
        title: {
          text: "年度检查数",
          subtext:
            data.listSafeCheckYear[data.listSafeCheckYear.length - 1]
              .COUNTTOTAL,
          // subtext: 1911,
          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,
          // data: ["公司级", "部门级", "车间级", "班组级"],
          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,
            // data: [
            //   {
            //     name: "公司级",
            //     value: 11,
            //   },
            //   {
            //     name: "部门级",
            //     value: 28,
            //   },
            //   {
            //     name: "车间级",
            //     value: 224,
            //   },
            //   {
            //     name: "班组级",
            //     value: 1648,
            //   },
            // ],
          },
        ],
      });
    }

    //   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
                    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
                    id="divchek"
                    style={{
                      width: "500px",
                      height: "425px",
                      //   float: "left",
                      //    marginTop: "20px",
                      display: "flex",
                      justifyContent: "center",
                    }}
                  ></div>
              </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
);
