import React from 'react'
import styles from './index.module.scss'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import history, { toHomeFu } from '@/utils/history'

type Props = {
  nextFu: () => void
  nextOk?: boolean
  onlyBack?: boolean
  backFu?: () => void
  FormBtn?: React.ReactNode
  backTxt?: string
}

function ZexhiBtn({
  nextFu,
  nextOk = true,
  onlyBack = false,
  backFu,
  FormBtn,
  backTxt = '返回'
}: Props) {
  const routerLength = useSelector((state: RootState) => state.A0Layout.routerLength)
  return (
    <div id='ZexhiBtn' className={styles.ZexhiBtn}>
      <div
        onClick={() => {
          if (backFu) backFu()
          else routerLength ? history.go(-1) : toHomeFu()
        }}
        className='ZexhiBtn1'
        style={{ width: onlyBack ? '100%' : '' }}
      >
        {backTxt}
      </div>
      {onlyBack ? null : FormBtn ? (
        FormBtn
      ) : (
        <div className={`ZexhiBtn1 ZexhiBtn2 ${nextOk ? '' : 'myBtnNo'}`} onClick={nextFu}>
          下一步
        </div>
      )}
    </div>
  )
}

const MemoZexhiBtn = React.memo(ZexhiBtn)

export default MemoZexhiBtn
