// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Progress, Timeline, Row, Col } from 'antd'
import { Scrollbars } from 'react-custom-scrollbars'
import { LayoutCard } from '@woowalker/feui'
// 工具库
import moment from 'moment'
// 样式
import './index.less'

const { DashboardCard } = LayoutCard

class DashBoard extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      data: [],
      ConcurrencyNum: 0,
      processData: [],
      versionData: []
    }
  }

  componentDidMount () {
    const { OrgId } = this.props.login
    OrgId && this.getEMCompanyIndexPage()
  }

  componentDidUpdate (prevProps) {
    if (prevProps.login.OrgId !== this.props.login.OrgId) {
      this.getEMCompanyIndexPage()
    }
  }

  getEMCompanyIndexPage = () => {
    const { OrgId } = this.props.login
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BD/BDServerInfo/GetCompanyEnergy',
      payload: {
        OrgId,
        Parameter2: moment().subtract(1, 'years').format('YYYY-MM-DD'),
        Parameter3: moment().format('YYYY-MM-DD')
      },
      onlyData: false,
      onComplete: (res) => {
        if (res && res.IsSuccessful && res.Data) {
          this.setState({
            data: res.Data,
            processData: res.Data.UseProcess,
            versionData: res.Data.VersionManager
          })
        }
      }
    })
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'PF/WebSocketInfo/ConcurrencyNum',
      payload: {
        OrgId,
      },
      onlyData: false,
      onComplete: (res) => {
        if (res && res.IsSuccessful && res.Data) {
          this.setState({
            ConcurrencyNum: res.Data
          })
        }
      }
    })
  }

  render () {
    const { EnergyNum, PVNum, WarningNum, CPU, STORAGE } = this.state.data
    const { processData, versionData } = this.state
    return (
      <Row gutter={24}>
        <Col span={18}>
          <div className='dashboard__gradient-wrap'>
            <DashboardCard
              title='综合能耗'
              attach='（近一年）'
              iconType='bar-chart'
              colorIndex={0}
              colors={['rgb(118, 203, 251)', 'rgb(18, 159, 231)']}
            >
              <span>{EnergyNum}</span>
              <span>万tCe</span>
            </DashboardCard>
            <DashboardCard
              title='PV'
              iconType='bar-chart'
              colors={['rgb(254, 148, 150)', 'rgb(245, 107, 107)']}
            >
              <span>{PVNum}</span>
            </DashboardCard>
            <DashboardCard
              title='Concurrency'
              iconType='bar-chart'
              colors={['rgb(64, 228, 191)', 'rgb(12, 208, 168)']}
            >
              <span>{this.state.ConcurrencyNum}</span>
            </DashboardCard>
            <DashboardCard
              title='报警次数'
              attach='（近一年）'
              iconType='alert'
              colors={['rgb(255, 203, 141)', 'rgb(255, 179, 90)']}
            >
              <span>{WarningNum}</span>
            </DashboardCard>
          </div>
          <LayoutCard style={{ marginTop: '0.15rem' }}>
            <h2 className='dashboard__process-title'>运用流程</h2>
            <div className='dashboard__process-wrap'>
              {
                processData.map(process => {
                  return (
                    <div key={process.PName} className='dashboard__process-zone'>
                      <div className='dashboard__process-zoneCard'>{process.PName}</div>
                      {
                        process.UseChildren.map(child => {
                          return (
                            <div
                              key={child.PName}
                              onClick={() => {
                                this.props.dispatch({
                                  type: 'app/addTab',
                                  payload: {
                                    addedTab: {
                                      ID: child.FromObj.ID,
                                      NAME: child.FromObj.NAME,
                                      MENU_FORM_PARAMS: child.FromObj.CUSTOM_PARAMS,
                                      Nav_MenuForm: child.FromObj
                                    }
                                  }
                                })
                              }}
                              className='dashboard__process-zoneCard'
                              style={{ backgroundColor: child.BgColor }}
                            >
                              {child.PName}
                            </div>
                          )
                        })
                      }
                    </div>
                  )
                })
              }
            </div>
          </LayoutCard>
        </Col>
        <Col span={6}>
          <LayoutCard>
            <h2 className='dashboard__process-title'>实时监控</h2>
            <div className='dashboard__sysinfo'>
              <div className='dashboard__sysinfo-title'>
                <span>CPU 使用率</span>
                <span>{CPU} %</span>
              </div>
              <Progress
                showInfo={false}
                strokeColor={{
                  '0%': '#9593fd',
                  '100%': '#6e9ade',
                }}
                percent={Number(CPU)}
              />
            </div>
            <div className='dashboard__sysinfo'>
              <div className='dashboard__sysinfo-title'>
                <span>内存占用率</span>
                <span>{STORAGE} %</span>
              </div>
              <Progress
                showInfo={false}
                strokeColor={{
                  '0%': '#0bd0a5',
                  '100%': '#13c5c7',
                }}
                percent={Number(STORAGE)}
              />
            </div>
          </LayoutCard>
          <LayoutCard style={{ marginTop: '0.15rem' }}>
            <h2 className='dashboard__process-title'>更新日志</h2>
            <Scrollbars style={{ height: '3rem' }} autoHide autoHideTimeout={1000} autoHideDuration={200}>
              <Timeline style={{ padding: 8 }}>
                {
                  versionData.map((version, index) => {
                    return (
                      <Timeline.Item
                        key={version.Version + index}
                        dot={<div className='dashboard__timeline-dot'></div>}
                      >
                        <p className='dashboard__timeline-title'>
                          {version.Version_ZH}
                          <span>{version.CreateTime}</span>
                        </p>
                        <span className='dashboard__timeline-content'>
                          {version.Content}
                        </span>
                      </Timeline.Item>
                    )
                  })
                }
              </Timeline>
            </Scrollbars>
          </LayoutCard>
        </Col>
      </Row>
    )
  }
}

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