import React, { useState, useEffect } from 'react';
import styles from './index.less';


import { Upload, Modal,Row,Col,Input,List,Card, Button,message } from 'antd';
import { PlusOutlined,PictureFilled } from '@ant-design/icons';


function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

const uploadButton = (
  <div>
    <PlusOutlined />
    <div className="ant-upload-text">Upload</div>
  </div>
);
import { getUrlPicName } from '../../utils/string';
const PictureOptionsRow = (props: any) => {

  const {value, onChange} = props;
  const [fileList, setFileList] = useState([])
  const [previewVisible, setPreviewVisible] = useState(false)
  const [previewImage, setPreviewImage] = useState('')
  const [limitNum,setLimitNum]=useState(5)
  const handleCancel = () => setPreviewVisible(false);

  useEffect(() => {
    if (value!=null) {
      var tmp = value   
      var result = new Array()
      var resultToInside = new Array()   
      if (tmp.length > 0 && typeof (tmp[0]) != "string") {//输入输出
        tmp.map((item: any, index: any) => {
          if (item.name == null) {
            item.name = getUrlPicName(item.url)
            item.uid = index
          }
          result.push(item)
          resultToInside.push(item.name)
        })
        setFileList(result)
        console.log("图片集最初组件");
        console.log(resultToInside);
        onChange(resultToInside)
      }
    }
  }, [value])

  useEffect(() => {
    if (props.disabled) {
      if (props.defaultValue != null) {
        var tmp = props.defaultValue
        var result = new Array()
        var resultToInside = new Array()
        console.log("组件");
        console.log(tmp);
      
        tmp.map((item: any, index: any) => {
          if (item.name == null) {
            item.name = getUrlPicName(item.url)
            item.uid = index
          }
          result.push(item)
          resultToInside.push(item.name)
        })
        setFileList(result)
      }
    }
  }, [props.defaultValue])
  
  // useEffect(() => {
  //   if (props.disabled) {
  //     if (value != null) {
  //       var tmp = value
  //       var result = new Array()
  //       var resultToInside = new Array()
  //       console.log("图片集使用表单组件");
  //       console.log(tmp)
  //       if (tmp.url != null) {
  //         tmp.map((item: any, index: any) => {
  //           if (item.name == null) {
  //             item.name = getUrlPicName(item.url)
  //             item.uid = index
  //           }
  //           result.push(item)
  //           resultToInside.push(item.name)
  //         })
  //         setFileList(result)
  //       }
  //     }
  //   }
  // }, [value])

  const handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    setPreviewImage(file.url || file.preview)
    setPreviewVisible(true)
  }

  const handleChange = ({ file, fileList }) => {
    console.log(fileList);
    let tmp = fileList    
    setFileList(tmp.filter(file => !!file.status||file.status==null))
    var result=new Array()
    fileList.map((item, index) => {
      result.push(item.name)
    })
    console.log("该过程图片发生改变");
    
    onChange(result)
  }
  const beforeUpload=( file:any) => {
    if (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg') {
      return true
    } else {
      message.error(`${file.name} is not a png/jpeg/jpg file`);
      return false
    }
  }

  return (
    <div>
      <Upload
         accept=".png,.jpg,.jpeg"         
          action={props.action != null ? props.action : "/tos/image/upload"}
          listType="picture-card"
          data={props.data}
          fileList={fileList}
          onPreview={handlePreview}
        onChange={handleChange}
        disabled={props.disabled} 
        beforeUpload={beforeUpload}
        >
          {fileList.length >= limitNum ? null : (props.disabled?null:uploadButton)}
        </Upload>
        <Modal
        visible={previewVisible}
          onOk={handleCancel}
          onCancel={handleCancel}
        >
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>

    </div>
  );
};

export default PictureOptionsRow;




