import React, { useState, useEffect } from 'react';
import { Upload, Button, Image } from 'antd';
import AliyunOssUploader from '@/components/OssUpload/AliyunOssUploader';
import { queryOSSData } from '@/services/boom';

function DDPhotoField(props) {
  const { disabled, onChange } = props;
  const [value, setValue] = useState([]);
  const [ossData, setOssData] = useState();

  const OnModelFileDone = file => {
    var path = ossData.host + '/' + file.url;
    let newValue = [...value, path];
    setValue(newValue);
    onChange(JSON.stringify(newValue));
  };
  const OnUploading = file => {};

  useEffect(() => {
    queryOSSData().then(res => {
      setOssData(res.data);
    });
  }, []);

  return ossData ? (
    <div>
      <div>
        {value.map(img => (
          <Image height={200} src={img} />
        ))}
      </div>
      <AliyunOssUploader
        OSSData={ossData}
        onDone={OnModelFileDone}
        onUploading={OnUploading}
        noStyle={false}
        showUploadList={false}
        directory={false}
        accept={'.png, .jpg, .jpeg'}
        label="上传图片"
      ></AliyunOssUploader>
    </div>
  ) : null;
}

export default DDPhotoField;
