/* eslint-disable @typescript-eslint/no-explicit-any */
import { Button } from 'antd-mobile';
import React, { useState, FC } from 'react';
import SignatureCanvas from 'react-signature-canvas';
import styles from './index.moudle.less';
import { noop } from 'lodash';
type SignPageType = {
  onClick?: (v: string) => void;
  type?: string;
};
import styled from 'styled-components';
const Btn = styled(Button)`
  a:hover {
    color: #fff !important;
  }
`;
const SignDataPage: FC<SignPageType> = ({ onClick = noop, type }) => {
  const [signTip, setSignTip] = useState('手写签名');
  let sigCanvas: any;
  const clearSign = () => {
    sigCanvas.clear();
  };
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const dataURItoBlob = (base64Data: string) => {
    let byteString;
    if (base64Data.split(',')[0].indexOf('base64') >= 0)
      byteString = atob(base64Data.split(',')[1]);
    else byteString = unescape(base64Data.split(',')[1]);
    const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
    const ia = new Uint8Array(byteString.length);
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], { type: mimeString });
  };
  const handleSign = async () => {
    const base64Data = await sigCanvas.toDataURL('image/png');
    onClick(base64Data);
    if (type) {
      console.log(type);
    }
  };
  return (
    <>
      <div className={styles.signContainer}>
        <div className={styles.signContent}>
          <SignatureCanvas
            penColor="#000"
            maxWidth={3}
            minWidth={1}
            canvasProps={{
              width: 350,
              height: 520,

              className: styles.canvasContainer,
            }}
            ref={(ref) => {
              sigCanvas = ref;
            }}
            onBegin={() => setSignTip('')}
          />
          {signTip && <div className={styles.signTip}>{signTip}</div>}
        </div>
        <div className={styles.buttonContainer}>
          <Btn onClick={clearSign} className={styles.clearBtn}>
            删除
          </Btn>
          <Button
            onClick={handleSign}
            className={styles.signBtn}
            type="primary"
          >
            签字确认
          </Button>
          {/* <Button
          loading={loading}
          className={styles.backBtn}
          onClick={backClick}
        >
          返回
        </Button> */}
        </div>
        {/* {signImg && <img alt="" width={200} height={100} src={signImg} />} */}
      </div>
    </>
  );
};

export default SignDataPage;

index.moudle.less

.signContainer {
  background: #fff;
  padding: 22px 16px 15px 16px;
  height: 100vh;
  box-sizing: border-box;

  & .signContent {
    position: relative;
    width: 100%;
    & .signTip {
      color: #ccc;
      font-size: 30px;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  & .canvasContainer {
    display: flex;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #000;
    margin: 0 auto;
  }

  & .buttonContainer {
    position: static;
      bottom: 0;
    display: flex;
    flex-direction: row;
    & .clearBtn {
      margin-top: 1rem;
      width: 7rem;
      font-size: .9rem;
      color: #C21B17;
      border-radius: 5px;
      border-radius: 5px;
      background: none;
      border: 1px solid #ccc;
      margin-left: 2rem;
      margin-right: 2rem;
      &::before {
        border: none;
      }
    }    & .signBtn {
      margin-top: 1rem;
      width: 7rem;
      margin-left: 2rem;
      margin-right: 2rem;
      font-size: .9rem;
      background: linear-gradient(135deg, #C21B17 0%, #C21B17 100%);
      border-radius: 5px;
      color: #fff;
      border: none;
      &::before {
        border: none;
      }
    }
  }
}