// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { LocalSearch, FullDatePicker } from '@woowalker/feui'
import EditListTable from '../../EditListTable'
// 工具库
import { isEqual } from 'lodash'
import moment from 'moment'

class EMEnergyClassListPage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      dateType: '1',
      dateString: moment().format('YYYY-MM'),
      searchParams: {},
      searchSize: undefined
    }
    this.refOfTable = null
  }

  updateRelatedFieldConfigs = () => {
    const { dateType, dateString } = this.state
    /**
     * payload: {
     *  code: 'EM079', // 配置了导出按钮的表格（ListPage或者ListTable）的 formCode 
     *  relatedTo: 'EM048', // 需要额外插入查询条件的 Search 组件的 formCode，如果是 LocalSearch 则这个属性可以缺省
     *  extraRows: ['额外插入的标题'] // 导出按钮需要插入的额外的导出标题
     * }
     * relatedTo 可以缺省，缺省的话只是插入 extraRows 作为额外的标题，
     * 不缺省的话，通过 relatedTo 关联的 formCode 获取到对应的 Search 组件，并进一步获取到查询条件，
     * 然后把查询条件连同 extraRows 一同作为额外的标题，插入到导出的文件中
     */
    this.props.dispatch({
      type: 'search/setRelatedFieldConfigs',
      payload: {
        code: 'EM092',
        extraRows: [`${dateString}${dateType === '0' ? '年' : dateType === '1' ? '月' : '日'}`]
      }
    })
  }

  handleSearch = (value) => {
    this.updateRelatedFieldConfigs()

    const { formParam, data } = this.props
    const { dateType, dateString } = this.state
    value.rules.push({
      field: 'Parameter1',
      operator: 0,
      value: formParam.Parameter1,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter2',
      operator: 0,
      value: dateType,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter3',
      operator: 0,
      value: dateString,
      isCustom: true,
      isSysParam: false,
    })
    value.rules.push({
      field: 'Parameter4',
      operator: 0,
      value: data.selectedNodes ? data.selectedNodes.map(item => item.node.id).join(',') : null,
      isCustom: true,
      isSysParam: false,
    })

    // 搜索动作由 LocalSearch DidMount 之后发起，这时候 refOfTable 还没被赋值，所以需要 setState 之后，再发起 table 的接口请求
    this.setState({ searchParams: value }, () => {
      this.refOfTable && this.refOfTable.loadData(this.state.searchParams)
    })
  }

  handleSize = (searchSize) => {
    !isEqual(searchSize, this.state.searchSize) && this.setState({ searchSize })
  }

  render () {
    const { searchSize } = this.state
    return (
      <>
        <LocalSearch
          isRemember
          shareKey='EMPeakValley'
          setExtraData={({ dateString, dateType }, callback) => this.setState({ dateString, dateType }, callback)}
          getExtraData={() => ({ dateType: this.state.dateType, dateString: this.state.dateString })}
          onSearch={this.handleSearch}
          onSize={this.handleSize}
        >
          <FullDatePicker
            dateType={this.state.dateType}
            dateString={this.state.dateString}
            onlyItem
            onChange={({ dateString, dateType }) => this.setState({ dateString, dateType })}
            options={['0', '1', '4']}
          />
        </LocalSearch>
        <EditListTable
          preventDefaultSearch
          formCode={'EM092'}
          onRef={ref => this.refOfTable = ref}
          style={{ height: `calc(100% - ${searchSize?.fullHeight || 0}px)` }}
        />
      </>
    )
  }

}

export default connect(({ search }) => ({ search }))(EMEnergyClassListPage)
