import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import * as React from 'react';
import "./index.scss";
// import { getcomPanyImglist } from '../../api/base'
// import { event } from '@alilc/lowcode-engine';
// import { Loading } from '@alifd/next';
import QRCode from 'qrcode.react';
import global from "../../utils/global";
var QrCodeSelectImgSetter = /*#__PURE__*/function (_React$PureComponent) {
  _inheritsLoose(QrCodeSelectImgSetter, _React$PureComponent);
  function QrCodeSelectImgSetter(props) {
    var _this;
    _this = _React$PureComponent.call(this, props) || this;
    _this.state = {
      isFocus: false,
      initImgValue: "",
      qrCodeValueArray: []
    };
    return _this;
  }
  var _proto = QrCodeSelectImgSetter.prototype;
  _proto.componentDidMount = function componentDidMount() {
    var _this$props$value, _this$props$value2;
    var qr = (_this$props$value = this.props.value) !== null && _this$props$value !== void 0 && _this$props$value.value ? (_this$props$value2 = this.props.value) === null || _this$props$value2 === void 0 ? void 0 : _this$props$value2.value : global.liveCode.qrCode.code;
    global.liveCode.qrCode.code = qr;
    var dataArray = [{
      id: 'canvas1',
      value: qr,
      size: 220,
      src: "",
      fgColor: '#000000' // 黑色
    }, {
      id: 'canvas2',
      value: qr,
      size: 220,
      src: "",
      fgColor: '#d2414f' // 玫瑰红
    }, {
      id: 'canvas3',
      value: qr,
      size: 220,
      src: "",
      fgColor: '#f78220' // 橘色
    }, {
      id: 'canvas4',
      value: qr,
      size: 220,
      src: "",
      fgColor: '#0092d8' // 蓝色
    }];

    this.setState({
      qrCodeValueArray: dataArray
    });
  }
  // bindEvent = (eventName) => {
  //     // do someting
  //     console.log("发送123")
  // }

  // componentWillUnmount() {
  //     // setter是以实例为单位的，每个setter注销的时候需要把事件也注销掉，避免事件池过多
  //     event.off(`${this.emitEventName}.bindEvent`, this.bindEvent)
  // }
  //   selectimg = async  ()=> {
  //   // const data = {
  //   //   a: 3,
  //   //   b: this.props.id
  //   // }
  //   // let temArray = [] as any
  //   // const itemArray = [] as any
  //   // let baseUrl = ""  
  //   // this.state.imgOptions.length = 0
  //   //   temArray = await getcomPanyImglist(data);
  //   //   baseUrl = temArray.data.param0
  //   //   temArray.data.rows.map(item => {
  //   //     itemArray.push({
  //   //     src: `${baseUrl}/${item.b}/${item.c}`
  //   //   })
  //   //     return itemArray
  //   //   })
  //   //   this.state.initImgValue = itemArray[1].src;
  //   //   this.setState({
  //   //     imgOptions: itemArray
  //   //   })
  //     // this.setState({
  //     //   imgOptions: [{
  //     //     src: '//img.maimairen.com/low-code/components/qr-logo/qr.png'
  //     //   }, {
  //     //     src:'//img.maimairen.com/low-code/components/qr-logo/1.png'
  //     //     }, {
  //     //     src: '//img.maimairen.com/low-code/components/qr-logo/4.png'
  //     //   }]
  //     // })
  // }
  ;
  _proto.render = function render() {
    var _this2 = this,
      _this$state$qrCodeVal;
    var onChange = this.props.onChange;
    var selectimg = /*#__PURE__*/function () {
      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        var arr2;
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _context.next = 2;
                return setValue();
              case 2:
                arr2 = _context.sent;
                _this2.setState({
                  qrCodeValueArray: arr2
                  // visable: false
                });
              case 4:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));
      return function selectimg() {
        return _ref.apply(this, arguments);
      };
    }();
    var setValue = /*#__PURE__*/function () {
      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
        var array, qr, i, image, canvas;
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                array = [];
                array = _this2.state.qrCodeValueArray;
                qr = global.liveCode.qrCode.code;
                for (i = 0; i < 4; i++) {
                  image = new Image();
                  canvas = document.getElementById("canvas" + (i + 1)); // debugger;
                  image.src = canvas.toDataURL('image/png');
                  array[i].src = image.src;
                  array[i].value = qr;
                }
                return _context2.abrupt("return", array);
              case 5:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2);
      }));
      return function setValue() {
        return _ref2.apply(this, arguments);
      };
    }();
    var setFocusStatus = function setFocusStatus(status) {
      return _this2.setState({
        isFocus: status
      });
    };
    // console.log(typeof this.state.imgOptions)
    // console.log("this.state.imgOptions", this.state.imgOptions)
    var activeStyle = {
      boxShadow: '0 0 1px 0.25px #5583ff inset',
      backgroundColor: '#edf3fc'
    };
    var canvasToUrl = function canvasToUrl(item, index) {
      onChange(item);
      var image = new Image();
      var canvas = document.getElementById("canvas" + index);
      image.src = canvas.toDataURL('image/png');
      _this2.setState({
        initImgValue: image.src
      });
    };
    var focusFn = function focusFn(val) {
      val ? setFocusStatus(val) : setTimeout(function () {
        return setFocusStatus(val);
      }, 300);
      if (val === true) {
        selectimg();
      }
    };
    // const showDilog = () => {
    //     Message.error("图片还在加载，请稍等");
    // }
    var styleFn = function styleFn(style, active) {
      return active ? Object.assign(activeStyle, style) : style;
    };
    return /*#__PURE__*/React.createElement("div", {
      className: "select-img-setter"
    }, /*#__PURE__*/React.createElement("div", {
      className: "img-box select-img-show",
      style: {
        backgroundImage: "url(" + this.state.initImgValue + ")"
      }
    }, /*#__PURE__*/React.createElement("input", {
      type: "text",
      onFocus: function onFocus() {
        return focusFn(true);
      },
      onBlur: function onBlur() {
        return focusFn(false);
      },
      className: "select-img-focus"
    })), /*#__PURE__*/React.createElement("div", {
      className: "select-img-list " + (this.state.isFocus ? 'select-img-list-show' : '')
    }, (_this$state$qrCodeVal = this.state.qrCodeValueArray[0]) !== null && _this$state$qrCodeVal !== void 0 && _this$state$qrCodeVal.value ? this.state.qrCodeValueArray.map(function (item, index) {
      return /*#__PURE__*/React.createElement("div", {
        className: "img-box select-img-list-item",
        key: index + item,
        onClick: function onClick() {
          return canvasToUrl(item, index + 1);
        },
        style: styleFn({
          backgroundImage: "url(" + item.src + ")"
        })
      });
    }) : /*#__PURE__*/React.createElement("div", {
      className: "img-box select-img-list-item"
    }, "\u56FE\u7247\u8FD8\u5728\u52A0\u8F7D\u4E2D\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5")), /*#__PURE__*/React.createElement("div", {
      className: "select-qr-setter"
    }, this.state.qrCodeValueArray.map(function (item, index) {
      return /*#__PURE__*/React.createElement(QRCode, {
        key: index,
        id: item === null || item === void 0 ? void 0 : item.id,
        value: item === null || item === void 0 ? void 0 : item.value // value参数为生成二维码的链接 我这里是由后端返回
        ,
        size: item === null || item === void 0 ? void 0 : item.size // 二维码的宽高尺寸
        ,
        fgColor: item === null || item === void 0 ? void 0 : item.fgColor // 二维码的颜色
      });
    })));
  };
  return QrCodeSelectImgSetter;
}(React.PureComponent);
QrCodeSelectImgSetter.displayName = 'QrCodeSelectImgSetter';
export { QrCodeSelectImgSetter as default };