import React, { useMemo } from 'react'
import styles from './index.module.scss'

import succImg from '@/assets/img/order/succ.png'
import infoImg from '@/assets/img/order/info.png'
// import errImg from '@/assets/img/order/err.png'

type Props = {
  type: 'succ' | 'info' | 'err'
  callFu: () => void
  txt1?: string
  txt2?: string
}

function ZinfoPop({ type, callFu, txt1 = '预约成功', txt2 = '工作人员将尽快与您取得联系' }: Props) {
  const infoObj = useMemo(() => {
    let obj = {
      img: succImg,
      tit1: txt1,
      txt2: txt2
    }
    if (type === 'info') obj.img = infoImg
    return obj
  }, [txt1, txt2, type])

  return (
    <div id='openDom' className={styles.ZinfoPop}>
      <div className={`ZIbox ZI${type}`}>
        <img src={infoObj.img} alt='' />
        <h2>{infoObj.tit1}</h2>
        <p>{infoObj.txt2}</p>
        <div onClick={callFu}>确认</div>
      </div>
    </div>
  )
}

const MemoZinfoPop = React.memo(ZinfoPop)

export default MemoZinfoPop