import React, { useMemo } from 'react'
import styles from './index.module.scss'
import { CloseCircleOutlined } from '@ant-design/icons'
import classNames from 'classnames'
import { A1listType } from '../data'

type Props = {
  closeFu: () => void
  info: A1listType
}

function A1Mo({ closeFu, info }: Props) {
  const txtRes = useMemo(() => {
    let txt = '（空）'
    if (info.id && info.rtf) {
      const val = JSON.parse(info.rtf || '{}')
      if (val && val.txtArr && val.txtArr.length) {
        if (val.txtArr[0].tableTxt) txt = val.txtArr[0].txt
      }
    }
    return txt
  }, [info])

  return (
    <div className={classNames(styles.A1Mo, info.id ? styles.A1MoShow : '')}>
      <div className='A1Mmain'>
        <div className='A1Mmain1'>
          {info.id ? (
            <div>
              <h2>{info.name}</h2>
              <div dangerouslySetInnerHTML={{ __html: txtRes }}></div>
            </div>
          ) : null}
        </div>
        <div className='A1Mmain2'>
          <CloseCircleOutlined rev={undefined} onClick={closeFu} />
        </div>
      </div>
    </div>
  )
}

const MemoA1Mo = React.memo(A1Mo)

export default MemoA1Mo
