import React, { useState } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Input, Upload, message } from 'antd';
import { useRequest } from 'umi';
import { GetCompanyInfo, GetCosRequestURL, updateCompany } from './service';
import styles from './BaseView.less';
import axios from 'axios';

const AvatarView = ({ avatar, url, uploadProp }) => (
  <>
    <div className={styles.avatar_title}>logo</div>
    <div className={styles.avatar}>
      <img src={url} alt="avatar" />
    </div>
    <Upload {...uploadProp}>
      <div className={styles.button_view}>
        <Button>
          <UploadOutlined />
          更换企业logo
        </Button>
      </div>
    </Upload>
  </>
);

const EnterpriseLog = (props) => {
  // const { data: CompanyInfo, loading } = useRequest(() => {
  //   return GetCompanyInfo();
  // });
  const [url, setUrl] = useState();
  const [cosInfo, SetCosInfo] = useState({
    domain: '',
    fileUrl: '',
    param: '',
    allUrl: '',
    seeUrl: '',
  });

  const uploadProps = {
    name: 'file',
    showUploadList: false,
    multiple: false,
    accept: '.png, .jpg, .jpeg, .gif',
    // 这里需要指定文件上传的content-type
    headers: {
      'Content-Type': 'application/octet-stream',
    },
    customRequest({
      action,
      file,
      headers,
      onError,
      onProgress,
      onSuccess,
      withCredentials,
    }) {

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

      let fileData = null;
      GetCosRequestURL({ directory: "logo", 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') {
              // setUrl(r.seeUrl);
              const company = JSON.parse(JSON.stringify(props.fetchCompanyInfo));
              company.logo = r.seeUrl;
              // console.log('LOGO变更', company.logo)
              props.onUpdateCompanyInfo(company);
              // CompanyInfo.logo = r.seeUrl;
              // updateCompany(CompanyInfo);
            }
            // onSuccess(response, file);
          })
            .catch(onError);
        };
      });
      return {
        abort() {
          console.log('upload progress is aborted.');
        },
      };
    },
    //defaultFileList: props.location.query.values ? props.location.query.values : null

  };
  return (
    <div className={styles.baseView}>
      <div className={styles.right}>
        <AvatarView
          url={props.fetchCompanyInfo.logo ? props.fetchCompanyInfo.logo : 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'}
          uploadProp={uploadProps}
        />
      </div>
    </div>
  );
};

export default EnterpriseLog;
