// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Form, Col, Row } from 'antd'
import { IFComponent, LayoutCard } from '@woowalker/feui'
import config from '../../../config'
// 样式
import styles from './index.css'

class EMEquipmentRealTimePage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      data: [],
      realData: [],
      statusData: [],
      chartData: {},
      num: 1
    }
    this.timer = -1
    this._unmounted = false
  }

  componentDidMount () {
    this.getRealTimeData()
  }

  componentWillUnmount () {
    this._unmounted = true
    clearTimeout(this.timer)
  }

  getRealTimeData = () => {
    const json = {
      OrgId: this.props.login.OrgId,
      nodeId: this.props.data.id
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EM/Monitoring/GetEquipmentRealTimeData',
      payload: json
    }).then(res => {
      res && !this._unmounted && this.setState({
        data: res.equipmentData,
        realData: res.realData,
        statusData: res.statusData
      })
    }).finally(() => {
      if (!this._unmounted) {
        // 一个接口请求完之后，再定时进行请求
        clearTimeout(this.timer)
        this.timer = setTimeout(this.getRealTimeData, 5000)
      }
    })
  }

  render () {
    const { data, realData, statusData } = this.state
    return (
      <div className='scroll_page'>
        <LayoutCard title='设备属性状态'>
          <Row gutter={8}>
            <Col span={8}>
              <img src={config.picServerHost + data.img} alt="" className={styles.equipmentPic} />
            </Col>
            <Col span={16}>
              <Row gutter={8}>
                {
                  statusData.map((item, index) => {
                    const imgSrc = item.Value ? require('../../../assets/common/status_online.png') : require('../../../assets/common/status_offline.png')
                    return (
                      <Col key={`${item.Name}_${index}`} span={6} style={{ marginBottom: '0.15rem' }}>
                        <img src={imgSrc} alt='status' className={styles.equipmentStatusPic} />
                        <span className={`${styles.equipmentFont} vertical-middle`}>{`${item.Name}${item.Unit === 'None' || item.Unit === null ? '' : item.Unit}`}</span>
                      </Col>
                    )
                  })
                }
              </Row>
            </Col>
          </Row>
        </LayoutCard>
        <IFComponent IF={realData.length}>
          <LayoutCard title='设备属性实时数据' style={{ marginTop: '0.15rem' }}>
            <Form labelCol={{ span: 12 }} wrapperCol={{ span: 12 }} colon={false}>
              <Row style={{ marginTop: '0.15rem' }}>
                {
                  realData.map((item, index) => {
                    const value = `${item.Value}${item.Unit === 'None' || item.Unit === null ? '' : item.Unit}`
                    return (
                      <Col key={`${item.Name}_${index}`} span={6}>
                        <Form.Item
                          label={<div title={item.Name} className='text-ellipsis'>{item.Name}</div>}
                          style={{ marginBottom: 0 }}
                        >
                          <div title={value} className='text-ellipsis'>：<span className={styles.equipmentFont}>{value}</span></div>
                        </Form.Item>
                      </Col>
                    )
                  })
                }
              </Row>
            </Form>
          </LayoutCard>
        </IFComponent>
      </div>
    )
  }
}

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