/**
 * Created by cherry on 2018/10/25.
 */
import React from 'react';
import { connect } from 'dva';
import TweenOne from 'rc-tween-one';
import Children from 'rc-tween-one/lib/plugin/ChildrenPlugin';
import styles from './TrafficDataDisplay.less';
import { NumberAnimate } from '../../common/NumberAnimate';
import TrafficExponentPop from '@/components/monitor/TrafficData/TrafficDataPop/TrafficExponentPop';
import TrafficExPonentChart from '@/components/monitor/TrafficData/TrafficDataPop/TrafficExPonentChart';
import TopIndex from "./TopIndex";

TweenOne.plugins.push(Children);
class TrafficExponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0,
    };
    this.doRefreshData = this.doRefreshData.bind(this);
  }

  componentDidMount() {
    const { IsSettingScene } = this.props;
    if (!IsSettingScene) {
      this.doRefreshData();
    }
  }

  componentWillUnmount() {
    if (this.refreshTimeout) {
      clearTimeout(this.refreshTimeout);
    }
  }

  doRefreshData() {
    const { dispatch } = this.props;
    dispatch({ type: 'trafficdata/getTrafficExponentAndCompare' }).then(data => {
      if (data && data.result) {
        this.setState(preState => ({
          current: preState.current + 1,
        }));
      }
    });
    this.refreshTimeout = setTimeout(this.doRefreshData, 1 * 60 * 1000);
  }

  openPop = () => {
    const { dispatch } = this.props;
    const popProps = {
      left: '30vw',
      top: '20vh',
    };
    dispatch({
      type: 'global/openPopWindow',
      payload: {
        popWindow: {
          name: 'trafficExponentPop',
          props: popProps,
          component: TrafficExponentPop,
        },
      },
    });
  };

  openChartPop = () => {
    const { dispatch } = this.props;
    const popProps = {
      left: '30vw',
      top: '20vh',
    };
    dispatch({
      type: 'global/openPopWindow',
      payload: {
        popWindow: {
          name: 'jtzsPop',
          props: popProps,
          component: TrafficExPonentChart,
        },
      },
    })
  }

  render() {
    const { trafficdata, basefont, componentName } = this.props;
    const { current } = this.state;
    const { trafficExponent } = trafficdata;
    const { colorTheme } = this.props.global
    const getTrendImg = trend => {
      if (trend === -1) {
        return <img src={require('../../../assets/arrow-down.png')} />;
      }
      if (trend === 1) {
        return <img src={require('../../../assets/arrow-up.png')} />;
      }
      return '';
    };
    return (
      <div>
        {
          colorTheme === 'lightblue' ? 
          <TopIndex
            iconType='ydzs'
            bgtype='long'
            numtype='car'
            indexname={componentName}
            indexnum={trafficExponent.value}
            basefont={basefont}
            current={current}
            openPop={this.openChartPop}
          />:
      <div className="outline-out">
        <div className="outline-inner">
          {/* 青岛现场演示功能，演示代码需要打开以下注释 */}
          <div
            className={styles.trafficData} /* onClick={this.openPop} style={{cursor: 'pointer'}} */
          >
            <div className={styles.trafficDataDiv}>
              <div className={styles.contentDiv}>
                <div className={styles.trafficDataTitle}>
                  <span
                    style={{ fontSize: `${0.9 * basefont}px`, lineHeight: `${0.9 * basefont}px` }}
                    title={componentName}
                  >
                    {componentName}
                  </span>
                </div>
                <div className={styles.trafficDataNum}>
                  <span
                    style={{ fontSize: `${1.9 * basefont}px`, lineHeight: `${1.9 * basefont}px` }}
                  >
                    <TweenOne
                      animation={NumberAnimate(
                        trafficExponent.value,
                        1,
                        true,
                        current < 2 ? 1000 : 4.5 * 60 * 1000
                      )}
                    >
                      0
                    </TweenOne>
                  </span>
                  <span
                    style={{ fontSize: `${0.73 * basefont}px`, lineHeight: `${1.27 * basefont}px` }}
                  >
                    &nbsp;&nbsp;
                  </span>
                </div>
                <div className={styles.trafficDataSingle}>
                  <span
                    style={{ fontSize: `${0.73 * basefont}px`, lineHeight: `${0.54 * basefont}px` }}
                  >
                    上周同期&nbsp;&nbsp;
                  </span>
                  <span
                    style={{ fontSize: `${0.9 * basefont}px`, lineHeight: `${0.9 * basefont}px` }}
                  >
                    {trafficExponent.oldvalue}&nbsp;&nbsp;
                  </span>
                </div>
                {/* <div className={styles.trafficDataTrend}> */}
                {/* <span style={{ fontSize: `${0.73*basefont}px`, lineHeight: `${0.54*basefont}px`}}>周同比&nbsp;&nbsp;</span> */}
                {/* <span style={{ fontSize: `${0.9*basefont}px`, lineHeight: `${0.9*basefont}px`}}>{ trafficExponent.percent === '-' ? '-' : `${trafficExponent.percent}%` }&nbsp;&nbsp;</span> */}
                {/* <span>{ getTrendImg(trafficExponent.trend) }</span> */}
                {/* </div> */}
              </div>
            </div>
          </div>
        </div>
      </div>
      }
      </div>
    );
  }
}
function mapStateToProps({ trafficdata, global, loading }) {
  return { trafficdata, global };
}
export default connect(mapStateToProps)(TrafficExponent);