import React, { useCallback, useRef } from 'react'
import styles from './index.module.scss'
import { MessageFu } from '@/utils/message'
import { API_upFile } from '@/store/action/layout'
import { fileDomInitialFu } from '@/utils/domShow'
import { UploadOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons'
import store from '@/store'
import MyPopconfirm from '../MyPopconfirm'

export type ZupAudioType = {
  fileName: string
  filePath: string
}

type Props = {
  fileInfo: ZupAudioType
  upDataFu: (info: ZupAudioType) => void
  delFu: () => void
  dirCode: string
  myUrl: string
  size?: number
  isLook?: boolean
}

function ZupAudio({ size = 10, isLook = false, fileInfo, upDataFu, delFu, dirCode, myUrl }: Props) {
  // 上传 无障碍音频的 点击
  const handeUpAudio = useCallback(
    async (e: React.ChangeEvent<HTMLInputElement>) => {
      if (e.target.files) {
        // 拿到files信息
        const filesInfo = e.target.files[0]
        // console.log("-----", filesInfo);

        // 校验格式
        const type = ['audio/mpeg']
        if (!type.includes(filesInfo.type)) {
          e.target.value = ''
          return MessageFu.warning(`只支持.mp3格式!`)
        }

        // 校验大小
        if (filesInfo.size > size * 1024 * 1024) {
          e.target.value = ''
          return MessageFu.warning(`最大支持${size}M!`)
        }
        // 创建FormData对象
        const fd = new FormData()

        fd.append('type', 'audio')
        fd.append('dirCode', dirCode)
        fd.append('file', filesInfo)
        e.target.value = ''

        try {
          const res = await API_upFile(fd, myUrl)
          if (res.code === 0) {
            MessageFu.success('上传成功!')
            // console.log(res);
            upDataFu(res.data)
          }
          fileDomInitialFu()
        } catch (error) {
          fileDomInitialFu()
        }
      }
    },
    [dirCode, myUrl, size, upDataFu]
  )

  // 上传附件的ref
  const myInput = useRef<HTMLInputElement>(null)

  return (
    <div className={styles.ZupAudio} id='upInputAudioBox' hidden={isLook && !fileInfo.filePath}>
      {/* 上传无障碍音频 */}
      <input
        id='upInputAudio'
        type='file'
        accept='.mp3'
        onChange={e => handeUpAudio(e)}
        ref={myInput}
      />
      {fileInfo.filePath ? (
        <div className='ZupAudio2'>
          <div title={fileInfo.fileName}>{fileInfo.fileName}</div>
          <EyeOutlined
            title='预览'
            onClick={() =>
              store.dispatch({
                type: 'layout/lookDom',
                payload: { src: fileInfo.filePath, type: 'audio' }
              })
            }
          />

          {isLook ? null : (
            <>
              &nbsp;
              <MyPopconfirm
                txtK='删除'
                onConfirm={delFu}
                Dom={<DeleteOutlined title='删除' className='ZTbox2X' rev={undefined} />}
              />
            </>
          )}
        </div>
      ) : (
        <div className='ZupAudio1' onClick={() => myInput.current?.click()}>
          <UploadOutlined />
          <div className='ZupAudio1_1'>
            <p>上传无障碍音频</p>
            <p>支持{size}MB以下mp3格式</p>
          </div>
        </div>
      )}
    </div>
  )
}

const MemoZupAudio = React.memo(ZupAudio)

export default MemoZupAudio
