/*
 * @Author: your name
 * @Date: 2021-12-17 10:42:24
 * @Description:
 * @FilePath: \zl-business\src\components\Unit\button\index.tsx
 */

import React, { useMemo, useRef } from 'react';
import { Upload } from 'antd';

import '../g.scss';

function LabelUploadLinkButton(props: LabelUploadLinkButton) {
  const {
    value,
    imgUrl,
    title='label',
    defaultButtonText,
    change,
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;
  const isShow = useRef(null);

  const enter = (e: any) => {
    isShow.current.style.display = 'block';
  };
  const leave = (e: any) => {
    isShow.current.style.display = 'none';
  };

  const Dom = useMemo(() => {
    return (
      <div className="zl-large-screen-label-upload" style={wrapStyle}>
        <span className="zl-large-screen-label-upload-title">{title}</span>
        <Upload
         listType='picture'
          showUploadList={false}
          beforeUpload={(file, fileList) => {
            change?.([file, fileList], 'beforeUpload');
          }}
          // onChange={(file, fileList, event) => {
          //   change?.([file, fileList, event], 'change');
          // }}
        >
          <div
            className="zl-large-screen-label-upload-show-img"
            onMouseEnter={enter}
            onMouseLeave={leave}
          >
            {imgUrl ? <img src={imgUrl} /> : <></>}
            <div
              className="zl-large-screen-label-upload-show-mask-layer"
              ref={isShow}
            >
              <span className="zl-large-screen-label-mask-layer-span-wrap">
                <span
                  className="zl-large-screen-label-mask-layer-updata"
                  onClick={(e) => {
                    // e.stopPropagation();
                    change?.(null, '更改');
                  }}
                >
                  更改
                </span>
                <span
                  className="zl-large-screen-label-mask-layer-del"
                  onClick={(e) => {
                    e.stopPropagation();
                    change?.(null, '删除');
                  }}
                >
                  删除
                </span>
              </span>
            </div>
          </div>
        </Upload>
        <span className="zl-large-screen-label-upload-button">
          {defaultButtonText}
        </span>
      </div>
    );
  }, [value, title, imgUrl, defaultButtonText]);

  return Dom;
}

export default LabelUploadLinkButton;

export interface LabelUploadLinkButton {
  value?: string;
  imgUrl?: string;
  title?: string;
  defaultButtonText?: string;
  change?: Function;
  wrapStyle?: React.CSSProperties;
}