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

const MonitorZone = ({ data }) => {
  return (
    <div className='overview__monitorZone'>
      <div className='overview__flexrow overview__monitor'>
        <img src={data.Img} alt='' className='overview__img' />
        <div className='overview__flexcolumn overview__img-aside'>
          <span className='overview__equipment overview__lineheight1'>{data.Name}-器具</span>
          <div className='overview__flexrow overview__lineheight1'>
            <span className='overview__online'>在线数：{data.Online}</span>
            <span className='overview__total'>总数：{data.Total}</span>
          </div>
        </div>
      </div>
    </div>
  )
}

const DeviceMonitor = (props) => {
  const [data, setData] = useState([
    { Name: '电', Online: 0, Total: 0 }
  ])

  useEffect(() => {
    const getData = () => {
      const { OrgId } = props.login
      if (OrgId) {
        props.dispatch({
          type: 'app/getDataByPost',
          url: 'KR/Screen/ApplianceInfo',
          payload: { OrgId }
        }).then(res => {
          setData(res)
        })
      }
    }
    getData()
    let timer = setInterval(getData, $consts['COMMON/REQUEST_INTERVAL_TIME'])
    return () => { clearInterval(timer) }
  }, [props.login.OrgId])

  return (
    <div className='overview__box-small' style={{ marginBottom: 20 }}>
      <Carousel
        autoplay
        infinite
        dotPosition='right'
        dots={false}
        className='overview__carousel-monitor'
      >
        {
          data.map((item, index) => {
            return <MonitorZone key={`${item.Name}_${index}`} data={item} />
          })
        }
      </Carousel>
    </div>
  )
}

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