import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { A1ListType } from '../data'
import { Button } from 'antd'
import ZupTypes from '@/components/ZupTypes'
import ZupVideos from '@/components/ZupVideos'
import A1T1add from './A1T1add'

type Props = {
  sInfo: A1ListType
  upInfoFu: () => void
}

function A1tab1introduce({ sInfo, upInfoFu }: Props) {
  // 多张图片的ref
  const ZupImgsRef = useRef<any>(null)

  // 多个视频的ref
  const ZupVideosRef = useRef<any>(null)

  useEffect(() => {
    const file = sInfo.img || []
    // 传给 附件 组件的
    const sonInfo = {
      type: 'img',
      fileList: file
    }
    ZupImgsRef.current?.setFileComFileFu(sonInfo)
    ZupVideosRef.current?.setFileComFileFu(sInfo.video || [])
  }, [sInfo])

  const [editShow, setEditShow] = useState(false)

  return (
    <div className={styles.A1tab1introduce}>
      <div className='A1T1btn'>
        <Button type='primary' onClick={() => setEditShow(true)}>
          编辑
        </Button>
      </div>

      {sInfo.id ? (
        <>
          <div className='A1T1box'>
            <div className='A1T1box1'>简介：</div>
            <div className='A1T1box2 A1T1box2_2'>{sInfo.intro || '（空）'}</div>
          </div>

          <div className='A1T1box'>
            <div className='A1T1box1'>图片：</div>
            <div className='A1T1box2 A1T1box2_2'>
              {sInfo.img.length === 0 ? (
                '（空）'
              ) : (
                <ZupTypes
                  ref={ZupImgsRef}
                  isLook={true}
                  fileCheck={false}
                  selecFlag='图片'
                  imgSize={5}
                  imgLength={50}
                  dirCode='A1record'
                  myUrl='cms/martyr/upload'
                  isTypeShow={true}
                />
              )}
            </div>
          </div>

          <div className='A1T1box'>
            <div className='A1T1box1'>视频：</div>
            <div className='A1T1box2'>
              <ZupVideos
                isLook={true}
                size={500}
                fileNum={50}
                dirCode='A1recordVideo'
                myUrl='cms/martyr/upload'
                upTxt='；数量不超过50个。'
                ref={ZupVideosRef}
              />
            </div>
          </div>
        </>
      ) : null}

      {/* 点击编辑 */}
      {editShow ? (
        <A1T1add sInfo={sInfo} upSonFu={upInfoFu} closeFu={() => setEditShow(false)} />
      ) : null}
    </div>
  )
}

const MemoA1tab1introduce = React.memo(A1tab1introduce)

export default MemoA1tab1introduce
