import React, { useCallback, useEffect, useRef } from 'react'
import styles from './index.module.scss'
import { Button, Modal } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import ZRichTexts from '@/components/ZRichTexts'
import { MessageFu } from '@/utils/message'
import { A5ListType } from '../data'
import { A5_APIsave } from '@/store/action/A5A5introduce'

type Props = {
  sInfo: A5ListType
  closeFu: () => void
  upTableFu: () => void
}

function A5add({ sInfo, closeFu, upTableFu }: Props) {
  // 富文本的ref
  const ZRichTextRef = useRef<any>(null)

  useEffect(() => {
    if (sInfo.id > 0) {
      // 设置富文本
      if (sInfo.rtf) ZRichTextRef.current?.ritxtShowFu(JSON.parse(sInfo.rtf))
    }
  }, [sInfo])

  const addBtn = useCallback(async () => {
    // 富文本
    const rtf = ZRichTextRef.current?.fatherBtnOkFu() || { flag: true }

    const obj = {
      ...sInfo,
      rtf: JSON.stringify(rtf.val || '')
    }
    const res = await A5_APIsave(obj)
    if (res.code === 0) {
      MessageFu.success(sInfo.id > 0 ? '编辑成功' : '新增成功')
      upTableFu()
      closeFu()
    }
  }, [closeFu, sInfo, upTableFu])

  return (
    <Modal
      wrapClassName={styles.A5add}
      open={true}
      title='编辑展馆介绍'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='A1main'>
        <ZRichTexts
          check={false}
          dirCode='A5introduce'
          myUrl='cms/exhibition/upload'
          isLook={false}
          ref={ZRichTextRef}
          isOne={true}
          upAudioBtnNone={true}
          imgOne
        />
      </div>

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

const MemoA5add = React.memo(A5add)

export default MemoA5add
