import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { Button } from 'antd'
import { textFu } from '@/utils/history'
import A5add from './A5add'
import { A5_APIgetList } from '@/store/action/A5A5introduce'
import { useDispatch, useSelector } from 'react-redux'
import { A5ListType } from './data'
import { RootState } from '@/store'

function A5introduce() {
  const dispatch = useDispatch()

  const getInfoFu = useCallback(async () => {
    dispatch(A5_APIgetList())
  }, [dispatch])

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

  const info = useSelector((state: RootState) => state.A5introduce.info)

  // 新增和编辑
  const [addInfo, setAddInfo] = useState({} as A5ListType)

  return (
    <div className={styles.A5introduce}>
      <div className='pageTitle'>展馆介绍</div>
      {info.id ? (
        <div className='A5main'>
          <div className='A5ll'>
            <div dangerouslySetInnerHTML={{ __html: textFu(info.rtf) || '（空）' }}></div>
          </div>
          <div className='A5rr'>
            <Button type='primary' onClick={() => setAddInfo(info)}>
              编辑
            </Button>
          </div>
        </div>
      ) : null}

      {addInfo.id ? (
        <A5add sInfo={addInfo} closeFu={() => setAddInfo({} as A5ListType)} upTableFu={getInfoFu} />
      ) : null}
    </div>
  )
}

const MemoA5introduce = React.memo(A5introduce)

export default MemoA5introduce
