import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import * as React from 'react';
import "./index.scss";
import { event } from '@alilc/lowcode-engine';
var SelectImgSetterSrc = /*#__PURE__*/function (_React$PureComponent) {
  _inheritsLoose(SelectImgSetterSrc, _React$PureComponent);
  function SelectImgSetterSrc() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.state = {
      isFocus: false,
      chooseImg: ''
    };
    _this.bindEvent = function () {
      // do someting
      // console.log('1234', eventName);
    };
    return _this;
  }
  var _proto = SelectImgSetterSrc.prototype;
  _proto.componentDidMount = function componentDidMount() {
    // 这里由于面板上会有多个setter，这里我用field.id来标记setter名
    this.changeChildProp = 'aaaaaaaa' + "-" + this.props.SelectCopy;
    event.on(this.changeChildProp + ".bindEvent", this.bindEvent);
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    // setter是以实例为单位的，每个setter注销的时候需要把事件也注销掉，避免事件池过多
    event.off(this.changeChildProp + ".bindEvent", this.bindEvent);
  };
  _proto.render = function render() {
    var _this2 = this;
    var _this$props = this.props,
      value = _this$props.value,
      options = _this$props.options,
      onChange = _this$props.onChange;
    var setFocusStatus = function setFocusStatus(status) {
      return _this2.setState({
        isFocus: status
      });
    };
    var imgFun = function imgFun(item) {
      onChange(item);
      _this2.setState({
        chooseImg: item.src1
      });
    };
    // 默认图片
    var activeStyle = {
      boxShadow: '0 0 1px 0.25px #5583ff inset',
      backgroundColor: '#edf3fc'
    };
    var focusFn = function focusFn(val) {
      return val ? setFocusStatus(val) : setTimeout(function () {
        return setFocusStatus(val);
      }, 300);
    };
    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.chooseImg ? this.state.chooseImg : options[0].src1) + "?imageMogr2/interlace/1)"
      }
    }, /*#__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' : '')
    }, options.map(function (res, idx) {
      return /*#__PURE__*/React.createElement("div", {
        className: "img-box select-img-list-item",
        key: idx + res,
        onClick: function onClick() {
          return imgFun(res);
        },
        style: styleFn({
          backgroundImage: "url(" + res.src1 + "?imageMogr2/interlace/1)"
        }, value === res.src1)
      });
    })));
  };
  return SelectImgSetterSrc;
}(React.PureComponent);
SelectImgSetterSrc.displayName = 'SelectImgSetterSrc';
export { SelectImgSetterSrc as default };