import React, { useState, useEffect, useMemo, useRef } from "react";
import { connect } from "dva";
import { withRouter, matchPath } from "dva/router";
import { Scrollbars } from "react-custom-scrollbars";
import { Icon, Row, Col, Progress, Popover } from "antd";
import EnergyIcon from "../utils/energyIcon";
import { $consts } from "../plugins";
import styles from "./risk.less";
import echarts from "echarts";
import realGif from "../assets/risk/backno.jpg";
import red from "../assets/risk/red.png";
import orange from "../assets/risk/orange.png";
import yellow from "../assets/risk/yellow.png";
import blue from "../assets/risk/blue.png";
import back1 from "../assets/risk/1-1-1.png";
import back2 from "../assets/risk/1-2.png";
import back3 from "../assets/risk/1-3.png";
import back4 from "../assets/risk/1-4.png";
import backTwo1 from "../assets/risk/2-1-1.png";
import backTwo2 from "../assets/risk/2-2.png";
import backTwo3 from "../assets/risk/2-3.png";
import backTwo4 from "../assets/risk/2-4.png";
import backThree1 from "../assets/risk/3-1-1.png";
import backThree2 from "../assets/risk/3-2.png";
import backThree3 from "../assets/risk/3-3.png";
import backThree4 from "../assets/risk/3-4.png";
import backFour1 from "../assets/risk/4-1-1.png";
import backFour2 from "../assets/risk/4-2.png";
import backFour3 from "../assets/risk/4-3.png";
import backFour4 from "../assets/risk/4-4.png";
import backFive1 from "../assets/risk/5-1-1.png";
import backFive2 from "../assets/risk/5-2.png";
import backFive3 from "../assets/risk/5-3.png";
import backFive4 from "../assets/risk/5-4.png";
import backSix1 from "../assets/risk/6-1-1.png";
import backSix2 from "../assets/risk/6-2.png";
import backSix3 from "../assets/risk/6-3.png";
import backSix4 from "../assets/risk/6-4.png";
import backSeven1 from "../assets/risk/7-1-1.png";
import backSeven2 from "../assets/risk/7-2.png";
import backSeven3 from "../assets/risk/7-3.png";
import backSeven4 from "../assets/risk/7-4.png";
import qrcode from "../assets/risk/1.png";
import {
  FullScreenContainer,
} from "@jiaminghi/data-view-react";

