import React, { useState } from 'react'
import useRequest from '@ahooksjs/use-request/es'
import { useHistory } from 'react-router-dom'

import SecondMenu from 'Material/components/SecondMenu'
import { IndepthService } from '../Indepth.service'

import styles from '../css/IndepthIndex.module.scss'

export const rankID = 'rank'

type IIndepthLayoutProps = {
  permissionID: number // 行业ID
  children: React.ReactNode
  onSecondMenuClick?: (key: string | number) => void
  getMenuInfo?: (
    activeKey: string | number | undefined,
    obj: { tacticsID: number; rankID: string; gushouID: number }
  ) => void
}
const IndepthLayout: React.FC<IIndepthLayoutProps> = ({
  permissionID,
  children,
  onSecondMenuClick,
  getMenuInfo
}: IIndepthLayoutProps) => {
  const history = useHistory()

  const [secondMenuList, setSecondMenuList] = useState<{ key: string | number; name: string }[]>([]) // 菜单数据

  // eslint-disable-next-line no-empty-pattern
  const {} = useRequest(IndepthService.getPermissionListByReport, {
    onSuccess: res => {
      let tacticsID = 0
      let gushouID = 0
      const list: { key: string | number; name: string }[] = res.data.Data?.List?.map(item => {
        if (item.PermissionName.includes('策略')) tacticsID = item.ChartPermissionId
        if (item.PermissionName.includes('固收')) gushouID = item.ChartPermissionId
        return { key: item.ChartPermissionId, name: item.PermissionName }
      })
      list.unshift({ key: rankID, name: '榜单' }) // 暂定榜单ID设置成 rankID
      setSecondMenuList(list)
      getMenuInfo &&
        getMenuInfo(permissionID ? permissionID : list[0].key, {
          tacticsID: tacticsID,
          rankID: rankID,
          gushouID: gushouID
        })
    }
  })

  const handleChangeSecondMenu = (key: string | number) => {
    onSecondMenuClick && onSecondMenuClick(key)
    history.replace(`/indepth${key !== rankID ? '/' + key : ''}`)
  }
  return (
    <div className={styles['indepth-page']}>
      <SecondMenu
        list={secondMenuList}
        defalutKey={permissionID ? permissionID : secondMenuList && secondMenuList[0]?.key}
        onChange={handleChangeSecondMenu}
      />
      {children}
    </div>
  )
}

export default IndepthLayout
