"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _utils = require("@vtx/utils");
var _vmSubTitle = _interopRequireDefault(require("../../../vm-sub-title"));
var zrender = _interopRequireWildcard(require("zrender/lib/all"));
var _Content = _interopRequireDefault(require("./Content"));
var _api = require("../../api");
require("./index.less");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
var SBZJ = function SBZJ(_ref) {
  var _ref$classPrefix = _ref.classPrefix,
    classPrefix = _ref$classPrefix === void 0 ? '' : _ref$classPrefix,
    _ref$id = _ref.id,
    id = _ref$id === void 0 ? '' : _ref$id;
  var _a;
  var prefix = "".concat(classPrefix, "-sbzj");
  var myRef = (0, _react.useRef)(null);
  var _useState = (0, _react.useState)(200),
    _useState2 = _slicedToArray(_useState, 2),
    height = _useState2[0],
    setHeight = _useState2[1];
  // const [width, setWidth] = useState(800);
  var runStatusTopology = _api.deviceService.throwPointDeviceStatusTopology({
    throwPointId: id,
    tenantId: (0, _utils.getUrlParam)('tenantId')
  });
  var Topology = /*#__PURE__*/(0, _react.forwardRef)(function (_props, ref) {
    var _a;
    if ((_a = runStatusTopology === null || runStatusTopology === void 0 ? void 0 : runStatusTopology.nodes) === null || _a === void 0 ? void 0 : _a.length) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "-canvas")
      }, /*#__PURE__*/_react["default"].createElement("div", {
        id: "zrender",
        style: {
          height: "".concat(height, "px"),
          width: "100%"
        },
        ref: ref,
        className: "".concat(prefix, "-device")
      }));
    } else {
      return /*#__PURE__*/_react["default"].createElement("div", {
        ref: ref,
        className: "".concat(prefix, "-disconnect")
      }, /*#__PURE__*/_react["default"].createElement("img", {
        src: require('../../imgs/disconnect.png'),
        style: {
          width: '400px',
          height: '212px'
        }
      }), /*#__PURE__*/_react["default"].createElement("div", null, "\u4E3B\u673A\u8FDE\u63A5\u5DF2\u65AD\u5F00\uFF0C\u73B0\u573A\u60C5\u51B5\u672A\u77E5"));
    }
  });
  var line = function line(_ref2) {
    var _ref3 = _slicedToArray(_ref2, 5),
      _ref3$ = _ref3[0],
      x1 = _ref3$ === void 0 ? 0 : _ref3$,
      _ref3$2 = _ref3[1],
      y1 = _ref3$2 === void 0 ? 0 : _ref3$2,
      _ref3$3 = _ref3[2],
      x2 = _ref3$3 === void 0 ? 0 : _ref3$3,
      _ref3$4 = _ref3[3],
      y2 = _ref3$4 === void 0 ? 0 : _ref3$4,
      _ref3$5 = _ref3[4],
      color = _ref3$5 === void 0 ? '#52c41a' : _ref3$5;
    var textX = Math.abs((x2 - x1) / 2) + Math.min(x2, x1);
    var textY = Math.abs((y2 - y1) / 2) + Math.min(y2, y1);
    var t = new zrender.Image({
      style: {
        image: require('../../imgs/error.png'),
        width: 16,
        height: 16,
        x: textX - 8,
        y: textY - 8
      }
    });
    var line = new zrender.Line({
      shape: {
        x1: x1,
        y1: y1,
        x2: x1,
        y2: y1
      },
      style: {
        opacity: 0,
        stroke: '#fff',
        lineDash: 'dashed',
        lineWidth: 2
      }
    });
    var triangle = new zrender.Polygon({
      shape: {
        points: [[x1, y2], [x1, y2], [x1, y2]]
      },
      style: {
        fill: '#fff',
        opacity: 0
      }
    });
    triangle.animateTo(
    // 为箭头添加动画
    {
      shape: {
        points: [[x1 - 8, y2], [x1 + 8, y2], [x1, y2 + 14]]
      },
      style: {
        fill: color,
        opacity: 1
      }
    });
    line.animateTo(
    // 为线段添加动画
    {
      shape: {
        x1: x1,
        y1: y1,
        x2: x2,
        y2: y2
      },
      style: {
        stroke: color,
        opacity: 1
      }
    });
    return [line, triangle, t];
  };
  var group = function group(_ref4) {
    var _ref5 = _slicedToArray(_ref4, 5),
      _ref5$ = _ref5[0],
      x = _ref5$ === void 0 ? 0 : _ref5$,
      _ref5$2 = _ref5[1],
      y = _ref5$2 === void 0 ? 0 : _ref5$2,
      _ref5$3 = _ref5[2],
      url = _ref5$3 === void 0 ? '' : _ref5$3,
      _ref5$4 = _ref5[3],
      text = _ref5$4 === void 0 ? '' : _ref5$4,
      _ref5$5 = _ref5[4],
      type = _ref5$5 === void 0 ? 'asc' : _ref5$5;
    // 文字排列顺序
    var g = new zrender.Group();
    g.x = x;
    g.y = y;
    var length = text.length;
    var a = length > 9 && length < 16 ? "".concat(text.substring(0, 9), "\n").concat(text.substring(9, length)) : length > 15 ? "".concat(text.substring(0, 9), "\n").concat(text.substring(9, 16), "\n").concat(text.substring(16, length)) : text;
    var t = new zrender.Text({
      style: {
        text: a,
        fill: '#fff',
        fontSize: 12,
        y: type === 'asc' ? 105 : 0
      }
    });
    var img = new zrender.Image({
      style: {
        image: url,
        width: 100,
        height: 100,
        y: type === 'asc' ? 0 : 30
      }
    });
    t.animateTo({
      style: {
        fontSize: 18,
        textShadowColor: '#fff',
        textShadowBlur: 1
      }
    });
    g.add(img);
    g.add(t);
    return g;
  };
  var imgType = function imgType() {
    var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
      nodeType: '',
      deviceType: ''
    };
    if (item.nodeType === 'DEVICE') {
      switch (item.deviceType) {
        case 'SHUTTER_DOOR':
          return require('../../imgs/window.png');
        case 'AI_BOX':
          return require('../../imgs/getwayBox.png');
        case 'LIGHT':
          return require('../../imgs/lamp.png');
        case 'ANDROID_SCREEN':
          return require('../../imgs/screen.png');
        case 'CAMERA':
          return require('../../imgs/camera.png');
        case 'DDP':
          return require('../../imgs/screen.png');
        default:
          break;
      }
    } else {
      switch (item.nodeType) {
        case 'CAMERA':
          return require('../../imgs/camera.png');
        case 'GATEWAY':
          return require('../../imgs/getway.png');
        case 'MAIN_GATEWAY_AI_BOX':
          return require('../../imgs/getwayBox.png');
        case 'ANDROID_SCREEN':
          return require('../../imgs/screen.png');
        default:
          break;
      }
    }
  };
  var _drawTopology = function drawTopology() {
    var startX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
    var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
    var arr = arguments.length > 2 ? arguments[2] : undefined;
    var zr = arguments.length > 3 ? arguments[3] : undefined;
    var count = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
    var w = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
    arr === null || arr === void 0 ? void 0 : arr.map(function (v, i) {
      var _a, _b;
      var averageX = arr.length % 2 ? arr.length - 1 || 1 : arr.length;
      var color = v.status === 'online' ? '#52c41a' : '#ff4d4f';
      var x = (w - 100) / averageX; // 算出x轴的平均坐标 ( width - 两边图片一半的宽度)
      var beforeNodesLength = 0;
      var lineI = i;
      for (var j = 0; j < i; j++) {
        beforeNodesLength += ((_a = arr[j]) === null || _a === void 0 ? void 0 : _a.nodes.length) || 1;
      }
      if (v.level < 2) {
        //需要算出底层子节点的个数
        lineI = i && (beforeNodesLength || i);
      } else {
        //下一层直接用父级传过来的参数沿用即可
        lineI = count ? count + i : i;
      }
      var lineX = x * lineI + 50; // +50是是因为图片宽度为100 线段要指在图片中间
      zr.add(line([startX, y, lineX, y, color])[0]); // 添加每个元素x轴的线段
      var yLine = line([lineX, y, lineX, y + 30, color]); // +30 y轴线段的长度
      zr.add(yLine[0]); // 添加每个元素y轴的线段
      zr.add(yLine[1]); // 添加每个元素y轴的箭头
      if (v.status !== 'online') {
        zr.add(yLine[2]);
      }
      zr.add(group([x * lineI, y + 50, imgType(v), "".concat(v.nodeType === 'DEVICE' ? "".concat(v.deviceTypeDesc) : '').concat(v.name)])); //  + 50： 稍微与线段箭头隔开一点
      if ((_b = v.nodes) === null || _b === void 0 ? void 0 : _b.length) {
        var c = v.nodes.some(function (e) {
          return e.status === 'online';
        }) ? '#52c41a' : '#ff4d4f';
        zr.add(line([lineX, y + 180, lineX, y + 210, c])[0]); //  为每个有子节点的画上y轴坐标  +180 ：50为起始的y坐标 再+图片和文字的高度130
        _drawTopology(lineX, y + 210, v.nodes, zr, beforeNodesLength, w);
      }
    });
  };
  var getMaxlevel = function getMaxlevel(treeData) {
    var maxLevel = 1;
    var count = {}; //记录每个层级及下一层总共的个数
    var _loop = function loop(data, level) {
      if (!count["maxCount".concat(level)]) {
        count["maxCount".concat(level)] = 0;
      }
      data.forEach(function (item) {
        count["maxCount".concat(level)] += item.nodes.length || 1;
        item.level = level;
        if (level > maxLevel) {
          maxLevel = level;
        }
        if ('nodes' in item) {
          if (item.nodes.length > 0) {
            _loop(item.nodes, level + 1);
          }
        }
      });
    };
    _loop(treeData, 1);
    return Promise.resolve({
      maxLevel: maxLevel,
      count: count
    });
  };
  (0, _react.useEffect)(function () {
    var _a;
    if ((_a = runStatusTopology === null || runStatusTopology === void 0 ? void 0 : runStatusTopology.nodes) === null || _a === void 0 ? void 0 : _a.length) {
      getMaxlevel(runStatusTopology === null || runStatusTopology === void 0 ? void 0 : runStatusTopology.nodes).then(function (res) {
        var maxCount = 0;
        for (var i in res.count) {
          maxCount = Math.max(res.count[i], maxCount);
        }
        var w = 800;
        setHeight(200 + res.maxLevel * 200);
        if (maxCount > 4) {
          w = maxCount * 150 < 1270 ? 1270 : maxCount * 150;
          // setWidth(maxCount * 150 < 1270 ? 1270 : maxCount * 150);
        }
        var zr = zrender.init(myRef.current);
        zr.add(group([w / 2 - 50, 2, require('../../imgs/throwPoint.png'), runStatusTopology.name, 'desc']));
        var color = (runStatusTopology === null || runStatusTopology === void 0 ? void 0 : runStatusTopology.nodes.some(function (e) {
          return e.status === 'online';
        })) ? '#52c41a' : '#ff4d4f';
        zr.add(line([w / 2, 110, w / 2, 140, color])[0]);
        _drawTopology(w / 2, 140, runStatusTopology === null || runStatusTopology === void 0 ? void 0 : runStatusTopology.nodes, zr, 0, w);
      });
    }
  }, [JSON.stringify(runStatusTopology === null || runStatusTopology === void 0 ? void 0 : runStatusTopology.nodes)]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: prefix
  }, /*#__PURE__*/_react["default"].createElement(_vmSubTitle["default"], {
    title: "\u8BBE\u5907\u603B\u89C8"
  }), /*#__PURE__*/_react["default"].createElement(Topology, {
    ref: myRef
  }), ((_a = runStatusTopology === null || runStatusTopology === void 0 ? void 0 : runStatusTopology.nodes) === null || _a === void 0 ? void 0 : _a.length) ? (/*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefix, "-content")
  }, /*#__PURE__*/_react["default"].createElement(_vmSubTitle["default"], {
    title: "\u8BBE\u5907\u4FE1\u606F"
  }), /*#__PURE__*/_react["default"].createElement(_Content["default"], {
    rows: runStatusTopology.nodes,
    classPrefix: prefix
  }))) : null);
};
var _default = exports["default"] = SBZJ;
//# sourceMappingURL=index.js.map
