"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _tslib = require("tslib");

var _consoleComponents = require("@alicloud/console-components");

var _classnames = _interopRequireDefault(require("classnames"));

var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));

var _react = _interopRequireDefault(require("react"));

var _balloon = _interopRequireDefault(require("../balloon"));

var _switch = _interopRequireDefault(require("../switch"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

var BalloonIcon = _balloon["default"].Icon;

var Item =
/** @class */
function (_super) {
  (0, _tslib.__extends)(Item, _super);

  function Item(props) {
    var _this = _super.call(this, props) || this;

    _this.togglePassword = function () {
      _this.setState({
        password: !_this.state.password
      });
    };

    _this.copy = function (copyable, value) {
      if (copyable) {
        (0, _copyToClipboard["default"])(value);

        _consoleComponents.Message.show({
          type: 'success',
          content: _this.props.locale && _this.props.locale.copySuccess,
          duration: '2000',
          align: 'tc tc',
          offset: [0, 62]
        });
      }
    };

    _this.finishEdit = function (name) {
      _this.setState({
        editState: 'loading'
      });

      _this.props.finishEditFunc && _this.props.finishEditFunc(name, _this.state.editContent).then(function (data) {
        _this.setState({
          editContent: data,
          editor: false,
          editState: undefined
        });
      }, function (error) {
        _consoleComponents.Message.error(error.name);

        _this.setState({
          editContent: _this.props.value,
          editor: false,
          editState: undefined
        });
      })["catch"](function (error) {
        _consoleComponents.Message.error(error.name);

        _this.setState({
          editContent: _this.props.value,
          editor: false,
          editState: undefined
        });
      });
    };

    _this.switchChange = function (value, name) {
      _this.setState({
        switchState: true
      });

      _this.props.onChange && _this.props.onChange(name, value).then(function (bool) {
        _this.setState({
          switchValue: bool,
          switchState: false
        });
      }, function (mess) {
        _consoleComponents.Message.error(mess);

        _this.setState({
          switchValue: _this.props.switchDefault,
          switchState: false
        });
      })["catch"](function (error) {
        _consoleComponents.Message.error('抱歉发生错误：' + error.name);

        _this.setState({
          switchValue: _this.props.switchDefault,
          switchState: false
        });
      });
    };

    _this.getDisplayValue = function (value, password, maxLine, overBalloonProps) {
      var valueContent = typeof value === "string" || typeof value === "number" || typeof value === "boolean" ? /*#__PURE__*/_react["default"].createElement(_balloon["default"], (0, _tslib.__assign)({
        triggerWidth: '100%',
        maxLine: maxLine,
        overShowBalloon: true,
        trigger: value + ""
      }, overBalloonProps), value + "") : value;
      return password ? _this.state.password ? valueContent : '******' : valueContent;
    };

    _this.renderTips = function (tips) {
      if (typeof tips == 'string') {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "attribute-tips"
        }, /*#__PURE__*/_react["default"].createElement(BalloonIcon, {
          iconColor: 'rgb(193, 193, 193)',
          iconSize: "xs"
        }, /*#__PURE__*/_react["default"].createElement("span", null, tips)));
      } else if (_typeof(tips) == 'object') {
        var _a = tips.context,
            context = _a === void 0 ? '' : _a,
            rest = (0, _tslib.__rest)(tips, ["context"]);
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "attribute-tips"
        }, /*#__PURE__*/_react["default"].createElement(BalloonIcon, (0, _tslib.__assign)({
          iconColor: 'rgb(193, 193, 193)',
          iconSize: "xs"
        }, rest), /*#__PURE__*/_react["default"].createElement("span", null, context)));
      } else {
        return null;
      }
    };

    _this.state = {
      password: false,
      editor: false,
      editState: undefined,
      switchState: false,
      editContent: _this.props.editable ? _this.props.value : undefined,
      switchValue: _this.props.switchDefault !== undefined ? _this.props.switchDefault : undefined
    };
    return _this;
  }

  Item.prototype.render = function () {
    var _this = this;

    var _a = this.props,
        name = _a.name,
        needTitleColon = _a.needTitleColon,
        titleMinWidth = _a.titleMinWidth,
        value = _a.value,
        showAll = _a.showAll,
        switchDefault = _a.switchDefault,
        tips = _a.tips,
        password = _a.password,
        copyable = _a.copyable,
        editable = _a.editable,
        colsPerRow = _a.colsPerRow,
        _onClick = _a.onClick,
        locale = _a.locale,
        custom = _a.custom,
        buttons = _a.buttons,
        _b = _a.maxLine,
        maxLine = _b === void 0 ? 1 : _b,
        overBalloonProps = _a.overBalloonProps;
    var isPassWord = password;

    if (value === "" || value === undefined) {
      isPassWord = undefined;
    }

    var className = (0, _classnames["default"])('lp-info-content-attribute', 'col' + (colsPerRow || 2), {
      colMinWidth: !colsPerRow
    });
    var displayValue = this.getDisplayValue(this.state.editContent ? this.state.editContent : value, isPassWord, maxLine, overBalloonProps);
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: className
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "attribute-name",
      style: {
        width: titleMinWidth
      }
    }, name, needTitleColon && ':'), this.state.editContent || displayValue ? /*#__PURE__*/_react["default"].createElement("span", {
      className: showAll ? 'attribute-all-value' : 'attribute-value'
    }, this.state.editor ? /*#__PURE__*/_react["default"].createElement(_consoleComponents.Input, {
      size: "small",
      state: this.state.editState,
      value: this.state.editContent,
      onChange: function onChange(v) {
        _this.setState({
          editContent: v
        });
      }
    }) : displayValue) : null, tips && this.renderTips(tips), copyable && /*#__PURE__*/_react["default"].createElement("div", {
      className: "attribute-copy",
      onClick: function onClick() {
        _this.copy(copyable, value);
      }
    }, locale && locale.copy), isPassWord && /*#__PURE__*/_react["default"].createElement("div", {
      className: "attribute-toggle",
      onClick: this.togglePassword
    }, this.state.password ? locale && locale.hide : locale && locale.show), editable && /*#__PURE__*/_react["default"].createElement("div", {
      className: "attribute-toggle",
      style: {
        marginRight: 0
      },
      onClick: function onClick() {
        !_this.state.editor ? _this.setState({
          editor: true
        }) : _this.finishEdit(name);
      }
    }, this.state.editor ? locale && locale.finish : locale && locale.edit), switchDefault != undefined ? /*#__PURE__*/_react["default"].createElement("div", {
      className: "customArea"
    }, /*#__PURE__*/_react["default"].createElement(_switch["default"], {
      checked: this.state.switchValue,
      style: {
        marginTop: 2
      },
      loading: this.state.switchState,
      onChange: function onChange(v) {
        _this.switchChange(v, name);
      },
      size: "small"
    })) : null, custom ? custom.type.displayName === "iotCollapse" ? /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        width: "100%"
      },
      className: "customArea"
    }, custom) : /*#__PURE__*/_react["default"].createElement("div", {
      className: "customArea"
    }, custom) : null, buttons && buttons.map(function (item, index) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        key: 'itemButton' + index,
        className: "attribute-toggle",
        onClick: function onClick() {
          if (item.onClick) {
            item.onClick(name, value, item.value);
          } else {
            _onClick && _onClick(name, value, item.value);
          }
        }
      }, item.value || '-');
    }));
  };

  return Item;
}(_react["default"].Component);

Item.defaultProps = {
  password: false,
  copyable: false,
  editable: false,
  custom: null,
  showAll: false,
  locale: {
    copySuccess: '复制成功',
    hide: '隐藏',
    show: '显示',
    copy: '复制',
    edit: '编辑',
    finish: '完成'
  },
  needTitleColon: false,
  titleMinWidth: 'auto'
};
var _default = Item;
exports["default"] = _default;