"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireWildcard(require("react"));
var _coreLibVueBeta = require("@cverse/core-lib-vue-beta");
require("./index.less");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
// ImageUpload.tsx

var ImageUpload = function ImageUpload(_ref) {
  var onUpload = _ref.onUpload,
    value = _ref.value;
  var _useState = (0, _react.useState)(value || null),
    image = _useState[0],
    setImage = _useState[1]; // Use value prop
  var _useState2 = (0, _react.useState)(false),
    loading = _useState2[0],
    setLoading = _useState2[1];
  var imageUploadQuery = new _coreLibVueBeta.ImageUploadQuery({
    appId: '617'
  });
  var inputRef = (0, _react.useRef)(null);
  var imgIcon = 'https://s3.ap-east-1.amazonaws.com/res.chaosverse.io/test/230725/c3eac31eb3034411bbcf7f3d9379a834.svg';
  var delectIcon = 'https://s3.ap-east-1.amazonaws.com/res.chaosverse.io/test/230725/8cfc4b66b7324ea68c0ae127b83d84b4.png';
  var handleImageChange = function handleImageChange(event) {
    var _event$target$files;
    setLoading(true); // 开始加载
    var file = (_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files[0];
    if (file) {
      var reader = new FileReader();
      reader.onloadend = /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
        var result;
        return _regenerator["default"].wrap(function _callee$(_context) {
          while (1) switch (_context.prev = _context.next) {
            case 0:
              _context.next = 2;
              return imageUploadQuery.uploadImage(file);
            case 2:
              result = _context.sent;
              setImage(result);
              onUpload(result); // 将上传的图片传递给父组件
              setLoading(false); // 开始加载
            case 6:
            case "end":
              return _context.stop();
          }
        }, _callee);
      }));
      reader.readAsDataURL(file);
    }
  };
  _react["default"].useEffect(function () {
    setImage(value || null);
  }, [value]);
  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("input", {
    type: "file",
    accept: "image/*",
    onChange: handleImageChange,
    style: {
      display: 'none'
    },
    ref: inputRef
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "upload-image",
    onClick: function onClick() {
      var _inputRef$current;
      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
    }
  }, loading ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
    type: "loading"
  }) : image ? /*#__PURE__*/_react["default"].createElement("img", {
    src: image,
    alt: "Uploaded",
    style: {
      width: '56px',
      height: '56px',
      objectFit: 'cover'
    }
  }) : /*#__PURE__*/_react["default"].createElement("img", {
    src: imgIcon,
    style: {
      width: '20px',
      height: '20px'
    }
  }), image && /*#__PURE__*/_react["default"].createElement("img", {
    src: delectIcon,
    className: "delectIcon",
    onClick: function onClick(e) {
      e.stopPropagation();
      setImage(null);
    }
  })));
};
var _default = exports["default"] = ImageUpload;