import React, { useCallback, useEffect, useRef } from 'react'
import styles from './index.module.scss'
import { Button, Modal } from 'antd'
import ZupOne from '@/components/ZupOne'
import { A2_APIgetConfig, A2_APIsetConfig } from '@/store/action/A2orderSet'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'

type Props = {
  closeFu: () => void
  type: '课程预约' | '团队认证'
}

function A2template({ closeFu, type }: Props) {
  // pdf的ref
  const ZupTxtRef = useRef<any>(null)

  // 获取设置
  const getEMfu = useCallback(async () => {
    const res = await A2_APIgetConfig(
      'cms/book/config/get',
      type === '课程预约' ? 13 : 14
    )
    if (res.code === 0) {
      // 设置附件
      const info = JSON.parse(res.data.rtf || '{}')
      ZupTxtRef.current?.setFileComFileFu({
        fileName: info.fileName || '',
        filePath: info.filePath || ''
      })
    }
  }, [type])

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

  // 点击提交
  const btnOk = useCallback(async () => {
    let fileName = ''
    let filePath = ''
    // PDF附件
    const ZupTxtRefObj = ZupTxtRef.current?.fileComFileResFu()
    fileName = ZupTxtRefObj.fileName
    filePath = ZupTxtRefObj.filePath

    const res = await A2_APIsetConfig('cms/book/config/edit', {
      id: type === '课程预约' ? 13 : 14,
      rtf: JSON.stringify({ fileName, filePath })
    })
    if (res.code === 0) {
      MessageFu.success(`设置${type === '课程预约' ? '预约单' : '认证'}模板成功!`)
      closeFu()
    }
  }, [closeFu, type])

  return (
    <Modal
      wrapClassName={styles.A2template}
      open={true}
      title=''
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      {/* 附件 */}
      <div className='formRow'>
        <div className='formLeft'>{type === '课程预约' ? '预约单' : '认证'}模板：</div>
        <div className='formRight'>
          <ZupOne
            ref={ZupTxtRef}
            isLook={false}
            fileCheck={false}
            size={50}
            dirCode='A2templatePDF'
            myUrl='cms/book/upload'
            format={['application/pdf']}
            formatTxt='pdf、doc、docx'
            checkTxt='请上传pdf、doc、docx附件!'
            upTxt='最多1个'
            myType='pdf、doc、docx'
            otherArr={[{ key: 'moduleName', value: 'config' }]}
          />
        </div>
      </div>

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

const MemoA2template = React.memo(A2template)

export default MemoA2template
