import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Icon, message } from 'antd'
import { cloneDeep } from 'lodash'
import classNames from 'classnames'
import './index.less'

function ConfigureBtn (props) {
  const { loading = { effects: {} } } = props
  const onLoading = loading.effects['custom/homeboardSetConf'] || loading.effects['custom/homeboardGetConf'] || loading.effects['custom/homeboardGetData']

  return (
    <div
      onClick={() => props.onClick instanceof Function && props.onClick()}
      className='board-page__configure-btn'
      style={props.style}
    >
      <Icon type={onLoading ? 'loading' : (props.icon || 'setting')} /><span>{props.label}</span>
    </div>
  )
}

function BoardPage (props) {
  const [configure, setConfigure] = useState(false)
  const [boardData, setBoardData] = useState(null)
  const [confData, setConfData] = useState(null)

  // 显示区域相关数据、方法
  const getBoardData = () => {
    const { OrgId, userId: Keyword } = props.login
    return props.dispatch({
      type: 'custom/homeboardGetData',
      payload: { OrgId, Keyword, Parameter1: props.formCode }
    }).then(res => {
      res && setBoardData(res)
    })
  }

  const handleRadioChange = (evt, item) => {
    const find = item.Data.find(data => data.Name === evt.target.value)
    if (find) {
      item.checkedChart = find.Data
      const newBoardData = { ...boardData }
      setBoardData(newBoardData)
    }
  }

  // 设置区域相关数据、方法
  const getConfData = () => {
    const { OrgId, userId: Keyword } = props.login
    props.dispatch({
      type: 'custom/homeboardGetConf',
      payload: { OrgId, Keyword, Parameter1: props.formCode }
    }).then(res => {
      res && setConfData(res)
    })
  }

  const saveConfData = () => {
    if (confData) {
      props.dispatch({
        type: 'custom/homeboardSetConf',
        payload: { ...confData, FromCode: props.formCode }
      }).then(res => {
        if (res) {
          // 保存成功后先请求数据，然后再切换页面，以保证动画效果
          getBoardData().finally(() => {
            message.success('保存成功')
            setConfigure(false)
          })
        }
      })
    } else {
      setConfigure(false)
    }
  }

  const moveRow = (dragIndex, hoverIndex, type) => {
    const copyData = cloneDeep(confData[type])
    if (copyData[dragIndex] && copyData[hoverIndex]) {
      [copyData[dragIndex], copyData[hoverIndex]] = [copyData[hoverIndex], copyData[dragIndex]]
      const newConfData = { ...confData, [type]: copyData }
      setConfData(newConfData)
    }
  }

  const handleCheckedChange = (checked, item) => {
    item.IsCheck = checked
    const newConfData = { ...confData }
    setConfData(newConfData)
  }

  useEffect(() => {
    getBoardData()
    getConfData()
  }, [])

  return (
    <div className='board-page'>
      <div className={classNames('board-page__configure', { configure })}>
        <ConfigureBtn
          icon={configure ? 'rollback' : 'setting'}
          label={configure ? '取消' : '去配置'}
          onClick={() => setConfigure(!configure)}
        />
        <ConfigureBtn
          icon='save'
          label='保存'
          loading={props.loading}
          onClick={saveConfData}
        />
      </div>
      <div className={classNames('board-page__layout', { configure })}>
        <div className='board-page__layout-main'>
          {React.cloneElement(props.children, { boardData, handleRadioChange })}
        </div>
        <div className='board-page__layout-set'>
          {React.cloneElement(props.children, { onEdit: true, boardData: confData, moveRow, handleCheckedChange })}
        </div>
      </div>
    </div>
  )
}

BoardPage.propTypes = {
  formCode: PropTypes.string
}

export default connect(({ login, loading }) => ({ login, loading }))(BoardPage)
