import _Upload from "@alifd/next/es/upload";
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["style", "action"];
import * as React from 'react';
import { useState } from 'react';
import axios from 'axios';
var defaultValue = [{
  name: "IMG.png",
  state: "done",
  size: 1024,
  downloadURL: "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
  fileURL: "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
  imgURL: "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg"
}];
import "./index.scss";
var UploadPickerName = function UploadPickerName(_ref) {
  var _ref$style = _ref.style,
    style = _ref$style === void 0 ? {} : _ref$style,
    action = _ref.action,
    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _style = style || {};
  var _otherProps = otherProps || {};
  _otherProps.style = _style;
  // console.log(otherProps, 9999999);
  var _useState = useState([]),
    value = _useState[0],
    setData = _useState[1];
  var _useState2 = useState([]),
    array = _useState2[0],
    setArray = _useState2[1];
  // ajax封装
  //封装⼀个ajax请求
  function ajax(options) {
    //创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    //初始化参数的内容
    options = options || {};
    options.type = (options.type || 'GET').toUpperCase();
    options.dataType = options.dataType || 'json';
    var params = options.data;
    //发送请求
    if (options.type === 'GET') {
      xhr.open('GET', options.url + '?' + params, true);
      xhr.send(null);
    } else if (options.type === 'POST') {
      xhr.open('POST', options.url, true);
      xhr.send(params);
      //接收请求
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          var status = xhr.status;
          if (status >= 200 && status < 300) {
            options.success && options.success(xhr.responseText, xhr.responseXML);
          } else {
            options.fail && options.fail(status);
          }
        }
      };
    }
  }
  function updataimg(e) {
    axios.get('/dbapi/sysfile/upload').then(function (res) {
      console.log(res);
    });
    console.log(e, 9999999);
    var arr = [].concat(array);
    if (arr.length === 0) {
      arr.push.apply(arr, e);
    } else {
      var ifpd = true;
      for (var index = 0; index < arr.length; index++) {
        var element = arr[index];
        if (element.name == e[0].name) {
          ifpd = false;
        }
      }
      if (ifpd) {
        arr.push.apply(arr, e);
      }
    }
    setData(e);
    setArray(arr);
  }
  function beforeUpload(file, options) {
    console.log(file, 'file');
    // getBase64(file)
    // console.log(fileToBase64(file));
    // let files
    // let reader = new FileReader();
    // reader.readAsDataURL(file);
    // reader.onload = function (e) {
    //     console.log(e.target.result, '转化');

    //     files = e.target.result
    //     setData([

    //         {
    //             name: "IMG.png",
    //             state: "done",
    //             size: 1024,
    //             downloadURL:
    //                 "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
    //             fileURL:
    //                 "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
    //             imgURL:
    //                 fileToBase64(files)
    //         }

    //     ])
    // }
    // fileFlag(file)
  }

  function scsj() {
    ajax({
      type: 'post',
      dataType: 'json',
      data: {},
      url: action,
      success: function success(text, xml) {
        //请求成功后的回调函数
        console.log(text);
      },
      fail: function fail(status) {
        // 请求失败后的回调函数
        console.log(status);
      }
    });
  }
  function del(item) {
    var arr = array.concat();
    for (var index = 0; index < arr.length; index++) {
      var element = arr[index];
      if (element.name === item.name) {
        arr.splice(index, 1);
      }
    }
    setArray(arr);
  }
  var dataSource = [];
  var render = function render(value, index, record) {
    return /*#__PURE__*/React.createElement("a", {
      href: "javascript:;"
    }, "Remove(", record.id, ")");
  };
  return (
    /*#__PURE__*/
    // 文件批量上传
    //   文件上传
    React.createElement("div", {
      className: "divmaxfile"
    }, /*#__PURE__*/React.createElement("div", {
      className: "top"
    }, "  ", /*#__PURE__*/React.createElement("div", null, " \u4E0A\u4F20\u7EC4\u4EF6"), " ", /*#__PURE__*/React.createElement("div", null, "  ", /*#__PURE__*/React.createElement(_Icon, {
      type: "close",
      className: "iconfont",
      size: "xxs"
    }), " ")), /*#__PURE__*/React.createElement(_Upload.Dragger, {
      listType: "text"
      // autoUpload={false}
      ,
      beforeUpload: beforeUpload,
      onChange: updataimg,
      action: "/dbapi/sysfile/upload",
      accept: "image/png, image/jpg, image/jpeg, image/gif, image/bmp"
      // value={value}
      ,
      value: []
      // {...otherProps}
    }, /*#__PURE__*/React.createElement("div", null, "   ", /*#__PURE__*/React.createElement(_Button, {
      className: "filesty"
    }, "\u4E0A\u4F20\u6587\u4EF6"), " ", /*#__PURE__*/React.createElement("span", {
      className: "text"
    }, "\u652F\u6301\u6279\u91CF\u4E0A\u4F20\uFF0C\u4E0A\u4F20\u683C\u5F0F\u4E3Atxt\u6587\u4EF6"))), /*#__PURE__*/React.createElement("table", {
      "class": "pure-table pure-table-bordered"
    }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
      style: {
        width: '174px',
        textAlign: 'center'
      }
    }, "\u6587\u4EF6\u540D"), /*#__PURE__*/React.createElement("th", {
      style: {
        width: '80px',
        textAlign: 'center'
      }
    }, "\u5927\u5C0F"), /*#__PURE__*/React.createElement("th", {
      style: {
        width: '162px',
        textAlign: 'center'
      }
    }, "\u72B6\u6001"), /*#__PURE__*/React.createElement("th", {
      style: {
        width: '80px',
        textAlign: 'center'
      }
    }, "\u64CD\u4F5C"))), /*#__PURE__*/React.createElement("tbody", null, array.length !== 0 ? array.map(function (item, index) {
      return /*#__PURE__*/React.createElement("tr", {
        key: index
      }, /*#__PURE__*/React.createElement("td", {
        style: {
          display: 'flex',
          justifyContent: 'center'
        }
      }, /*#__PURE__*/React.createElement("div", {
        className: "single",
        title: item.name
      }, item.name)), /*#__PURE__*/React.createElement("td", {
        style: {
          textAlign: 'center'
        }
      }, (item.size / 1024).toFixed(0), "KB"), /*#__PURE__*/React.createElement("td", {
        style: {
          textAlign: 'center'
        }
      }, "Accord"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
        style: {
          display: 'flex',
          justifyContent: 'center',
          width: '100%'
        }
      }, /*#__PURE__*/React.createElement(_Button, {
        type: "primary",
        text: true,
        onClick: function onClick() {
          return del(item);
        }
      }, "\u5220\u9664"))));
    }) : /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
      colspan: "4",
      style: {
        textAlign: 'center'
      }
    }, "\u70B9\u51FB\u4E0A\u65B9\u201D\u9009\u62E9\u6587\u4EF6\"\u6216\u5C06\u6587\u4EF6\u62D6\u62FD\u5230\u6B64\u533A\u57DF")))), /*#__PURE__*/React.createElement("div", {
      style: {
        textAlign: 'right'
      }
    }, /*#__PURE__*/React.createElement(_Button, {
      className: "filesty",
      onClick: scsj
    }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(_Button, {
      className: "filesty",
      type: "primary",
      onClick: scsj,
      disabled: array.length !== 0 ? false : true
    }, "\u5F00\u59CB\u4E0A\u4F20")))

    //    拖拽上传
    // <div className='divmax'>
    //     <Upload.Dragger
    //         listType="image"
    //         action="https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload"
    //         accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"

    //     >

    //         <Button  type="primary" text className='primarybtn'>
    //             点击上传 
    //         </Button> <span>/</span><span className='primarybtn1'>拖拽到此区域</span>
    //         </Upload.Dragger >

    //         <div className='tipsty1'>请上传txt文件，大小在60M以内</div>

    // </div>

    //   文件上传
    //     <div className='divmax'>
    //         <Upload
    //  {...otherProps}
    //             action="https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload"
    //             multiple
    //             defaultValue={[
    //                 {
    //                     name: "IMG.png",
    //                     state: "done",
    //                     size: 1024,
    //                     downloadURL:
    //                         "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
    //                     fileURL:
    //                         "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
    //                     imgURL:
    //                         "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg"
    //                 }
    //             ]}

    //         >
    //             <Button className='filesty'>
    //                 <Icon type="upload"></Icon> 文件上传
    //             </Button>
    //         </Upload>

    //   <div className='tipsty'>请上传txt文件，大小在60M以内</div>

    //     </div>
    // 图片上传
    // <Upload
    //     action="https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload"
    //     multiple
    //     shape="card"

    //     defaultValue={[
    //         {
    //             name: "IMG.png",
    //             state: "done",
    //             size: 1024,
    //             downloadURL:
    //                 "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
    //             fileURL:
    //                 "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
    //             imgURL:
    //                 "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg"
    //         }
    //     ]}

    // >
    //     点击上传图片

    // </Upload>
  );
};

UploadPickerName.displayName = 'UploadPickerName';
export default UploadPickerName;