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 { initFilter } from "../utils/common";
import storage from "../utils/storage";

import { FullScreenContainer } from "@jiaminghi/data-view-react";
import RiskFourOne from "./RiskFourOne";
import RiskFourTwo from "./RiskFourTwo";
import RiskFourThree from "./RiskFourThree";

class RiskFour extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      translateX:1,
      rightDis:false,
      leftDis:true,
      riskleveldata:[]
    };
  }
  clickRightIcon = () => {
    if(this.state.translateX <3){
      this.setState({
        translateX:this.state.translateX+1
      })
    }
    
  };
  componentDidMount() {
    this.getRiskData();
  }
  getRiskData = () => {
    var orgId = storage("lacal").getItem("webOrgId")?.val
    const json = initFilter(orgId);
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "HM/HMEvaluateRisk/getRiskLevelCountData",
      payload: json,
      onComplete: (ret) => {
        if (ret) {
          this.setState({
            riskleveldata: ret.RISKLEVELCOUNTS,
          })
          
          // })
          // ret.RISKLEVELCOUNTS.map((item, index) => {
          //   this.getTitle(item)
          // })
        }
      },
    });
  };
  componentDidUpdate =(prevProps, prevState)=> {
    if(this.state.translateX != prevState.translateX){
       if (this.state.translateX == 1) {
      this.setState({
        rightDis:false,
        leftDis:true
      })
    }else if(this.state.translateX == 3){
      this.setState({
        rightDis:true,
        leftDis:false
      })
    }else{
      this.setState({
        rightDis:false,
        leftDis:false
      })
    }
    }
  }

  clickLeftIcon = () => {
    if(this.state.translateX >1){
      this.setState({
        translateX:this.state.translateX-1
      })
    }
    
  };
  render() {
    return (
      <React.Fragment>
        <FullScreenContainer>
          <div className={styles.wrap_scrollImg}>
            <span className={styles.left_icon} onClick={()=>{this.clickLeftIcon()}} style={this.state.leftDis==true?{color:'#888888'}:{color:'#fff'}}>
              <Icon type="left" />
            </span>
            <span className={styles.right_icon} onClick={()=>{this.clickRightIcon()}} style={this.state.rightDis==true?{color:'#888888'}:{color:'#fff'}}>
              <Icon type="right" />
            </span>
            {this.state.translateX ==1?< RiskFourOne riskleveldata={this.state.riskleveldata}/>:this.state.translateX ==2?< RiskFourTwo  riskleveldata={this.state.riskleveldata}/>:<RiskFourThree  riskleveldata={this.state.riskleveldata}/>} 
          </div>
          
        </FullScreenContainer>
      </React.Fragment>
    );
  }
}

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