import React, { useState, useEffect } from 'react'
import { connect } from 'dva'
import { Carousel } from 'antd'
import { $consts } from '../../../plugins'
import { toFixed } from '../../../utils/common'

const ConsumeZone = ({ data = {}, imgStyle }) => {
  return (
    <div className='overview__consumeZone'>
      <div className='overview__flexrow' style={{ marginBottom: 8 }}>
        <span className='overview__title overview__title-consume'>{data.Title}</span>
        <img src={data.Img} className='overview__title-img' alt='' style={imgStyle} />
      </div>
      <div className='overview__flexrow'>
        <div className='overview__flexrowSB overview__box'>
          <span className='overview__value'>{data.MonthEnergyConsu}</span>
          <span className='overview__unit'>{data.Unit}</span>
        </div>
        <div className='overview__flexcolumn overview__textbox'>
          <div className='overview__text'><span>月同比：</span><span style={{ color: '#00FF66' }}>{data.YearOnYearConsu}%</span></div>
          <div className='overview__text'><span>月环比：</span><span style={{ color: '#00FF66' }}>{data.MonthOnMonthConsu}%</span></div>
        </div>
      </div>
    </div>
  )
}

const MonthStatistic = (props) => {
  const [data, setData] = useState({
    monthData: {
      Title: '月总能耗',
      Unit: 'tCe',
      Img: require('../../../assets/home/statistic-icon.png'),
      MonthEnergyConsu: 0,
      YearOnYearConsu: 0,
      MonthOnMonthConsu: 0
    },
    datas: [
      {
        Title: '月用电量',
        Unit: '万KWh',
        Img: require('../../../assets/home/statistic-icon.png'),
        MonthEnergyConsu: 0,
        YearOnYearConsu: 0,
        MonthOnMonthConsu: 0
      }
    ]
  })

  useEffect(() => {
    const getData = () => {
      const { OrgId } = props.login
      if (OrgId) {
        props.dispatch({
          type: 'app/getDataByPost',
          url: 'KR/DynamicData/SummaryInfo',
          payload: { OrgId }
        }).then(res => {
          const {
            Title,
            Unit,
            MonthEnergyConsu = 0,
            YearOnYearConsu = 0,
            MonthOnMonthConsu = 0,
            EnergyDosageSummary = []
          } = res
          // 一共留六位数字和一个小数点
          const baseDot = 6
          setData({
            monthData: {
              Title,
              Unit,
              Img: require('../../../assets/home/statistic-icon.png'),
              MonthEnergyConsu: toFixed(MonthEnergyConsu, baseDot).substring(0, 7),
              YearOnYearConsu,
              MonthOnMonthConsu
            },
            datas: EnergyDosageSummary.map(item => {
              const { Title, Unit, Img, MonthEnergyDosage = 0, YearOnYearDosage = 0, MonthOnMonthDosage = 0 } = item
              const monthEnergyDosage = toFixed(MonthEnergyDosage, baseDot)
              return {
                Title,
                Unit,
                Img: Img || require('../../../assets/home/statistic-icon.png'),
                MonthEnergyConsu: monthEnergyDosage.substring(0, 7),
                YearOnYearConsu: YearOnYearDosage,
                MonthOnMonthConsu: MonthOnMonthDosage
              }
            })
          })
        })
      }
    }
    getData()
    let timer = setInterval(getData, $consts['COMMON/REQUEST_INTERVAL_TIME'])
    return () => { clearInterval(timer) }
  }, [props.login.OrgId])

  return (
    <div style={{ marginBottom: 20 }}>
      <div style={{ marginBottom: 10 }}>
        <ConsumeZone data={data.monthData} imgStyle={{ width: 38, height: 38, marginLeft: 0 }} />
      </div>
      <Carousel
        autoplay
        infinite
        dotPosition='right'
        dots={false}
        className='overview__carousel-consume'
      >
        {
          data.datas.map((item, index) => {
            return <ConsumeZone key={`${item.Title}_${index}`} data={item} />
          })
        }
      </Carousel>
    </div>
  )
}

export default connect(({ login }) => ({ login }))(MonthStatistic)