import React from 'react'
import { connect } from 'dva'
import { Button, message } from 'antd'
import classNames from 'classnames'
import './index.less'

class BDPlantHierarchyPage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      levels: [
        {
          level: 5,
          img: require('../../../assets/BD/level5.png'),
          imgOn: require('../../../assets/BD/level5-on.png'),
          title: '集团'
        },
        {
          level: 4,
          img: require('../../../assets/BD/level4.png'),
          imgOn: require('../../../assets/BD/level4-on.png'),
          title: '企业'
        },
        {
          level: 3,
          img: require('../../../assets/BD/level3.png'),
          imgOn: require('../../../assets/BD/level3-on.png'),
          title: '车间'
        },
        {
          level: 2,
          img: require('../../../assets/BD/level2.png'),
          imgOn: require('../../../assets/BD/level2-on.png'),
          title: '生产线'
        },
        {
          level: 1,
          img: require('../../../assets/BD/level1.png'),
          imgOn: require('../../../assets/BD/level1-on.png'),
          title: '设备'
        }
      ],
      level: 0
    }
  }

  componentDidMount () {
    this.loadData()
  }

  loadData = () => {
    const json = {
      ORG_ID: this.props.login.OrgId
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BD/BDMeterNode/GetPlantHierarchy',
      payload: json
    }).then(res => {
      if (res) {
        this.setState({
          level: res.LEVEL
        })
      }
    })
  }

  handleOk = () => {
    const { level } = this.state
    const json = {
      ORG_ID: this.props.login.OrgId,
      Parameter1: level
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BD/BDMeterNode/UpdatePlantHierarchy',
      payload: json,
      onlyData: false
    }).then(res => {
      if (res && res.IsSuccessful) {
        message.success('执行成功')
      } else {
        message.error(res.ErrorMessage)
      }
    })
  }

  render () {
    const { levels, level } = this.state

    return (
      <div className='bd-page__plant'>
        <Button type={'primary'} icon={'save'} onClick={() => this.handleOk()}>保存</Button>
        <div className='bd-page__plant-wrap'>
          {
            levels.map(item => {
              return (
                <div
                  key={item.title}
                  onClick={() => { this.setState({ level: item.level }) }}
                  className={classNames('bd-page__plant-zone', { active: item.level <= level, currLevel: item.level === level })}
                >
                  <div className='bd-page__plant-level'>{item.level}</div>
                  <div className='bd-page__plant-img'>
                    <img src={item.img} alt='img' className='bd-page__plant-imgOff' />
                    <img src={item.imgOn} alt='img' className='bd-page__plant-imgOn' />
                  </div>
                  <div className='bd-page__plant-title'>{item.title}</div>
                </div>
              )
            })
          }
        </div>
      </div>
    )
  }
}

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