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';

const Brief = List.Item.Brief;

export default function DiyUploadOneStopFile(props) {
  const { config, formValue = [], giveRequiredName, changeValue } = props;
  const [files, setFiles] = useState([]);
  const inputRef = useRef(null);
  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>
        支持格式：xls、xlsx、wps、rar、zip、doc、docx、pdf、png、jpg、jpeg
        <div className={styles.uploadButton}>
          <input type="file"
            // accept={'*'}
                 id={config.key}
                 ref={inputRef}
                 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}>
                <a>{g.name}</a><Icon type={'cross-circle'} onClick={deleteItem.bind(this, g)} />
              </div>;
            })
          }
        </div>
      </Brief>

    </List.Item>
  );
}
