"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"), _typeof = require("@babel/runtime/helpers/typeof");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")), _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")), _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")), _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized")), _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits")), _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn")), _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf")), _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")), _react = _interopRequireWildcard(require("react")), _propTypes = _interopRequireDefault(require("prop-types")), _amosFramework = require("amos-framework"), _amosAntd = require("amos-antd"), _urlConsts = require("../../../../consts/urlConsts"), _amosIcon = _interopRequireDefault(require("amos-icon")), _topoService = require("./../../../../services/topoService");

function _getRequireWildcardCache(e) {
  if ("function" != typeof WeakMap) return null;
  var t = new WeakMap, a = new WeakMap;
  return (_getRequireWildcardCache = function(e) {
    return e ? a : t;
  })(e);
}

function _interopRequireWildcard(e, t) {
  if (!t && e && e.__esModule) return e;
  if (null === e || "object" !== _typeof(e) && "function" != typeof e) return {
    default: e
  };
  var a = _getRequireWildcardCache(t);
  if (a && a.has(e)) return a.get(e);
  var r = {}, n = Object.defineProperty && Object.getOwnPropertyDescriptor;
  for (var i in e) if ("default" !== i && Object.prototype.hasOwnProperty.call(e, i)) {
    var l = n ? Object.getOwnPropertyDescriptor(e, i) : null;
    l && (l.get || l.set) ? Object.defineProperty(r, i, l) : r[i] = e[i];
  }
  return r.default = e, a && a.set(e, r), r;
}

function _createSuper(e) {
  var t = _isNativeReflectConstruct();
  return function() {
    var a, r = (0, _getPrototypeOf2.default)(e);
    if (t) {
      var n = (0, _getPrototypeOf2.default)(this).constructor;
      a = Reflect.construct(r, arguments, n);
    } else a = r.apply(this, arguments);
    return (0, _possibleConstructorReturn2.default)(this, a);
  };
}

function _isNativeReflectConstruct() {
  if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
  if (Reflect.construct.sham) return !1;
  if ("function" == typeof Proxy) return !0;
  try {
    return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {}))), 
    !0;
  } catch (e) {
    return !1;
  }
}

