// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Empty, Row, Col, message, Timeline } from 'antd'
import { Search, LayoutCard } from '@woowalker/feui'
import ListPage from '../../Table/ListPage'
import CommonChart from '../../Chart/CommonChart'
//工具库
import { addRuleAndGroups } from '../../../utils/common'
// 样式
import styles from './index.css'

class  EMEquipmentMonitoringPage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      searchRules: [],
      order: 1,
      alarmHead: [],
      alarmSource: [],
      appName: '',
      rowSelectedKeys: [],
      chartData: {}
    }
  }

  componentDidMount () {
    this.getNodeAlarmLog()
  }

  getNodeAlarmLog () {
    const json = {
      OrgId: this.props.login.OrgId,
      nodeId: this.props.data.id, 
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EM/Monitoring/GetEquipmentNodeAlarmLog',
      payload: json
    }).then(res => {
      if (res) {
        this.setState({
          alarmHead: res.alarmHead,
          alarmSource: res.alarmSource
        })
      }
    })
  }

  handleSearch = (value) => {
    value.rules.push({
      field: 'nodeId',
      operator: 0,
      value: this.props.data.id,
      isCustom: true,
      isSysParam: false,
    })
    this.setState({
      searchRules: value,
      order: 1
    }, () => {
      this.getData(value)
      this.getNodeAlarmLog()
      this.child.loadData(value)
    })
  }

  getData = (value) => {
    const json = {
      OrgId: this.props.login.OrgId,
      nodeId: this.props.data.id,
      Order: this.state.order,
    }
    addRuleAndGroups(json, value)
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EM/Monitoring/GetEquipmentLineData',
      payload: json
    }).then(res => {
      if (res && res.chartData && res.chartData.XAxis.length > 0) {
        const { chartData, appName, rowSelectedKeys } = res
        this.setState({
          appName,
          rowSelectedKeys,
          chartData: {
            xAxis: chartData.XAxis[0].Data,
            yAxis: chartData.YAxis,
            data: chartData.Data
          }
        })
      }
    })
  }

  settingSave = (value) => {
    const json = {
      OrgId: this.props.login.OrgId,
      IdArry: value,
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EM/Monitoring/StructureSelect',
      payload: json
    }).then(res => {
      if (res) {
        if (res.IsSucceed) {
          this.getData(this.state.searchRules)
        } else {
          message.error(res.Msg)
        }
      }
    })
  }

  render () {
    const { formId, formCode } = this.props
    const { alarmHead, alarmSource, appName, rowSelectedKeys, chartData } = this.state

    return (
      <div className='scroll_page'>
        <Search
          formId={formId}
          formCode={formCode}
          onSearch={this.handleSearch}
        />
        <Row style={{ marginBottom: 16 }}>
          <Col span={19}>
            <LayoutCard title='设备监测'>
              <CommonChart
                chartId='EMEquipmentMonitoringPage'
                {...chartData}
                titleText={appName}
                style={{ height: 300 }}
              />
            </LayoutCard>
          </Col>
          <Col span={5}>
            <LayoutCard title={alarmHead[0] ? alarmHead[0].Title : '报警信息'}>
              <div className={styles.structure_alarm}>
                {!alarmSource.length ? <Empty style={{ marginTop: 65 }} /> : null}
                <Timeline>
                  {
                    alarmSource.map((item, index) => {
                      return <Timeline.Item color={'red'}>{item.describe}</Timeline.Item>
                    })
                  }
                </Timeline>
              </div>
            </LayoutCard>
          </Col>
        </Row>
        <ListPage
          preventDefaultSearch
          formCode='EM113'
          data={this.state.searchRules}
          onRef={ref => this.child = ref}
          rowSelectedKeys={rowSelectedKeys}
          onRowSelectChange={this.settingSave}
        />
      </div>
    )
  }
}

export default connect(({ login, app, search }) => ({ login, app, search }))(EMEquipmentMonitoringPage)
