import React, { useMemo } from 'react'
import { connect } from 'dva'
import { CrumbsNav } from '@woowalker/feui'
import FormPage from '../components/FormPage'
import './main.less'

const FakePage = () => {
  return null
}

const Main = (props) => {
  const Page = useMemo(() => {
    const { menuId } = props.match.params
    const { flatMenus } = props.login
    const find = flatMenus.find(item => item.ID === menuId)
    if (!menuId || !find) return <FakePage />

    const { ID, MENU_FORM_PARAMS, Nav_MenuForm } = find
    const formCode = Nav_MenuForm?.CODE || ''
    const formParam = {}
    if (MENU_FORM_PARAMS) {
      const params = MENU_FORM_PARAMS.split('|')
      params.forEach(param => {
        const keyValues = param.split('=')
        if (keyValues.length >= 2) {
          formParam[keyValues[0]] = keyValues[1]
        } else {
          formParam[keyValues[0]] = null
        }
      })
    }
    return <FormPage key={ID} formCode={formCode} formParam={formParam} />
  }, [props.login.flatMenus, props.match.params?.menuId])

  return (
    <div className='route-main'>
      <CrumbsNav />
      <div className='route-main__content'>{Page}</div>
    </div>
  )
}

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