import React, { useRef, useState, useEffect } from 'react';
import { List, Switch, Button, Toast, Icon } from 'antd-mobile';
import styles from './styles.less';
import { uploadOnestopFile } from '@/H5Public/baseComponents/UploadFile/api';
import systemConfig from '@/config/config';
const Brief = List.Item.Brief;

export default function DiyUploadOneStopFile(props) {
  const { config, formValue = {}, giveRequiredName, changeValue,  } = props;
  const { readOnly, accept = "*", extInfo } = config;
  const [files, setFiles] = useState([]);
  const inputRef = useRef(null);

  useEffect(() => {
    if(formValue[config.key] && Array.isArray(formValue[config.key])){
      setFiles(formValue[config.key]);
    }
  }, [readOnly, formValue]);

  const uploadImage = () => {
    Toast.loading('文件上传中', 1);
    const domF = inputRef.current.files;
    if (!domF.length) {
      return false;
    }
    const file = domF[domF.length - 1];
    uploadOnestopFile(file).then((res) => {
      if (res) {
        console.log(res);
      }
      Toast.hide();
      if (res && typeof res === 'string') {
        Toast.success('上传成功!', 1);
        setFiles([
          ...files,
          {
            name: file.name,
            fileExt: file.name.split('.').pop(),
            path: res,
          },
        ]);
      }
    });
  };

  useEffect(() => {
    changeValue(files, config.key);
  }, [files]);

  const deleteItem = (data) => {
    setFiles((files) => {
      return files.filter((item) => {
        return item.path !== data.path;
      });
    });
  };

  return (
    <List.Item
      multipleLine={true}
      key={config.key}
      className={styles.diyStyle}
    >
      {giveRequiredName(config)}

      <Brief>
        {
          !readOnly && <>
          {extInfo || '支持格式：xls、xlsx、wps、rar、zip、doc、docx、pdf、png、jpg、jpeg'}
            <div className={styles.uploadButton}>
              <input type="file"
                // accept={'*'}
                     accept={accept}
                     id={config.key}
                     ref={inputRef}
                     // capture={'camera'} // 写了这个就只有拍照. 没有选择的功能
                     style={{
                       opacity: 0,
                       width: '100vw',
                       height: '50px',
                       position: 'absolute',
                       zIndex: 2,
                     }}
                     onChange={uploadImage}
              />
              <Button type={'primary'}>上传文件</Button>
            </div>
          </>
        }
        <div className={styles.fileList}>
          {
            files.map((g) => {
              return <div key={g.path} className={styles.fileItem}>
                {/* TODO 加个弹窗的预览功能 */}
                <a href={systemConfig.sqlFormsServer + g.path} target={'_blank'}>{g.name}</a> {!readOnly && <Icon type={'cross-circle'} onClick={deleteItem.bind(this, g)} /> }
              </div>;
            })
          }
        </div>
      </Brief>

    </List.Item>
  );
}
