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

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

import backImg from '@/assets/img/back.png'
import { domShowFu } from '@/utils/domShow'

type TabType = '场馆介绍' | '预约须知'

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

  const [txt0, setTxt0] = useState('')

  const getTxtFu = useCallback(async () => {
    const res0 = await API_getConfigById(17)

    if (res0.code === 0) {
      console.log(123, res0)
      let info = JSON.parse(res0.data.rtf)
      setTxt0(info.txtArr[0].txt)
    }

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

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

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

  // 切换 场馆介绍 预约须知
  const [tab, setTab] = useState<TabType>('场馆介绍')

  // tab切换
  const tabCutFu = useCallback((val: TabType) => {
    domShowFu('#AsyncSpinLoding', true)

    if (B1ref.current) B1ref.current.scrollTop = 0
    setTimeout(() => {
      setTab(val)
      domShowFu('#AsyncSpinLoding', false)
    }, 500)
  }, [])

  const toHomeHtml = useCallback(() => {
    if (tab === '场馆介绍') window.location.href = '/web/home.html'
    else tabCutFu('场馆介绍')
  }, [tab, tabCutFu])

  // 主盒子 滚动
  const B1ref = useRef<HTMLDivElement>(null)

  return (
    <div className={styles.B1exhibit + ' myTextBox'} ref={B1ref}>
      <div className='B1top'>
        <img src={topImg} alt='' />
        <img className='B1topBack' src={backImg} alt='' onClick={toHomeHtml} />
      </div>

      <h1 className='B1tit'>{tab}</h1>
      <div
        className='B1txt'
        dangerouslySetInnerHTML={{ __html: tab === '场馆介绍' ? txt0 : txt }}
      ></div>

      {tab === '场馆介绍' ? (
        <div className='B1btn'>
          <div className='B1btn4' onClick={() => tabCutFu('预约须知')}>
            进行预约
          </div>
        </div>
      ) : (
        <div className='B1btn'>
          <div className='B1btn1' onClick={() => history.push('/exhiMy')}>
            我的预约
          </div>
          <div className='B1btn2' onClick={() => history.push('/exhiStart/1')}>
            个人预约
          </div>
          <div className='B1btn3' onClick={() => history.push('/exhiStart/2')}>
            团队预约
          </div>
        </div>
      )}
    </div>
  )
}

const MemoB1exhibit = React.memo(B1exhibit)

export default MemoB1exhibit