class RiskFour extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      RiskData: {
        IsSuccessful: true,
        Data: {
          RISKLEVELCOUNTS: [
            {
              NAME: "东排土场",
              LEVEL1: 1,
              LEVEL2: 2,
              LEVEL3: 3,
              LEVEL4: 4,
            },
            {
              NAME: "堆矿场",
              LEVEL1: 3,
              LEVEL2: 2,
              LEVEL3: 3,
              LEVEL4: 4,
            },
            {
              NAME: "622工业场地",
              LEVEL1: 4,
              LEVEL2: 2,
              LEVEL3: 3,
              LEVEL4: 4,
            },
            {
              NAME: "露天生产区",
              LEVEL1: 3,
              LEVEL2: 2,
              LEVEL3: 3,
              LEVEL4: 4,
            },
            {
              NAME: "终了边坡区域",
              LEVEL1: 2,
              LEVEL2: 2,
              LEVEL3: 3,
              LEVEL4: 4,
            },
            {
              NAME: "烧结厂",
              LEVEL1: 1,
              LEVEL2: 2,
              LEVEL3: 3,
              LEVEL4: 4,
            },
            {
              NAME: "580回风井口",
              LEVEL1: 2,
              LEVEL2: 2,
              LEVEL3: 3,
              LEVEL4: 4,
            },
          ],
        },
        TotalCount: 0,
        MessageType: 0,
      },
      level1: 0,
      level2: 0,
      level3: 0,
      level4: 0,
      level5: 0,
      level6: 0,
      level7: 0,
      data1: {},
      data2: {},
      data3: {},
      data4: {},
      data5: {},
      data6: {},
      data7: {},

      content7: "",
    };
  }

  componentDidMount() {
    this.getRiskData()
    this.state.RiskData.Data.RISKLEVELCOUNTS.map((item, index) => {
      if (item.NAME == "东排土场") {
        this.setState({
          level1: item.LEVEL1,
          data1: item,
        });
      }
      if (item.NAME == "堆矿场") {
        this.setState({
          level2: item.LEVEL1,
          data2: item,
        });
      }
      if (item.NAME == "622工业场地") {
        this.setState({
          level3: item.LEVEL1,
          data3: item,
        });
      }
      if (item.NAME == "露天生产区") {
        this.setState({
          level4: item.LEVEL1,
          data4: item,
        });
      }
      if (item.NAME == "终了边坡区域") {
        this.setState({
          level5: item.LEVEL1,
          data5: item,
        });
      }
      if (item.NAME == "烧结厂") {
        this.setState({
          level6: item.LEVEL1,
          data6: item,
        });
      }
      if (item.NAME == "580回风井口") {
        this.setState({
          level7: item.LEVEL1,
          data7: item,
          content7: (
            <div>
              <div>区域名称：{item.NAME}</div>
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-between",
                  alignItems: "center",
                }}
              >
                <div>
                  <div>较大风险：{item.LEVEL2}</div>
                  <div>一般风险：{item.LEVEL3}</div>
                </div>
                <div>
                  <img
                    src={qrcode}
                    alt="33"
                    style={{ width: "50px", height: "50px", objectFit: "fill" }}
                  ></img>
                </div>
              </div>
            </div>
          ),
        });
      }
    });
    // this.setState({
    //     content7:<div>
    //         <div>区域名称：{this.state.data7.NAME}</div>
    //         <div>较大风险：{this.state.data7.LEVEL2}</div>
    //         <div>一般风险：{this.state.data7.LEVEL3}</div>
    //     </div>
    // })
  }
  getRiskData = () => {
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "HM/HMEvaluateRisk/getRiskLevelCountData",
      onComplete: (ret) => {
        if (ret ) {
          console.log(ret,'989989')
        }
      },
    });
  }

  render() {
    return (
      <React.Fragment>
        <FullScreenContainer>
          <div style={{ width: "100%", height: "100%" }}>
            <img
              src={realGif}
              alt="1"
              style={{ width: "100%", height: "100%", objectFit: "fill" }}
            ></img>
            {/* 东排土场 */}
            <div className={styles.riskback}>
              <img
                src={
                  this.state.level1 == 1
                    ? back1
                    : this.state.level1 == 2
                    ? back2
                    : this.state.level1 == 3
                    ? back3
                    : this.state.level1 == 4
                    ? back4
                    : null
                }
                alt="2"
                style={{ width: "24%", height: "23%", objectFit: "fill" }}
              ></img>
            </div>
            <div className={styles.riskt}>
              <img
                src={
                  this.state.level1 == 1
                    ? red
                    : this.state.level1 == 2
                    ? orange
                    : this.state.level1 == 3
                    ? yellow
                    : this.state.level1 == 4
                    ? blue
                    : null
                }
                alt="3"
                style={{ width: "80px", height: "80px", objectFit: "fill" }}
              ></img>
            </div>
            {/* 堆矿场 */}
            <div className={styles.riskbackTwo}>
              <img
                src={
                  this.state.level2 == 1
                    ? backTwo1
                    : this.state.level2 == 2
                    ? backTwo2
                    : this.state.level2 == 3
                    ? backTwo3
                    : this.state.level2 == 4
                    ? backTwo4
                    : null
                }
                alt="4"
                style={{ width: "18%", height: "17%", objectFit: "fill" }}
              ></img>
            </div>
            <div className={styles.risktTwo}>
              {" "}
              <img
                src={
                  this.state.level2 == 1
                    ? red
                    : this.state.level2 == 2
                    ? orange
                    : this.state.level2 == 3
                    ? yellow
                    : this.state.level2 == 4
                    ? blue
                    : null
                }
                alt="5"
                style={{ width: "80px", height: "80px", objectFit: "fill" }}
              ></img>
            </div>
            {/* 622工业场地 */}
            <div className={styles.riskbackThree}>
              <img
                src={
                  this.state.level3 == 1
                    ? backThree1
                    : this.state.level3 == 2
                    ? backThree2
                    : this.state.level3 == 3
                    ? backThree3
                    : this.state.level3 == 4
                    ? backThree4
                    : null
                }
                alt="6"
                style={{ width: "20%", height: "28%", objectFit: "fill" }}
              ></img>
            </div>
            <div className={styles.risktThree}>
              {" "}
              <img
                src={
                  this.state.level3 == 1
                    ? red
                    : this.state.level3 == 2
                    ? orange
                    : this.state.level3 == 3
                    ? yellow
                    : this.state.level3 == 4
                    ? blue
                    : null
                }
                alt="7"
                style={{ width: "80px", height: "80px", objectFit: "fill" }}
              ></img>
            </div>
            {/* 露天生产区 */}
            <div className={styles.riskbackFour}>
              <img
                src={
                  this.state.level4 == 1
                    ? backFour1
                    : this.state.level4 == 2
                    ? backFour2
                    : this.state.level4 == 3
                    ? backFour3
                    : this.state.level4 == 4
                    ? backFour4
                    : null
                }
                alt="8"
                style={{ width: "64%", height: "70%", objectFit: "fill" }}
              ></img>
            </div>
            <div className={styles.risktFour}>
              {" "}
              <img
                src={
                  this.state.level4 == 1
                    ? red
                    : this.state.level4 == 2
                    ? orange
                    : this.state.level4 == 3
                    ? yellow
                    : this.state.level4 == 4
                    ? blue
                    : null
                }
                alt="9"
                style={{ width: "80px", height: "80px", objectFit: "fill" }}
              ></img>
            </div>
            {/* 终了边坡区域 */}
            <div className={styles.riskbackFive}>
              <img
                src={
                  this.state.level5 == 1
                    ? backFive1
                    : this.state.level5 == 2
                    ? backFive2
                    : this.state.level5 == 3
                    ? backFive3
                    : this.state.level5 == 4
                    ? backFive4
                    : null
                }
                alt="10"
                style={{ width: "45%", height: "50%", objectFit: "fill" }}
              ></img>
            </div>
            <div className={styles.risktFive}>
              {" "}
              <img
                src={
                  this.state.level5 == 1
                    ? red
                    : this.state.level5 == 2
                    ? orange
                    : this.state.level5 == 3
                    ? yellow
                    : this.state.level5 == 4
                    ? blue
                    : null
                }
                alt="11"
                style={{ width: "80px", height: "80px", objectFit: "fill" }}
              ></img>
            </div>
            {/* 烧结厂 */}
            <div className={styles.riskbackSix}>
              <img
                src={
                  this.state.level6 == 1
                    ? backSix1
                    : this.state.level6 == 2
                    ? backSix2
                    : this.state.level6 == 3
                    ? backSix3
                    : this.state.level6 == 4
                    ? backSix4
                    : null
                }
                alt="12"
                style={{ width: "27%", height: "37%", objectFit: "fill" }}
              ></img>
            </div>
            <div className={styles.risktSix}>
              {" "}
              <img
                src={
                  this.state.level6 == 1
                    ? red
                    : this.state.level6 == 2
                    ? orange
                    : this.state.level6 == 3
                    ? yellow
                    : this.state.level6 == 4
                    ? blue
                    : null
                }
                alt="13"
                style={{ width: "80px", height: "80px", objectFit: "fill" }}
              ></img>
            </div>
            {/* 580回风井口 */}
            <div className={styles.riskbackSeven}>
              <img
                src={
                  this.state.level7 == 1
                    ? backSeven1
                    : this.state.level7 == 2
                    ? backSeven2
                    : this.state.level7 == 3
                    ? backSeven3
                    : this.state.level7 == 4
                    ? backSeven4
                    : null
                }
                alt="14"
                style={{ width: "12%", height: "13%", objectFit: "fill" }}
              ></img>
            </div>
            <div className={styles.risktSeven}>
              {" "}
              <Popover content={this.state.content7} title="" trigger="click">
                <img
                  src={
                    this.state.level7 == 1
                      ? red
                      : this.state.level7 == 2
                      ? orange
                      : this.state.level7 == 3
                      ? yellow
                      : this.state.level7 == 4
                      ? blue
                      : null
                  }
                  alt="15"
                  style={{ width: "80px", height: "80px", objectFit: "fill" }}
                  className={styles.riskhover}
                ></img>
              </Popover>
            </div>
          </div>
        </FullScreenContainer>
      </React.Fragment>
    );
  }
}

export default withRouter(connect(({ login }) => ({ login }))(RiskFour));