import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'

import topImg from '@/assets/img/exhibit/top.png'
import history from '@/utils/history'
import { B1_APIgetInfoByDay } from '@/store/action/all'
import dayjs from 'dayjs'

function B1exhibit() {
  const [txt, setTxt] = useState('')

  const getTxtFu = useCallback(async () => {
    const res = await B1_APIgetInfoByDay(dayjs().format('YYYY-MM-DD'))
    if (res.code === 0) {
      let obj = JSON.parse(res.data.notice)

      setTxt(obj.txtArr[0].txt)
    }
  }, [])

  useEffect(() => {
    getTxtFu()
  }, [getTxtFu])

  return (
    <div className={styles.B1exhibit + ' myTextBox'}>
      <img className='B1top' src={topImg} alt='' />
      <h1 className='B1tit'>预约须知</h1>
      <div className='B1txt' dangerouslySetInnerHTML={{ __html: txt }}></div>
      <div className='B1btn'>
        <div className='B1btn1' onClick={() => history.push('/exhiMy')}>
          我的预约
        </div>
        <div className='B1btn2' onClick={() => history.push('/exhiStart')}>
          发起预约
        </div>
      </div>
    </div>
  )
}

const MemoB1exhibit = React.memo(B1exhibit)

export default MemoB1exhibit
