// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Icon, Row, Col } from 'antd'
import { Search, LayoutCard, IFComponent } from '@woowalker/feui'
import CommonChart from '../../Chart/CommonChart'
// 工具库
import { initFilter, addRuleAndGroups } from "../../../utils/common"
import moment from 'moment'
import { cloneDeep } from 'lodash'
// 样式
import './index.less'

const { GradientCard } = LayoutCard

class BDMonitorPage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      statisticalDatas: [],
      chartData: {},
      searchRules: {},
      type: '2',
      day: moment().format('YYYY-MM-DD')
    }
  }

  handleSearch = (value) => {
    value.rules.push({
      field: 'Keyword',
      operator: 0,
      value: this.props.data.id,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter4',
      operator: 0,
      value: this.props.data.isNode,
      isCustom: true,
      isSysParam: false,
    })
    this.setState({
      searchRules: value,
      type: '2'
    }, () => {
      this.getMonitorData()
    })
  };

  getMonitorData = () => {
    const value = cloneDeep(this.state.searchRules)
    value.rules.push({
      field: 'Parameter2',
      operator: 0,
      value: this.state.type,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter3',
      operator: 0,
      value: this.state.day,
      isCustom: true,
      isSysParam: false,
    })
    const json = initFilter(this.props.login.OrgId)
    addRuleAndGroups(json, value)
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BD/BDAppliance/GetMeasureData',
      payload: json
    }).then(res => {
      if (res && res.statisticalDatas && res.chartData) {
        const { statisticalDatas, chartData } = res
        this.setState({
          statisticalDatas,
          chartData: {
            xAxis: chartData.XAxis[0].Data,
            yAxis: chartData.YAxis,
            data: chartData.Data
          }
        })
      }
    })
  }

  throughClick = (e) => {
    if (this.state.type === '2') {
      this.setState({ day: e.name, type: '3' }, this.getMonitorData)
    }
  }

  backClick = (e) => {
    if (this.state.type === '3') {
      this.setState({ type: '2' }, this.getMonitorData)
    }
  }

  render () {
    const { statisticalDatas, type, chartData } = this.state
    const { selectedNodes = [] } = this.props.data
    const titleText = selectedNodes.length ? `${selectedNodes.map(item => item.node.name).join('-')}` : ''
    return (
      <div className='bd-page__monitor'>
        <Search
          formId={this.props.formId}
          formCode={this.props.formCode}
          onSearch={this.handleSearch}
        />
        <LayoutCard title='消耗分析'>
          <Row gutter={16}>
            <Col span={19}>
              <span
                style={{ display: type == '2' ? 'none' : 'inline' }}
                onClick={this.backClick}
                className="bd-page__monitor-back"
              >
                <Icon type="rollback" />
                <span>返回</span>
              </span>
              <CommonChart
                chartId='BDMonitorPage'
                {...chartData}
                markLineMax
                markLineMin
                markLineAvg
                magicType={['line', 'bar']}
                titleText={titleText}
                onClick={this.throughClick}
                style={{ height: 375 }}
              />
            </Col>
            <Col span={5}>
              {
                statisticalDatas ? statisticalDatas.map((item, index) => {
                  return (
                    <GradientCard
                      key={'BD-Monitor-GradientCard' + index}
                      title={item.Name}
                      colorIndex={index}
                      style={{ marginBottom: index === statisticalDatas.length - 1 ? 0 : '15px' }}>
                      <span style={{ fontSize: 20, lineHeight: 1 }}>
                        {`${item.Value}${item.Unit ? ' ' + item.Unit : ''}`}
                      </span>
                      <IFComponent IF={!!item.Value2}>
                        <span style={{ marginTop: 5 }}><br />{item.Value2}</span>
                      </IFComponent>
                    </GradientCard>
                  )
                }) : null
              }
            </Col>
          </Row>
        </LayoutCard>
      </div>
    )
  }
}

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