import React, { useEffect, useRef, useState } from 'react'
import ReactSignatureCanvas from 'react-signature-canvas'
import Drag from '../../../components/Drag'
import { UploadFileReturnUrl } from '../../../../apis/process'
import styles from './index.less'

const Signature = (props) => {

  const { addons, value, onChange, schema } = props
  const { disabled, presetValue } = schema
  const [visible, setVisible] = useState(false)
  const canvasRef = useRef(null)

  const open = () => {
    if (addons) {
      setVisible(true)
    }
  }

  const onOk = async () => {
    if (disabled) {
      setVisible(false)
    } else {
      if (addons) {
        const dataUrl = canvasRef.current.toDataURL(); // 获取 Base64 编码的字符串
        const byteString = atob(dataUrl.split(',')[1]); // 将 Base64 编码的字符串转换为字节数组
        const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0]; // 获取 MIME 类型
        const ab = new ArrayBuffer(byteString.length);
        const ia = new Uint8Array(ab);
        for (let i = 0; i < byteString.length; i++) {
          ia[i] = byteString.charCodeAt(i);
        }
        const file = new Blob([ab], { type: mimeString }); // 将字节数组转换为文件流
        const formData = new FormData(); // 创建表单数据对象
        formData.append('file', file, 'signature.png'); // 添加文件流到表
        const { code, data } = await UploadFileReturnUrl(formData)
        if (code === 0) {
          onChange(data)
          setVisible(false)
        } else {
          message.error('生成图片失败!')
        }
      }
    }
  }

  useEffect(() => {
    addons?.setValue(addons?.dataPath, presetValue || '')
  }, [presetValue])

  return (
    <div className={styles.signature}>
      <div className={styles.content}>
        {
          value ? (
            <img onClick={open} src={`${window.origin}/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=${value}`}></img>
          ) : (
            disabled ? null : <div onClick={open} className={styles.text}>点击签名</div>
          )
        }
      </div>
      <Drag
        title={'手写签名'}
        visible={visible}
        onOk={onOk}
        onCancel={() => setVisible(false)}
        destroyOnClose
      >
        {
          disabled ? (
            <img src={`${window.origin}/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=${value}`}></img>
          ) : (
            <div style={{ background: '#F1F1F1', borderRadius: '5px' }}>
              <ReactSignatureCanvas
                ref={canvasRef}
                canvasProps={{ width: 500, height: 300 }}
              />
            </div>
          )
        }
      </Drag>
    </div>
  )

}

export default Signature