import React from 'react';
import { Modal, Form, Input, Button, Select,Upload} from 'antd';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { GetCosRequestURL } from '../services';
import axios from 'axios';


const CreateForm = (props) => {
  props.form.setFieldsValue(props.values);
  const { Option, OptGroup } = Select;
  const uploadProp = {
    name: 'file',
    showUploadList: false,
    multiple: false,
    accept: '.xlsx, .xls',
    // 这里需要指定文件上传的content-type
    headers: {
      'Content-Type': 'application/octet-stream',
    },
    customRequest({
      action,
      file,
      headers,
      onError,
      onProgress,
      onSuccess,
      withCredentials,
    }) {

      console.log("上传图片", file);
      //覆盖action 上传之前获取上传地址
      var index = file.name.lastIndexOf(".");
      var ext = file.name.substr(index + 1);

      let fileData = null;
      GetCosRequestURL({ directory: "goods", fileExtension: ext, method: "PUT" }).then((r) => {
        action = r.allUrl;
        const reader = new FileReader();
        reader.readAsArrayBuffer(file);
        reader.onload = (e) => {
          //console.log("fdasa","fdsafdsfdsafd");
          // 在文件读取结束后执行的操作
          fileData = e.target.result;
          // 使用 axios 进行文件上传的请求
          axios.put(action, fileData, {
            withCredentials,
            headers,
            onUploadProgress: ({ total, loaded }) => {
              // 进行上传进度输出，更加直观
              onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file);
            },
          }).then(response => {
            console.log('onSuccess', response, file);
            if (response.status == 200 || response.statusText == 'OK') {
              props.form.setFieldsValue({ templatePath: r.seeUrl });
            }
            // onSuccess(response, file);
          })
            .catch(onError);
        };
      });
      return {
        abort() {
          console.log('upload progress is aborted.');
        },
      };
    },
    //defaultFileList: props.location.query.values ? props.location.query.values : null

  };

  return (
    <Modal
      title={props.values.id ? '编辑' : '新建'}
      width={640}
      visible={props.createModalVisible}
      bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null}
      onCancel={() => {
        props.onCancel();
      }}
      maskClosable={false}
      destroyOnClose
    >
      <Form
        layout="vertical"
        preserve={false}
        form={props.form}
        //initialValues={props.values}
        onFinish={props.onFinish} >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item label={"所属产品"} name="productId"  rules={[{ required: true,max:50}]} >
        <Select>
            {props.dicData.map((item, index) => {
              return (
                <Select.Option index={index} value={item.id} key={item.id}>
                  {item.label}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item label={"版本号"} name="vesion"  rules={[{ required: true,max:50}]} >
          <Input />
        </Form.Item>
        
        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