var Panel = _amosFramework.Collapse.Panel, HEXSIZE = 1024, imgStyle = {
  width: "76px",
  height: "76px"
}, ButtonGroup = _amosAntd.Button.Group, Option = _amosAntd.Select.Option, layoutAttr = [ {
  title: "拉伸",
  value: 1
}, {
  title: "平铺",
  value: 2
} ], TopoConfigDefaultPanel = function(e) {
  (0, _inherits2.default)(a, e);
  var t = _createSuper(a);
  function a(e) {
    var r;
    (0, _classCallCheck2.default)(this, a), r = t.call(this, e), (0, _defineProperty2.default)((0, 
    _assertThisInitialized2.default)(r), "onChangeCollapseSize", (function(e) {
      void 0 !== e && void 0 !== e.length && r.setState({
        collapseKey: e
      });
    })), (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(r), "onSelectChange", (function(e, t) {
      var a = r.props, n = a.chooseBackground, i = a.subviewInfo, l = r.state.percent;
      l = 1 - l / 100, i.imgOpacity = l, i.imgName = t, (0, _topoService.editSubviewAction)(i).then((function(e) {
        n({
          imgName: t,
          percent: l
        });
      }));
    })), (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(r), "onLayoutChange", (function(e) {
      var t = r.props, a = t.chooseBackground, n = t.subviewInfo;
      n.imgLayout = e, (0, _topoService.editSubviewAction)(n).then((function(t) {
        r.setState({
          imgLayout: e
        }), a({
          layout: e
        });
      }));
    })), (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(r), "getCollapseHead", (function(e, t) {
      var a = r.props.getImgPath(t, r.state.collapseKey), n = [];
      return n.push(_react.default.createElement("div", {
        className: "config-collapse-head"
      }, _react.default.createElement("label", {
        className: "config-collapse-text"
      }, e), a)), n;
    })), (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(r), "getDefaultImg", (function() {
      for (var e = [], t = function(t) {
        var a = "".concat(_urlConsts.OltSerUrl.fetchDeviceImg, "/graph/default_").concat(t, ".png");
        e.push(_react.default.createElement("div", {
          key: t,
          className: "default-img-panel",
          onClick: function(e) {
            return r.onSelectChange(e, "default_".concat(t, ".png"));
          }
        }, _react.default.createElement("img", {
          src: a,
          alt: ""
        })));
      }, a = 1; a < 7; a++) t(a);
      return e;
    })), (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(r), "getBase64", (function(e, t) {
      var a = new FileReader;
      a.addEventListener("load", (function() {
        return t(a.result);
      })), a.readAsDataURL(e);
    })), (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(r), "updateSubviewName", (function(e, t) {
      var a = r.props, n = a.updateSubviewName, i = a.subviewInfo;
      i.name = t, i.flag = "2", (0, _topoService.editSubviewAction)(i).then((function(e) {
        _amosFramework.message.success("操作成功"), n(t);
      }));
    })), (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(r), "handleChange", (function(e) {
      r.setState({
        file: e.file
      }), "uploading" !== e.file.status ? "done" === e.file.status && (r.getBase64(e.file.originFileObj, (function(e) {
        return r.setState({
          imageUrl: e,
          loading: !1
        });
      })), r.imgFile = e.file.originFileObj, r.saveSubGraphImgAction()) : r.setState({
        loading: !0
      });
    })), (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(r), "beforeUpload", (function(e) {
      var t = /image\/(gif|jpeg|png|jpg|bmp)$/.test(e.type);
      t || _amosFramework.message.danger("请选择符合格式的图片！（gif|jpeg|png|jpg|bmp）");
      var a = e.size / HEXSIZE < 500;
      return a || _amosFramework.message.danger("图片最大为 500Kb!"), t && a;
    })), (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(r), "saveSubGraphImgAction", (function() {
      var e = new FileReader;
      e.addEventListener("load", (function() {
        return r.upLoadImgToSave(e.result);
      }));
      var t = r.imgFile;
      if ("{}" === JSON.stringify(t)) {
        r.saveSubGraphImg({
          binaryImg: null,
          imgName: "default.png"
        });
      } else void 0 !== t ? e.readAsBinaryString(r.imgFile) : _amosFramework.message.danger("请选择要替换的背景图片！");
    })), (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(r), "upLoadImgToSave", (function(e) {
      var t = {
        binaryImg: e,
        imgName: "".concat(r.imgFile.uid, "-").concat(r.imgFile.name)
      };
      r.saveSubGraphImg(t);
    })), (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(r), "saveSubGraphImg", (function(e) {
      var t = r.props, a = t.subviewInfo, n = t.updateBkImg;
      (0, _extends2.default)(e, {
        id: a.id
      }), (0, _topoService.editSubviewImgAction)(e).then((function(t) {
        _amosFramework.message.success("操作成功"), n(e.imgName), r.handCancel();
      }));
    })), (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(r), "handCancel", (function() {
      r.setState({
        loading: !1,
        file: void 0,
        imageUrl: void 0
      }), r.imgFile = void 0;
    })), (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(r), "increase", (function() {
      var e = r.state.percent + 10;
      e > 100 && (e = 100);
      var t = r.props.chooseBackground, a = 1 - e / 100, n = r.props.subviewInfo;
      n.imgOpacity = a, (0, _topoService.editSubviewAction)(n).then((function(n) {
        t({
          percent: a
        }), r.setState({
          percent: e
        });
      }));
    })), (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(r), "decline", (function() {
      var e = r.state.percent - 10;
      e < 0 && (e = 0);
      var t = r.props.chooseBackground, a = 1 - e / 100, n = r.props.subviewInfo;
      n.imgOpacity = a, (0, _topoService.editSubviewAction)(n).then((function(n) {
        t({
          percent: a
        }), r.setState({
          percent: e
        });
      }));
    }));
    var n = e.subviewInfo.imgOpacity, i = e.subviewInfo.imgLayout;
    return r.state = {
      collapseKey: [ "1", "2" ],
      loading: !1,
      file: void 0,
      imageUrl: void 0,
      percent: n ? 100 - 100 * n : 0,
      imgLayout: i || 1
    }, r;
  }
  return (0, _createClass2.default)(a, [ {
    key: "componentWillMount",
    value: function() {}
  }, {
    key: "componentDidMount",
    value: function() {}
  }, {
    key: "componentWillReceiveProps",
    value: function(e) {}
  }, {
    key: "componentWillUnmount",
    value: function() {}
  }, {
    key: "render",
    value: function() {
      var e = this, t = this.state, a = t.collapseKey, r = t.percent, n = t.imgLayout, i = this.props.subviewInfo, l = i.imgName, o = _react.default.createElement("div", {
        className: "upload-icon-panel"
      }, this.state.loading ? _react.default.createElement(_amosIcon.default, {
        type: "loading"
      }) : null !== l && l.includes(".") ? _react.default.createElement("img", {
        src: "".concat(_urlConsts.OltSerUrl.fetchDeviceImg, "/graph/").concat(l),
        alt: "",
        style: imgStyle
      }) : _react.default.createElement("img", {
        src: require("./../../../../assets/iot/topo/background/upload.png"),
        alt: "",
        style: {
          paddingTop: "0px"
        }
      })), u = this.state.imageUrl, c = _urlConsts.OltSerUrl.addDevice;
      return _react.default.createElement("div", {
        className: "topo-config-default-content-root"
      }, _react.default.createElement(_amosFramework.Collapse, {
        activeKey: a,
        onChange: function(t) {
          return e.onChangeCollapseSize(t);
        }
      }, _react.default.createElement(Panel, {
        showArrow: !1,
        header: this.getCollapseHead("视图信息", "1"),
        key: "1"
      }, _react.default.createElement("div", {
        className: "default-base-info"
      }, _react.default.createElement("div", {
        className: "subview-name"
      }, _react.default.createElement("div", {
        className: "subview-name-title"
      }, "视图名称："), _react.default.createElement("div", {
        className: "subview-name-value",
        title: i.name
      }, _react.default.createElement(_amosFramework.Editable, {
        value: i.name,
        onChange: function(t) {
          return e.updateSubviewName("name", t);
        },
        showOkCancel: !1,
        style: {
          width: "150px",
          marginLeft: "10px"
        },
        innerValueStyle: {
          width: "150px"
        },
        placeholder: "请输入"
      }))), _react.default.createElement("div", {
        className: "subview-num"
      }, _react.default.createElement("div", {
        className: "subview-num-title"
      }, "设备数量："), _react.default.createElement("div", {
        className: "subview-num-value",
        title: i.num
      }, i.num)), _react.default.createElement("div", {
        className: "subview-descr"
      }, _react.default.createElement("div", {
        className: "subview-descr-title"
      }, "说明："), _react.default.createElement("div", {
        className: "subview-descr-value",
        title: ""
      }, "")))), _react.default.createElement(Panel, {
        showArrow: !1,
        header: this.getCollapseHead("画布背景", "2"),
        key: "2"
      }, _react.default.createElement("div", {
        className: "default-background-info"
      }, _react.default.createElement("div", {
        className: "background-color"
      }, _react.default.createElement("div", {
        className: "background-color-title"
      }, "背景颜色："), _react.default.createElement("div", {
        className: "background-color-value"
      }, _react.default.createElement(_amosFramework.ColorPicker, {
        direction: "left",
        align: "left",
        onColorChange: function(t) {
          return e.onSelectChange(t, t.hex);
        }
      }))), _react.default.createElement("div", {
        className: "background-img"
      }, _react.default.createElement("div", {
        className: "background-img-title"
      }, "默认背景："), _react.default.createElement("div", {
        className: "background-img-value"
      }, this.getDefaultImg())), _react.default.createElement("div", {
        className: "background-user-img"
      }, _react.default.createElement("div", {
        className: "background-user-img-title"
      }, _react.default.createElement("div", null, "自定义背景："), _react.default.createElement("div", {
        className: "background-user-img-tip"
      }, "*图片小于500kb")), _react.default.createElement("div", {
        className: "background-user-img-value"
      }, _react.default.createElement(_amosAntd.Upload, {
        name: "avatar",
        listType: "picture-card",
        showUploadList: !1,
        action: c,
        beforeUpload: this.beforeUpload,
        onChange: this.handleChange
      }, u ? _react.default.createElement("img", {
        src: u,
        alt: "",
        style: imgStyle
      }) : o))), _react.default.createElement("div", {
        className: "background-transparency"
      }, _react.default.createElement("div", {
        className: "background-transparency-title"
      }, "透明度："), _react.default.createElement("div", {
        className: "background-transparency-value"
      }, _react.default.createElement(_amosAntd.Progress, {
        percent: r
      }), _react.default.createElement(ButtonGroup, null, _react.default.createElement(_amosAntd.Button, {
        onClick: this.decline,
        icon: "minus"
      }), _react.default.createElement(_amosAntd.Button, {
        onClick: this.increase,
        icon: "plus"
      })))), _react.default.createElement("div", {
        className: "background-layout"
      }, _react.default.createElement("div", {
        className: "background-layout-title"
      }, "背景排布："), _react.default.createElement("div", {
        className: "background-layout-value"
      }, _react.default.createElement(_amosAntd.Select, {
        value: n,
        style: {
          width: 91
        },
        placeholder: "请选择",
        onSelect: function(t) {
          return e.onLayoutChange(t);
        }
      }, layoutAttr.map((function(e) {
        return _react.default.createElement(Option, {
          key: e.value,
          value: e.value
        }, e.title);
      })))))))));
    }
  } ]), a;
}(_react.Component);

TopoConfigDefaultPanel.displayName = "TopoConfigDefaultPanel", TopoConfigDefaultPanel.propTypes = {
  getImgPath: _propTypes.default.func,
  subviewInfo: _propTypes.default.object,
  updateSubviewName: _propTypes.default.func,
  updateBkImg: _propTypes.default.func,
  chooseBackground: _propTypes.default.func
};

var _default = TopoConfigDefaultPanel;

exports.default = _default;