import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { Button, Modal } from 'antd'
import { A1ListType } from '../../data'
import MyPopconfirm from '@/components/MyPopconfirm'
import ZupTypes from '@/components/ZupTypes'
import ZupVideos from '@/components/ZupVideos'
import { A1_APIsave } from '@/store/action/A1record'
import { MessageFu } from '@/utils/message'
import TextArea from 'antd/es/input/TextArea'

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

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

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

  const [intro, setIntro] = useState('')

  useEffect(() => {
    setIntro(sInfo.intro)

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

    ZupVideosRef.current?.setFileComFileFu(sInfo.video || [])
  }, [sInfo])

  const btnOk = useCallback(async () => {
    // 多张图片
    const { sonFileIds, sonIsOk } = ZupImgsRef.current?.fileComFileResFu()

    // 多个视频
    const list = ZupVideosRef.current?.fileComFileResFu() || []

    const obj = {
      ...sInfo,
      intro,
      imgIds: sonIsOk ? '' : sonFileIds.join(','),
      videoIds: list.map((v: any) => v.id).join(',')
    }
    const res = await A1_APIsave(obj)
    if (res.code === 0) {
      MessageFu.success('编辑成功')
      upSonFu()
      closeFu()
    }
  }, [closeFu, intro, sInfo, upSonFu])

  return (
    <Modal
      wrapClassName={styles.A1T1add}
      open={true}
      title='编辑介绍'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='A1T1aMain'>
        <div className='formRow'>
          <div className='formLeft'>古桥简介：</div>
          <div className='formRight'>
            <TextArea
              maxLength={2000}
              showCount
              placeholder='请输入'
              value={intro}
              onChange={e => setIntro(e.target.value)}
            />
          </div>
        </div>
        <br />

        {/* 多个图片 */}
        <div className='formRow'>
          <div className='formLeft'>图片：</div>
          <div className='formRight formRight2'>
            <ZupTypes
              ref={ZupImgsRef}
              isLook={false}
              fileCheck={false}
              selecFlag='图片'
              imgSize={5}
              imgLength={50}
              dirCode='A1record'
              myUrl='cms/bridge/upload'
              isTypeShow={true}
            />
          </div>
        </div>

        {/* 多个视频 */}
        <div className='formRow formRow2'>
          <div className='formLeft'>视频：</div>
          <div className='formRight'>
            <ZupVideos
              isLook={false}
              size={500}
              fileNum={50}
              dirCode='A1recordVideo'
              myUrl='cms/bridge/upload'
              upTxt='；数量不超过50个。'
              ref={ZupVideosRef}
            />
          </div>
        </div>
      </div>

      <div className='A1T1aBtn'>
        <Button type='primary' onClick={btnOk}>
          提交
        </Button>
        &emsp;
        <MyPopconfirm txtK='取消' onConfirm={closeFu} />
      </div>
    </Modal>
  )
}

const MemoA1T1add = React.memo(A1T1add)

export default MemoA1T1add
