'use strict';

var React = require('react');
var Draggable = require('react-draggable');
require('antd/es/drawer/style/css');
var _Drawer = require('antd/es/drawer');
require('antd/es/list/style/css');
var _List = require('antd/es/list');
require('antd/es/table/style/css');
var _Table = require('antd/es/table');
require('antd/es/select/style/css');
var _Select = require('antd/es/select');
var _objectSpread$1 = require('@babel/runtime/helpers/objectSpread2');
require('antd/es/collapse/style/css');
var _Collapse = require('antd/es/collapse');
require('antd/es/input/style/css');
var _Input = require('antd/es/input');
var dayjs = require('dayjs');
var _slicedToArray = require('@babel/runtime/helpers/esm/slicedToArray');
var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
var _objectSpread = require('@babel/runtime/helpers/esm/objectSpread2');
var _typeof = require('@babel/runtime/helpers/esm/typeof');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
var _Drawer__default = /*#__PURE__*/_interopDefaultLegacy(_Drawer);
var _List__default = /*#__PURE__*/_interopDefaultLegacy(_List);
var _Table__default = /*#__PURE__*/_interopDefaultLegacy(_Table);
var _Select__default = /*#__PURE__*/_interopDefaultLegacy(_Select);
var _objectSpread__default$1 = /*#__PURE__*/_interopDefaultLegacy(_objectSpread$1);
var _Collapse__default = /*#__PURE__*/_interopDefaultLegacy(_Collapse);
var _Input__default = /*#__PURE__*/_interopDefaultLegacy(_Input);
var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);

function styleInject(css, ref) {
  if (ref === void 0) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') {
    return;
  }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = ".debug-mode-btn {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 999;\n  display: flex;\n  align-items: center;\n  justify-items: center;\n  box-sizing: border-box;\n  background-color: #fff;\n  border: 1px solid #c73838;\n  border-radius: 50% 50%;\n  cursor: pointer;\n}\n.debug-mode-btn .icon {\n  height: 24px;\n  fill: #c73838;\n}\n.debug-mode-btn:hover {\n  background-color: #c73838;\n}\n.debug-mode-btn:hover .icon {\n  fill: #fff;\n}\n.text-red {\n  color: #aa0505;\n}\n.debug-mode-content {\n  padding-top: 24px;\n}\n.debug-mode-content .ant-select,\n.debug-mode-content .ant-input-search {\n  width: 30%;\n  margin: 0 12px 12px;\n}\n";
styleInject(css_248z);

/**
 * 初始化按钮位置
 * @param placement
 * @param size
 */
var defPosFun = function defPosFun(placement, size) {
  if (localStorage.getItem('pos')) {
    return JSON.parse(localStorage.getItem('pos'));
  }

  var $body = document.body;
  var w = $body.offsetWidth;
  var h = $body.offsetHeight;

  switch (placement) {
    case 't':
      return {
        x: w / 2 + size / 2,
        y: 0
      };

    case 'tr':
      return {
        x: w * 3 / 4 + size / 2,
        y: 0
      };

    case 'rt':
      return {
        x: w - size,
        y: h * 1 / 4 + size / 2
      };

    case 'r':
      return {
        x: w - size,
        y: h / 2 + size / 2
      };

    case 'rb':
      return {
        x: w - size,
        y: h * 3 / 4 + size / 2
      };

    case 'br':
      return {
        x: w * 3 / 4 + size / 2,
        y: h - size
      };

    case 'b':
      return {
        x: w / 2 + size / 2,
        y: 0
      };

    case 'bl':
      return {
        x: w * 1 / 4 + size / 2,
        y: 0
      };

    case 'lb':
      return {
        x: 0,
        y: h * 3 / 4 + size / 2
      };

    case 'l':
      return {
        x: 0,
        y: h / 2 + size / 2
      };

    case 'lt':
      return {
        x: 0,
        y: h * 1 / 4 + size / 2
      };

    case 'tl':
      return {
        x: w * 1 / 4 + size / 2,
        y: 0
      };

    default:
      return {
        x: 0,
        y: 0
      };
  }
};
var renderInfo = function renderInfo(data) {
  var _data$value;

  return data.name + "\uFF1A" + ((data == null ? void 0 : (_data$value = data.value) == null ? void 0 : _data$value.toFixed(2)) || 0) + " ms";
};
var unixTime = function unixTime(time) {
  var t = Math.floor(time);
  return Date.now() - performance.now() + t;
};
/**
 *
 * @param value string 关键词
 * @param data APITiming[] 表格数据
 * @param filterType APITiming内的某个字段
 */

var filterSearch = function filterSearch(value, data, filterType) {
  return data.filter(function (item) {
    if (filterType && String(item[filterType]).indexOf(value) > -1) {
      return true;
    } else if (Object.values(item).filter(function (st) {
      return String(st).indexOf(value) > -1;
    }).length > 0) {
      return true;
    }

    return false;
  });
};

var DebugIcon = (function () {
  return /*#__PURE__*/React__default['default'].createElement("svg", {
    className: "icon",
    viewBox: "0 0 1024 1024",
    version: "1.1",
    xmlns: "http://www.w3.org/2000/svg",
    "p-id": "3162",
    xmlnsXlink: "http://www.w3.org/1999/xlink",
    width: "64",
    height: "64"
  }, /*#__PURE__*/React__default['default'].createElement("defs", null, /*#__PURE__*/React__default['default'].createElement("style", {
    type: "text/css"
  })), /*#__PURE__*/React__default['default'].createElement("path", {
    d: "M982.71468828 577.89269975c0 10.2028623-3.72361008 19.02884854-11.17744154 26.48268001-7.45477554 7.45477554-16.2788727 11.18310785-26.47701369 11.18310785L813.26161184 615.5584876c0 67.08259318-13.13698856 123.95760183-39.42324145 170.63446949l122.38429865 122.98207852c7.45383146 7.44344292 11.18310785 16.27415139 11.18310785 26.47701369 0 10.198141-3.72361008 19.0241263-11.18310785 26.47795776-7.06286632 7.44344292-15.88224217 11.17272023-26.4770137 11.17272024-10.59005021 0-19.41698052-3.72927639-26.47701369-11.17272024L726.76392721 846.21362803c-1.96049109 1.95482479-4.89933866 4.50742852-8.821264 7.64459226-3.9304248 3.13621875-12.1633534 8.73343898-24.71861601 16.76993955-12.54959631 8.04311187-25.30034104 15.20230267-38.24279156 21.48040647-12.94717184 6.27338157-29.03528373 11.96598221-48.25583715 17.0664693-19.22055341 5.09198761-38.24940195 7.64648042-57.07143576 7.64648041L549.65398273 389.61759043l-75.31552085 0 0 527.2039256c-19.99681739 0-39.9133633-2.65270636-59.71564265-7.95056463-19.81644421-5.29219195-36.87724718-11.76577787-51.19657379-19.41603552-14.32121475-7.65025857-27.2627212-15.29390584-38.8311279-22.94888572-11.574073-7.65120265-20.10069633-14.0209087-25.599703-19.11667355l-8.821264-8.24331621L182.49636641 960.9486131c-7.84479661 8.23292767-17.25722917 12.3541142-28.24485491 12.3541142-9.41432163 0-17.84367734-3.14188506-25.29467566-9.41526664-7.45571961-7.06192225-11.47774852-15.78969492-12.07175022-26.18331802-0.58455909-10.39456718 2.4543911-19.51236093 9.13006951-27.35998976l118.85144845-133.5617402c-22.74868138-44.72582102-34.12727134-98.46744407-34.12727134-161.23148046L78.94165603 615.55093222c-10.20475138 0-19.02601538-3.72927639-26.47701369-11.17744154-7.45571961-7.45855277-11.18499693-16.2798177-11.18499693-26.48268 0-10.198141 3.72927639-19.02884854 11.18499693-26.47606961 7.45099831-7.45005423 16.27226231-11.17366431 26.47701369-11.17366432l131.79673213 0L210.73838816 367.25704104l-101.79253455-101.79253455c-7.45194239-7.45477554-11.17933062-16.2798177-11.17933061-26.47795776 0-10.197196 3.73210955-19.02884854 11.17933061-26.47701371 7.44910923-7.45383146 16.27792862-11.18783009 26.47795777-11.18783007 10.20380638 0 19.02223815 3.73966493 26.47890185 11.18783008l101.79253454 101.79253455 496.61233669 0 101.79347862-101.79253456c7.44816516-7.45383146 16.27226231-11.18783009 26.47701369-11.18783007 10.198141 0 19.02695946 3.73966493 26.47606962 11.18783007 7.45477554 7.44816516 11.18405193 16.2798177 11.18405192 26.4770137 0 10.198141-3.72927639 19.0241263-11.18405192 26.47795777l-101.79253455 101.79253455 0 172.98686979 131.79767621 0c10.2028623 0 19.02790446 3.72361008 26.47701369 11.17933062 7.45383146 7.44722108 11.18310785 16.27792862 11.18310785 26.4704033l0 0L982.71468828 577.89269975 982.71468828 577.89269975zM700.28124814 238.98182649L323.70930833 238.98182649c0-52.16548671 18.33852142-96.59288984 55.01745334-133.27276583 36.66854338-36.679876 81.10255781-55.01273111 133.26993267-55.01273112 52.16831987 0 96.60233338 18.33285511 133.27182177 55.01273112C681.9493371 142.38799166 700.28124814 186.81633977 700.28124814 238.98182649L700.28124814 238.98182649 700.28124814 238.98182649 700.28124814 238.98182649z",
    "p-id": "3163"
  }));
});

function createCommonjsModule(fn) {
  var module = { exports: {} };
	return fn(module, module.exports), module.exports;
}

/*!
  Copyright (c) 2017 Jed Watson.
  Licensed under the MIT License (MIT), see
  http://jedwatson.github.io/classnames
*/

var _classnames_2_2_6_classnames = createCommonjsModule(function (module) {
  /* global define */
  (function () {

    var hasOwn = {}.hasOwnProperty;

    function classNames() {
      var classes = [];

      for (var i = 0; i < arguments.length; i++) {
        var arg = arguments[i];
        if (!arg) continue;
        var argType = typeof arg;

        if (argType === 'string' || argType === 'number') {
          classes.push(arg);
        } else if (Array.isArray(arg) && arg.length) {
          var inner = classNames.apply(null, arg);

          if (inner) {
            classes.push(inner);
          }
        } else if (argType === 'object') {
          for (var key in arg) {
            if (hasOwn.call(arg, key) && arg[key]) {
              classes.push(key);
            }
          }
        }
      }

      return classes.join(' ');
    }

    if ( module.exports) {
      classNames.default = classNames;
      module.exports = classNames;
    } else {
      window.classNames = classNames;
    }
  })();
});

/**
 * Take input from [0, n] and return it as [0, 1]
 * @hidden
 */
function bound01(n, max) {
  if (isOnePointZero(n)) {
    n = '100%';
  }

  var isPercent = isPercentage(n);
  n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n))); // Automatically convert percentage into number

  if (isPercent) {
    n = parseInt(String(n * max), 10) / 100;
  } // Handle floating point rounding errors


  if (Math.abs(n - max) < 0.000001) {
    return 1;
  } // Convert into [0, 1] range if it isn't already


  if (max === 360) {
    // If n is a hue given in degrees,
    // wrap around out-of-range values into [0, 360] range
    // then convert into [0, 1].
    n = (n < 0 ? n % max + max : n % max) / parseFloat(String(max));
  } else {
    // If n not a hue given in degrees
    // Convert into [0, 1] range if it isn't already.
    n = n % max / parseFloat(String(max));
  }

  return n;
}
/**
 * Force a number between 0 and 1
 * @hidden
 */

function clamp01(val) {
  return Math.min(1, Math.max(0, val));
}
/**
 * Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
 * <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
 * @hidden
 */

function isOnePointZero(n) {
  return typeof n === 'string' && n.includes('.') && parseFloat(n) === 1;
}
/**
 * Check to see if string passed in is a percentage
 * @hidden
 */

function isPercentage(n) {
  return typeof n === 'string' && n.includes('%');
}
/**
 * Return a valid alpha value [0,1] with all invalid values being set to 1
 * @hidden
 */

function boundAlpha(a) {
  a = parseFloat(a);

  if (isNaN(a) || a < 0 || a > 1) {
    a = 1;
  }

  return a;
}
/**
 * Replace a decimal with it's percentage value
 * @hidden
 */

function convertToPercentage(n) {
  if (n <= 1) {
    return Number(n) * 100 + "%";
  }

  return n;
}
/**
 * Force a hex value to have 2 characters
 * @hidden
 */

function pad2(c) {
  return c.length === 1 ? '0' + c : String(c);
}

// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>

/**
 * Handle bounds / percentage checking to conform to CSS color spec
 * <http://www.w3.org/TR/css3-color/>
 * *Assumes:* r, g, b in [0, 255] or [0, 1]
 * *Returns:* { r, g, b } in [0, 255]
 */

function rgbToRgb(r, g, b) {
  return {
    r: bound01(r, 255) * 255,
    g: bound01(g, 255) * 255,
    b: bound01(b, 255) * 255
  };
}
/**
 * Converts an RGB color value to HSL.
 * *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
 * *Returns:* { h, s, l } in [0,1]
 */

function rgbToHsl(r, g, b) {
  r = bound01(r, 255);
  g = bound01(g, 255);
  b = bound01(b, 255);
  var max = Math.max(r, g, b);
  var min = Math.min(r, g, b);
  var h = 0;
  var s = 0;
  var l = (max + min) / 2;

  if (max === min) {
    s = 0;
    h = 0; // achromatic
  } else {
    var d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;

      case g:
        h = (b - r) / d + 2;
        break;

      case b:
        h = (r - g) / d + 4;
        break;
    }

    h /= 6;
  }

  return {
    h: h,
    s: s,
    l: l
  };
}

function hue2rgb(p, q, t) {
  if (t < 0) {
    t += 1;
  }

  if (t > 1) {
    t -= 1;
  }

  if (t < 1 / 6) {
    return p + (q - p) * (6 * t);
  }

  if (t < 1 / 2) {
    return q;
  }

  if (t < 2 / 3) {
    return p + (q - p) * (2 / 3 - t) * 6;
  }

  return p;
}
/**
 * Converts an HSL color value to RGB.
 *
 * *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
 * *Returns:* { r, g, b } in the set [0, 255]
 */


function hslToRgb(h, s, l) {
  var r;
  var g;
  var b;
  h = bound01(h, 360);
  s = bound01(s, 100);
  l = bound01(l, 100);

  if (s === 0) {
    // achromatic
    g = l;
    b = l;
    r = l;
  } else {
    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    var p = 2 * l - q;
    r = hue2rgb(p, q, h + 1 / 3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1 / 3);
  }

  return {
    r: r * 255,
    g: g * 255,
    b: b * 255
  };
}
/**
 * Converts an RGB color value to HSV
 *
 * *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
 * *Returns:* { h, s, v } in [0,1]
 */

function rgbToHsv(r, g, b) {
  r = bound01(r, 255);
  g = bound01(g, 255);
  b = bound01(b, 255);
  var max = Math.max(r, g, b);
  var min = Math.min(r, g, b);
  var h = 0;
  var v = max;
  var d = max - min;
  var s = max === 0 ? 0 : d / max;

  if (max === min) {
    h = 0; // achromatic
  } else {
    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;

      case g:
        h = (b - r) / d + 2;
        break;

      case b:
        h = (r - g) / d + 4;
        break;
    }

    h /= 6;
  }

  return {
    h: h,
    s: s,
    v: v
  };
}
/**
 * Converts an HSV color value to RGB.
 *
 * *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
 * *Returns:* { r, g, b } in the set [0, 255]
 */

function hsvToRgb(h, s, v) {
  h = bound01(h, 360) * 6;
  s = bound01(s, 100);
  v = bound01(v, 100);
  var i = Math.floor(h);
  var f = h - i;
  var p = v * (1 - s);
  var q = v * (1 - f * s);
  var t = v * (1 - (1 - f) * s);
  var mod = i % 6;
  var r = [v, q, p, p, t, v][mod];
  var g = [t, v, v, q, p, p][mod];
  var b = [p, p, t, v, v, q][mod];
  return {
    r: r * 255,
    g: g * 255,
    b: b * 255
  };
}
/**
 * Converts an RGB color to hex
 *
 * Assumes r, g, and b are contained in the set [0, 255]
 * Returns a 3 or 6 character hex
 */

function rgbToHex(r, g, b, allow3Char) {
  var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))]; // Return a 3 character hex if possible

  if (allow3Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1))) {
    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
  }

  return hex.join('');
}
/**
 * Converts an RGBA color plus alpha transparency to hex
 *
 * Assumes r, g, b are contained in the set [0, 255] and
 * a in [0, 1]. Returns a 4 or 8 character rgba hex
 */
// eslint-disable-next-line max-params

function rgbaToHex(r, g, b, a, allow4Char) {
  var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16)), pad2(convertDecimalToHex(a))]; // Return a 4 character hex if possible

  if (allow4Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1)) && hex[3].startsWith(hex[3].charAt(1))) {
    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
  }

  return hex.join('');
}
/** Converts a decimal to a hex value */

function convertDecimalToHex(d) {
  return Math.round(parseFloat(d) * 255).toString(16);
}
/** Converts a hex value to a decimal */

function convertHexToDecimal(h) {
  return parseIntFromHex(h) / 255;
}
/** Parse a base-16 hex value into a base-10 integer */

function parseIntFromHex(val) {
  return parseInt(val, 16);
}
function numberInputToObject(color) {
  return {
    r: color >> 16,
    g: (color & 0xff00) >> 8,
    b: color & 0xff
  };
}

// https://github.com/bahamas10/css-color-names/blob/master/css-color-names.json

/**
 * @hidden
 */
var names = {
  aliceblue: '#f0f8ff',
  antiquewhite: '#faebd7',
  aqua: '#00ffff',
  aquamarine: '#7fffd4',
  azure: '#f0ffff',
  beige: '#f5f5dc',
  bisque: '#ffe4c4',
  black: '#000000',
  blanchedalmond: '#ffebcd',
  blue: '#0000ff',
  blueviolet: '#8a2be2',
  brown: '#a52a2a',
  burlywood: '#deb887',
  cadetblue: '#5f9ea0',
  chartreuse: '#7fff00',
  chocolate: '#d2691e',
  coral: '#ff7f50',
  cornflowerblue: '#6495ed',
  cornsilk: '#fff8dc',
  crimson: '#dc143c',
  cyan: '#00ffff',
  darkblue: '#00008b',
  darkcyan: '#008b8b',
  darkgoldenrod: '#b8860b',
  darkgray: '#a9a9a9',
  darkgreen: '#006400',
  darkgrey: '#a9a9a9',
  darkkhaki: '#bdb76b',
  darkmagenta: '#8b008b',
  darkolivegreen: '#556b2f',
  darkorange: '#ff8c00',
  darkorchid: '#9932cc',
  darkred: '#8b0000',
  darksalmon: '#e9967a',
  darkseagreen: '#8fbc8f',
  darkslateblue: '#483d8b',
  darkslategray: '#2f4f4f',
  darkslategrey: '#2f4f4f',
  darkturquoise: '#00ced1',
  darkviolet: '#9400d3',
  deeppink: '#ff1493',
  deepskyblue: '#00bfff',
  dimgray: '#696969',
  dimgrey: '#696969',
  dodgerblue: '#1e90ff',
  firebrick: '#b22222',
  floralwhite: '#fffaf0',
  forestgreen: '#228b22',
  fuchsia: '#ff00ff',
  gainsboro: '#dcdcdc',
  ghostwhite: '#f8f8ff',
  goldenrod: '#daa520',
  gold: '#ffd700',
  gray: '#808080',
  green: '#008000',
  greenyellow: '#adff2f',
  grey: '#808080',
  honeydew: '#f0fff0',
  hotpink: '#ff69b4',
  indianred: '#cd5c5c',
  indigo: '#4b0082',
  ivory: '#fffff0',
  khaki: '#f0e68c',
  lavenderblush: '#fff0f5',
  lavender: '#e6e6fa',
  lawngreen: '#7cfc00',
  lemonchiffon: '#fffacd',
  lightblue: '#add8e6',
  lightcoral: '#f08080',
  lightcyan: '#e0ffff',
  lightgoldenrodyellow: '#fafad2',
  lightgray: '#d3d3d3',
  lightgreen: '#90ee90',
  lightgrey: '#d3d3d3',
  lightpink: '#ffb6c1',
  lightsalmon: '#ffa07a',
  lightseagreen: '#20b2aa',
  lightskyblue: '#87cefa',
  lightslategray: '#778899',
  lightslategrey: '#778899',
  lightsteelblue: '#b0c4de',
  lightyellow: '#ffffe0',
  lime: '#00ff00',
  limegreen: '#32cd32',
  linen: '#faf0e6',
  magenta: '#ff00ff',
  maroon: '#800000',
  mediumaquamarine: '#66cdaa',
  mediumblue: '#0000cd',
  mediumorchid: '#ba55d3',
  mediumpurple: '#9370db',
  mediumseagreen: '#3cb371',
  mediumslateblue: '#7b68ee',
  mediumspringgreen: '#00fa9a',
  mediumturquoise: '#48d1cc',
  mediumvioletred: '#c71585',
  midnightblue: '#191970',
  mintcream: '#f5fffa',
  mistyrose: '#ffe4e1',
  moccasin: '#ffe4b5',
  navajowhite: '#ffdead',
  navy: '#000080',
  oldlace: '#fdf5e6',
  olive: '#808000',
  olivedrab: '#6b8e23',
  orange: '#ffa500',
  orangered: '#ff4500',
  orchid: '#da70d6',
  palegoldenrod: '#eee8aa',
  palegreen: '#98fb98',
  paleturquoise: '#afeeee',
  palevioletred: '#db7093',
  papayawhip: '#ffefd5',
  peachpuff: '#ffdab9',
  peru: '#cd853f',
  pink: '#ffc0cb',
  plum: '#dda0dd',
  powderblue: '#b0e0e6',
  purple: '#800080',
  rebeccapurple: '#663399',
  red: '#ff0000',
  rosybrown: '#bc8f8f',
  royalblue: '#4169e1',
  saddlebrown: '#8b4513',
  salmon: '#fa8072',
  sandybrown: '#f4a460',
  seagreen: '#2e8b57',
  seashell: '#fff5ee',
  sienna: '#a0522d',
  silver: '#c0c0c0',
  skyblue: '#87ceeb',
  slateblue: '#6a5acd',
  slategray: '#708090',
  slategrey: '#708090',
  snow: '#fffafa',
  springgreen: '#00ff7f',
  steelblue: '#4682b4',
  tan: '#d2b48c',
  teal: '#008080',
  thistle: '#d8bfd8',
  tomato: '#ff6347',
  turquoise: '#40e0d0',
  violet: '#ee82ee',
  wheat: '#f5deb3',
  white: '#ffffff',
  whitesmoke: '#f5f5f5',
  yellow: '#ffff00',
  yellowgreen: '#9acd32'
};

/**
 * Given a string or object, convert that input to RGB
 *
 * Possible string inputs:
 * ```
 * "red"
 * "#f00" or "f00"
 * "#ff0000" or "ff0000"
 * "#ff000000" or "ff000000"
 * "rgb 255 0 0" or "rgb (255, 0, 0)"
 * "rgb 1.0 0 0" or "rgb (1, 0, 0)"
 * "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
 * "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
 * "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
 * "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
 * "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
 * ```
 */

function inputToRGB(color) {
  var rgb = {
    r: 0,
    g: 0,
    b: 0
  };
  var a = 1;
  var s = null;
  var v = null;
  var l = null;
  var ok = false;
  var format = false;

  if (typeof color === 'string') {
    color = stringInputToObject(color);
  }

  if (typeof color === 'object') {
    if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
      rgb = rgbToRgb(color.r, color.g, color.b);
      ok = true;
      format = String(color.r).substr(-1) === '%' ? 'prgb' : 'rgb';
    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
      s = convertToPercentage(color.s);
      v = convertToPercentage(color.v);
      rgb = hsvToRgb(color.h, s, v);
      ok = true;
      format = 'hsv';
    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
      s = convertToPercentage(color.s);
      l = convertToPercentage(color.l);
      rgb = hslToRgb(color.h, s, l);
      ok = true;
      format = 'hsl';
    }

    if (Object.prototype.hasOwnProperty.call(color, 'a')) {
      a = color.a;
    }
  }

  a = boundAlpha(a);
  return {
    ok: ok,
    format: color.format || format,
    r: Math.min(255, Math.max(rgb.r, 0)),
    g: Math.min(255, Math.max(rgb.g, 0)),
    b: Math.min(255, Math.max(rgb.b, 0)),
    a: a
  };
} // <http://www.w3.org/TR/css3-values/#integers>

var CSS_INTEGER = '[-\\+]?\\d+%?'; // <http://www.w3.org/TR/css3-values/#number-value>

var CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?'; // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.

var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; // Actual matching.
// Parentheses and commas are optional, but not required.
// Whitespace can take the place of commas or opening paren

var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
var matchers = {
  CSS_UNIT: new RegExp(CSS_UNIT),
  rgb: new RegExp('rgb' + PERMISSIVE_MATCH3),
  rgba: new RegExp('rgba' + PERMISSIVE_MATCH4),
  hsl: new RegExp('hsl' + PERMISSIVE_MATCH3),
  hsla: new RegExp('hsla' + PERMISSIVE_MATCH4),
  hsv: new RegExp('hsv' + PERMISSIVE_MATCH3),
  hsva: new RegExp('hsva' + PERMISSIVE_MATCH4),
  hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
  hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
  hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
  hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
};
/**
 * Permissive string parsing.  Take in a number of formats, and output an object
 * based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
 */

function stringInputToObject(color) {
  color = color.trim().toLowerCase();

  if (color.length === 0) {
    return false;
  }

  var named = false;

  if (names[color]) {
    color = names[color];
    named = true;
  } else if (color === 'transparent') {
    return {
      r: 0,
      g: 0,
      b: 0,
      a: 0,
      format: 'name'
    };
  } // Try to match string input using regular expressions.
  // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
  // Just return an object and let the conversion functions handle that.
  // This way the result will be the same whether the tinycolor is initialized with string or object.


  var match = matchers.rgb.exec(color);

  if (match) {
    return {
      r: match[1],
      g: match[2],
      b: match[3]
    };
  }

  match = matchers.rgba.exec(color);

  if (match) {
    return {
      r: match[1],
      g: match[2],
      b: match[3],
      a: match[4]
    };
  }

  match = matchers.hsl.exec(color);

  if (match) {
    return {
      h: match[1],
      s: match[2],
      l: match[3]
    };
  }

  match = matchers.hsla.exec(color);

  if (match) {
    return {
      h: match[1],
      s: match[2],
      l: match[3],
      a: match[4]
    };
  }

  match = matchers.hsv.exec(color);

  if (match) {
    return {
      h: match[1],
      s: match[2],
      v: match[3]
    };
  }

  match = matchers.hsva.exec(color);

  if (match) {
    return {
      h: match[1],
      s: match[2],
      v: match[3],
      a: match[4]
    };
  }

  match = matchers.hex8.exec(color);

  if (match) {
    return {
      r: parseIntFromHex(match[1]),
      g: parseIntFromHex(match[2]),
      b: parseIntFromHex(match[3]),
      a: convertHexToDecimal(match[4]),
      format: named ? 'name' : 'hex8'
    };
  }

  match = matchers.hex6.exec(color);

  if (match) {
    return {
      r: parseIntFromHex(match[1]),
      g: parseIntFromHex(match[2]),
      b: parseIntFromHex(match[3]),
      format: named ? 'name' : 'hex'
    };
  }

  match = matchers.hex4.exec(color);

  if (match) {
    return {
      r: parseIntFromHex(match[1] + match[1]),
      g: parseIntFromHex(match[2] + match[2]),
      b: parseIntFromHex(match[3] + match[3]),
      a: convertHexToDecimal(match[4] + match[4]),
      format: named ? 'name' : 'hex8'
    };
  }

  match = matchers.hex3.exec(color);

  if (match) {
    return {
      r: parseIntFromHex(match[1] + match[1]),
      g: parseIntFromHex(match[2] + match[2]),
      b: parseIntFromHex(match[3] + match[3]),
      format: named ? 'name' : 'hex'
    };
  }

  return false;
}
/**
 * Check to see if it looks like a CSS unit
 * (see `matchers` above for definition).
 */

function isValidCSSUnit(color) {
  return Boolean(matchers.CSS_UNIT.exec(String(color)));
}

var TinyColor =
/** @class */
function () {
  function TinyColor(color, opts) {
    if (color === void 0) {
      color = '';
    }

    if (opts === void 0) {
      opts = {};
    }

    var _a; // If input is already a tinycolor, return itself


    if (color instanceof TinyColor) {
      // eslint-disable-next-line no-constructor-return
      return color;
    }

    if (typeof color === 'number') {
      color = numberInputToObject(color);
    }

    this.originalInput = color;
    var rgb = inputToRGB(color);
    this.originalInput = color;
    this.r = rgb.r;
    this.g = rgb.g;
    this.b = rgb.b;
    this.a = rgb.a;
    this.roundA = Math.round(100 * this.a) / 100;
    this.format = (_a = opts.format) !== null && _a !== void 0 ? _a : rgb.format;
    this.gradientType = opts.gradientType; // Don't let the range of [0,255] come back in [0,1].
    // Potentially lose a little bit of precision here, but will fix issues where
    // .5 gets interpreted as half of the total, instead of half of 1
    // If it was supposed to be 128, this was already taken care of by `inputToRgb`

    if (this.r < 1) {
      this.r = Math.round(this.r);
    }

    if (this.g < 1) {
      this.g = Math.round(this.g);
    }

    if (this.b < 1) {
      this.b = Math.round(this.b);
    }

    this.isValid = rgb.ok;
  }

  TinyColor.prototype.isDark = function () {
    return this.getBrightness() < 128;
  };

  TinyColor.prototype.isLight = function () {
    return !this.isDark();
  };
  /**
   * Returns the perceived brightness of the color, from 0-255.
   */


  TinyColor.prototype.getBrightness = function () {
    // http://www.w3.org/TR/AERT#color-contrast
    var rgb = this.toRgb();
    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
  };
  /**
   * Returns the perceived luminance of a color, from 0-1.
   */


  TinyColor.prototype.getLuminance = function () {
    // http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
    var rgb = this.toRgb();
    var R;
    var G;
    var B;
    var RsRGB = rgb.r / 255;
    var GsRGB = rgb.g / 255;
    var BsRGB = rgb.b / 255;

    if (RsRGB <= 0.03928) {
      R = RsRGB / 12.92;
    } else {
      // eslint-disable-next-line prefer-exponentiation-operator
      R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
    }

    if (GsRGB <= 0.03928) {
      G = GsRGB / 12.92;
    } else {
      // eslint-disable-next-line prefer-exponentiation-operator
      G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
    }

    if (BsRGB <= 0.03928) {
      B = BsRGB / 12.92;
    } else {
      // eslint-disable-next-line prefer-exponentiation-operator
      B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
    }

    return 0.2126 * R + 0.7152 * G + 0.0722 * B;
  };
  /**
   * Returns the alpha value of a color, from 0-1.
   */


  TinyColor.prototype.getAlpha = function () {
    return this.a;
  };
  /**
   * Sets the alpha value on the current color.
   *
   * @param alpha - The new alpha value. The accepted range is 0-1.
   */


  TinyColor.prototype.setAlpha = function (alpha) {
    this.a = boundAlpha(alpha);
    this.roundA = Math.round(100 * this.a) / 100;
    return this;
  };
  /**
   * Returns the object as a HSVA object.
   */


  TinyColor.prototype.toHsv = function () {
    var hsv = rgbToHsv(this.r, this.g, this.b);
    return {
      h: hsv.h * 360,
      s: hsv.s,
      v: hsv.v,
      a: this.a
    };
  };
  /**
   * Returns the hsva values interpolated into a string with the following format:
   * "hsva(xxx, xxx, xxx, xx)".
   */


  TinyColor.prototype.toHsvString = function () {
    var hsv = rgbToHsv(this.r, this.g, this.b);
    var h = Math.round(hsv.h * 360);
    var s = Math.round(hsv.s * 100);
    var v = Math.round(hsv.v * 100);
    return this.a === 1 ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, " + this.roundA + ")";
  };
  /**
   * Returns the object as a HSLA object.
   */


  TinyColor.prototype.toHsl = function () {
    var hsl = rgbToHsl(this.r, this.g, this.b);
    return {
      h: hsl.h * 360,
      s: hsl.s,
      l: hsl.l,
      a: this.a
    };
  };
  /**
   * Returns the hsla values interpolated into a string with the following format:
   * "hsla(xxx, xxx, xxx, xx)".
   */


  TinyColor.prototype.toHslString = function () {
    var hsl = rgbToHsl(this.r, this.g, this.b);
    var h = Math.round(hsl.h * 360);
    var s = Math.round(hsl.s * 100);
    var l = Math.round(hsl.l * 100);
    return this.a === 1 ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, " + this.roundA + ")";
  };
  /**
   * Returns the hex value of the color.
   * @param allow3Char will shorten hex value to 3 char if possible
   */


  TinyColor.prototype.toHex = function (allow3Char) {
    if (allow3Char === void 0) {
      allow3Char = false;
    }

    return rgbToHex(this.r, this.g, this.b, allow3Char);
  };
  /**
   * Returns the hex value of the color -with a # appened.
   * @param allow3Char will shorten hex value to 3 char if possible
   */


  TinyColor.prototype.toHexString = function (allow3Char) {
    if (allow3Char === void 0) {
      allow3Char = false;
    }

    return '#' + this.toHex(allow3Char);
  };
  /**
   * Returns the hex 8 value of the color.
   * @param allow4Char will shorten hex value to 4 char if possible
   */


  TinyColor.prototype.toHex8 = function (allow4Char) {
    if (allow4Char === void 0) {
      allow4Char = false;
    }

    return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char);
  };
  /**
   * Returns the hex 8 value of the color -with a # appened.
   * @param allow4Char will shorten hex value to 4 char if possible
   */


  TinyColor.prototype.toHex8String = function (allow4Char) {
    if (allow4Char === void 0) {
      allow4Char = false;
    }

    return '#' + this.toHex8(allow4Char);
  };
  /**
   * Returns the object as a RGBA object.
   */


  TinyColor.prototype.toRgb = function () {
    return {
      r: Math.round(this.r),
      g: Math.round(this.g),
      b: Math.round(this.b),
      a: this.a
    };
  };
  /**
   * Returns the RGBA values interpolated into a string with the following format:
   * "RGBA(xxx, xxx, xxx, xx)".
   */


  TinyColor.prototype.toRgbString = function () {
    var r = Math.round(this.r);
    var g = Math.round(this.g);
    var b = Math.round(this.b);
    return this.a === 1 ? "rgb(" + r + ", " + g + ", " + b + ")" : "rgba(" + r + ", " + g + ", " + b + ", " + this.roundA + ")";
  };
  /**
   * Returns the object as a RGBA object.
   */


  TinyColor.prototype.toPercentageRgb = function () {
    var fmt = function (x) {
      return Math.round(bound01(x, 255) * 100) + "%";
    };

    return {
      r: fmt(this.r),
      g: fmt(this.g),
      b: fmt(this.b),
      a: this.a
    };
  };
  /**
   * Returns the RGBA relative values interpolated into a string
   */


  TinyColor.prototype.toPercentageRgbString = function () {
    var rnd = function (x) {
      return Math.round(bound01(x, 255) * 100);
    };

    return this.a === 1 ? "rgb(" + rnd(this.r) + "%, " + rnd(this.g) + "%, " + rnd(this.b) + "%)" : "rgba(" + rnd(this.r) + "%, " + rnd(this.g) + "%, " + rnd(this.b) + "%, " + this.roundA + ")";
  };
  /**
   * The 'real' name of the color -if there is one.
   */


  TinyColor.prototype.toName = function () {
    if (this.a === 0) {
      return 'transparent';
    }

    if (this.a < 1) {
      return false;
    }

    var hex = '#' + rgbToHex(this.r, this.g, this.b, false);

    for (var _i = 0, _a = Object.entries(names); _i < _a.length; _i++) {
      var _b = _a[_i],
          key = _b[0],
          value = _b[1];

      if (hex === value) {
        return key;
      }
    }

    return false;
  };
  /**
   * String representation of the color.
   *
   * @param format - The format to be used when displaying the string representation.
   */


  TinyColor.prototype.toString = function (format) {
    var formatSet = Boolean(format);
    format = format !== null && format !== void 0 ? format : this.format;
    var formattedString = false;
    var hasAlpha = this.a < 1 && this.a >= 0;
    var needsAlphaFormat = !formatSet && hasAlpha && (format.startsWith('hex') || format === 'name');

    if (needsAlphaFormat) {
      // Special case for "transparent", all other non-alpha formats
      // will return rgba when there is transparency.
      if (format === 'name' && this.a === 0) {
        return this.toName();
      }

      return this.toRgbString();
    }

    if (format === 'rgb') {
      formattedString = this.toRgbString();
    }

    if (format === 'prgb') {
      formattedString = this.toPercentageRgbString();
    }

    if (format === 'hex' || format === 'hex6') {
      formattedString = this.toHexString();
    }

    if (format === 'hex3') {
      formattedString = this.toHexString(true);
    }

    if (format === 'hex4') {
      formattedString = this.toHex8String(true);
    }

    if (format === 'hex8') {
      formattedString = this.toHex8String();
    }

    if (format === 'name') {
      formattedString = this.toName();
    }

    if (format === 'hsl') {
      formattedString = this.toHslString();
    }

    if (format === 'hsv') {
      formattedString = this.toHsvString();
    }

    return formattedString || this.toHexString();
  };

  TinyColor.prototype.toNumber = function () {
    return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
  };

  TinyColor.prototype.clone = function () {
    return new TinyColor(this.toString());
  };
  /**
   * Lighten the color a given amount. Providing 100 will always return white.
   * @param amount - valid between 1-100
   */


  TinyColor.prototype.lighten = function (amount) {
    if (amount === void 0) {
      amount = 10;
    }

    var hsl = this.toHsl();
    hsl.l += amount / 100;
    hsl.l = clamp01(hsl.l);
    return new TinyColor(hsl);
  };
  /**
   * Brighten the color a given amount, from 0 to 100.
   * @param amount - valid between 1-100
   */


  TinyColor.prototype.brighten = function (amount) {
    if (amount === void 0) {
      amount = 10;
    }

    var rgb = this.toRgb();
    rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
    rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
    rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
    return new TinyColor(rgb);
  };
  /**
   * Darken the color a given amount, from 0 to 100.
   * Providing 100 will always return black.
   * @param amount - valid between 1-100
   */


  TinyColor.prototype.darken = function (amount) {
    if (amount === void 0) {
      amount = 10;
    }

    var hsl = this.toHsl();
    hsl.l -= amount / 100;
    hsl.l = clamp01(hsl.l);
    return new TinyColor(hsl);
  };
  /**
   * Mix the color with pure white, from 0 to 100.
   * Providing 0 will do nothing, providing 100 will always return white.
   * @param amount - valid between 1-100
   */


  TinyColor.prototype.tint = function (amount) {
    if (amount === void 0) {
      amount = 10;
    }

    return this.mix('white', amount);
  };
  /**
   * Mix the color with pure black, from 0 to 100.
   * Providing 0 will do nothing, providing 100 will always return black.
   * @param amount - valid between 1-100
   */


  TinyColor.prototype.shade = function (amount) {
    if (amount === void 0) {
      amount = 10;
    }

    return this.mix('black', amount);
  };
  /**
   * Desaturate the color a given amount, from 0 to 100.
   * Providing 100 will is the same as calling greyscale
   * @param amount - valid between 1-100
   */


  TinyColor.prototype.desaturate = function (amount) {
    if (amount === void 0) {
      amount = 10;
    }

    var hsl = this.toHsl();
    hsl.s -= amount / 100;
    hsl.s = clamp01(hsl.s);
    return new TinyColor(hsl);
  };
  /**
   * Saturate the color a given amount, from 0 to 100.
   * @param amount - valid between 1-100
   */


  TinyColor.prototype.saturate = function (amount) {
    if (amount === void 0) {
      amount = 10;
    }

    var hsl = this.toHsl();
    hsl.s += amount / 100;
    hsl.s = clamp01(hsl.s);
    return new TinyColor(hsl);
  };
  /**
   * Completely desaturates a color into greyscale.
   * Same as calling `desaturate(100)`
   */


  TinyColor.prototype.greyscale = function () {
    return this.desaturate(100);
  };
  /**
   * Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
   * Values outside of this range will be wrapped into this range.
   */


  TinyColor.prototype.spin = function (amount) {
    var hsl = this.toHsl();
    var hue = (hsl.h + amount) % 360;
    hsl.h = hue < 0 ? 360 + hue : hue;
    return new TinyColor(hsl);
  };
  /**
   * Mix the current color a given amount with another color, from 0 to 100.
   * 0 means no mixing (return current color).
   */


  TinyColor.prototype.mix = function (color, amount) {
    if (amount === void 0) {
      amount = 50;
    }

    var rgb1 = this.toRgb();
    var rgb2 = new TinyColor(color).toRgb();
    var p = amount / 100;
    var rgba = {
      r: (rgb2.r - rgb1.r) * p + rgb1.r,
      g: (rgb2.g - rgb1.g) * p + rgb1.g,
      b: (rgb2.b - rgb1.b) * p + rgb1.b,
      a: (rgb2.a - rgb1.a) * p + rgb1.a
    };
    return new TinyColor(rgba);
  };

  TinyColor.prototype.analogous = function (results, slices) {
    if (results === void 0) {
      results = 6;
    }

    if (slices === void 0) {
      slices = 30;
    }

    var hsl = this.toHsl();
    var part = 360 / slices;
    var ret = [this];

    for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results;) {
      hsl.h = (hsl.h + part) % 360;
      ret.push(new TinyColor(hsl));
    }

    return ret;
  };
  /**
   * taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
   */


  TinyColor.prototype.complement = function () {
    var hsl = this.toHsl();
    hsl.h = (hsl.h + 180) % 360;
    return new TinyColor(hsl);
  };

  TinyColor.prototype.monochromatic = function (results) {
    if (results === void 0) {
      results = 6;
    }

    var hsv = this.toHsv();
    var h = hsv.h;
    var s = hsv.s;
    var v = hsv.v;
    var res = [];
    var modification = 1 / results;

    while (results--) {
      res.push(new TinyColor({
        h: h,
        s: s,
        v: v
      }));
      v = (v + modification) % 1;
    }

    return res;
  };

  TinyColor.prototype.splitcomplement = function () {
    var hsl = this.toHsl();
    var h = hsl.h;
    return [this, new TinyColor({
      h: (h + 72) % 360,
      s: hsl.s,
      l: hsl.l
    }), new TinyColor({
      h: (h + 216) % 360,
      s: hsl.s,
      l: hsl.l
    })];
  };
  /**
   * Compute how the color would appear on a background
   */


  TinyColor.prototype.onBackground = function (background) {
    var fg = this.toRgb();
    var bg = new TinyColor(background).toRgb();
    return new TinyColor({
      r: bg.r + (fg.r - bg.r) * fg.a,
      g: bg.g + (fg.g - bg.g) * fg.a,
      b: bg.b + (fg.b - bg.b) * fg.a
    });
  };
  /**
   * Alias for `polyad(3)`
   */


  TinyColor.prototype.triad = function () {
    return this.polyad(3);
  };
  /**
   * Alias for `polyad(4)`
   */


  TinyColor.prototype.tetrad = function () {
    return this.polyad(4);
  };
  /**
   * Get polyad colors, like (for 1, 2, 3, 4, 5, 6, 7, 8, etc...)
   * monad, dyad, triad, tetrad, pentad, hexad, heptad, octad, etc...
   */


  TinyColor.prototype.polyad = function (n) {
    var hsl = this.toHsl();
    var h = hsl.h;
    var result = [this];
    var increment = 360 / n;

    for (var i = 1; i < n; i++) {
      result.push(new TinyColor({
        h: (h + i * increment) % 360,
        s: hsl.s,
        l: hsl.l
      }));
    }

    return result;
  };
  /**
   * compare color vs current color
   */


  TinyColor.prototype.equals = function (color) {
    return this.toRgbString() === new TinyColor(color).toRgbString();
  };

  return TinyColor;
}();

var hueStep = 2; // 色相阶梯

var saturationStep = 0.16; // 饱和度阶梯，浅色部分

var saturationStep2 = 0.05; // 饱和度阶梯，深色部分

var brightnessStep1 = 0.05; // 亮度阶梯，浅色部分

var brightnessStep2 = 0.15; // 亮度阶梯，深色部分

var lightColorCount = 5; // 浅色数量，主色上

var darkColorCount = 4; // 深色数量，主色下
// 暗色主题颜色映射关系表

var darkColorMap = [{
  index: 7,
  opacity: 0.15
}, {
  index: 6,
  opacity: 0.25
}, {
  index: 5,
  opacity: 0.3
}, {
  index: 5,
  opacity: 0.45
}, {
  index: 5,
  opacity: 0.65
}, {
  index: 5,
  opacity: 0.85
}, {
  index: 4,
  opacity: 0.9
}, {
  index: 3,
  opacity: 0.95
}, {
  index: 2,
  opacity: 0.97
}, {
  index: 1,
  opacity: 0.98
}];

function getHue(hsv, i, light) {
  var hue; // 根据色相不同，色相转向不同

  if (Math.round(hsv.h) >= 60 && Math.round(hsv.h) <= 240) {
    hue = light ? Math.round(hsv.h) - hueStep * i : Math.round(hsv.h) + hueStep * i;
  } else {
    hue = light ? Math.round(hsv.h) + hueStep * i : Math.round(hsv.h) - hueStep * i;
  }

  if (hue < 0) {
    hue += 360;
  } else if (hue >= 360) {
    hue -= 360;
  }

  return hue;
}

function getSaturation(hsv, i, light) {
  // grey color don't change saturation
  if (hsv.h === 0 && hsv.s === 0) {
    return hsv.s;
  }

  var saturation;

  if (light) {
    saturation = hsv.s - saturationStep * i;
  } else if (i === darkColorCount) {
    saturation = hsv.s + saturationStep;
  } else {
    saturation = hsv.s + saturationStep2 * i;
  } // 边界值修正


  if (saturation > 1) {
    saturation = 1;
  } // 第一格的 s 限制在 0.06-0.1 之间


  if (light && i === lightColorCount && saturation > 0.1) {
    saturation = 0.1;
  }

  if (saturation < 0.06) {
    saturation = 0.06;
  }

  return Number(saturation.toFixed(2));
}

function getValue(hsv, i, light) {
  var value;

  if (light) {
    value = hsv.v + brightnessStep1 * i;
  } else {
    value = hsv.v - brightnessStep2 * i;
  }

  if (value > 1) {
    value = 1;
  }

  return Number(value.toFixed(2));
}

function generate(color) {
  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var patterns = [];
  var pColor = new TinyColor(color);

  for (var i = lightColorCount; i > 0; i -= 1) {
    var hsv = pColor.toHsv();
    var colorString = new TinyColor({
      h: getHue(hsv, i, true),
      s: getSaturation(hsv, i, true),
      v: getValue(hsv, i, true)
    }).toHexString();
    patterns.push(colorString);
  }

  patterns.push(pColor.toHexString());

  for (var _i = 1; _i <= darkColorCount; _i += 1) {
    var _hsv = pColor.toHsv();

    var _colorString = new TinyColor({
      h: getHue(_hsv, _i),
      s: getSaturation(_hsv, _i),
      v: getValue(_hsv, _i)
    }).toHexString();

    patterns.push(_colorString);
  } // dark theme patterns


  if (opts.theme === 'dark') {
    return darkColorMap.map(function (_ref) {
      var index = _ref.index,
          opacity = _ref.opacity;
      var darkColorString = new TinyColor(opts.backgroundColor || '#141414').mix(patterns[index], opacity * 100).toHexString();
      return darkColorString;
    });
  }

  return patterns;
}

var presetPrimaryColors = {
  red: '#F5222D',
  volcano: '#FA541C',
  orange: '#FA8C16',
  gold: '#FAAD14',
  yellow: '#FADB14',
  lime: '#A0D911',
  green: '#52C41A',
  cyan: '#13C2C2',
  blue: '#1890FF',
  geekblue: '#2F54EB',
  purple: '#722ED1',
  magenta: '#EB2F96',
  grey: '#666666'
};
var presetPalettes = {};
var presetDarkPalettes = {};
Object.keys(presetPrimaryColors).forEach(function (key) {
  presetPalettes[key] = generate(presetPrimaryColors[key]);
  presetPalettes[key].primary = presetPalettes[key][5]; // dark presetPalettes

  presetDarkPalettes[key] = generate(presetPrimaryColors[key], {
    theme: 'dark',
    backgroundColor: '#141414'
  });
  presetDarkPalettes[key].primary = presetDarkPalettes[key][5];
});

/* eslint-disable no-console */
var warned = {};
function warning(valid, message) {
  // Support uglify
  if ( !valid && console !== undefined) {
    console.error("Warning: ".concat(message));
  }
}
function call(method, valid, message) {
  if (!valid && !warned[message]) {
    method(false, message);
    warned[message] = true;
  }
}
function warningOnce(valid, message) {
  call(warning, valid, message);
}
/* eslint-enable */

var containers = []; // will store container HTMLElement references

var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}

var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';

function insertCss(css, options) {
  options = options || {};

  if (css === undefined) {
    throw new Error(usage);
  }

  var position = options.prepend === true ? 'prepend' : 'append';
  var container = options.container !== undefined ? options.container : document.querySelector('head');
  var containerId = containers.indexOf(container); // first time we see this container, create the necessary entries

  if (containerId === -1) {
    containerId = containers.push(container) - 1;
    styleElements[containerId] = {};
  } // try to get the correponding container + position styleElement, create it otherwise


  var styleElement;

  if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
    styleElement = styleElements[containerId][position];
  } else {
    styleElement = styleElements[containerId][position] = createStyleElement();

    if (position === 'prepend') {
      container.insertBefore(styleElement, container.childNodes[0]);
    } else {
      container.appendChild(styleElement);
    }
  } // strip potential UTF-8 BOM if css was read from a file


  if (css.charCodeAt(0) === 0xFEFF) {
    css = css.substr(1, css.length);
  } // actually add the stylesheet


  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText += css;
  } else {
    styleElement.textContent += css;
  }

  return styleElement;
}

function createStyleElement() {
  var styleElement = document.createElement('style');
  styleElement.setAttribute('type', 'text/css');
  return styleElement;
}

var _insertCss_2_0_0_insertCss = insertCss;
var insertCss_1 = insertCss;
_insertCss_2_0_0_insertCss.insertCss = insertCss_1;

function warning$1(valid, message) {
  warningOnce(valid, "[@ant-design/icons] ".concat(message));
}
function isIconDefinition(target) {
  return _typeof__default['default'](target) === 'object' && typeof target.name === 'string' && typeof target.theme === 'string' && (_typeof__default['default'](target.icon) === 'object' || typeof target.icon === 'function');
}
function normalizeAttrs() {
  var attrs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  return Object.keys(attrs).reduce(function (acc, key) {
    var val = attrs[key];

    switch (key) {
      case 'class':
        acc.className = val;
        delete acc.class;
        break;

      default:
        acc[key] = val;
    }

    return acc;
  }, {});
}
function generate$1(node, key, rootProps) {
  if (!rootProps) {
    return /*#__PURE__*/React__default['default'].createElement(node.tag, _objectSpread__default['default']({
      key: key
    }, normalizeAttrs(node.attrs)), (node.children || []).map(function (child, index) {
      return generate$1(child, "".concat(key, "-").concat(node.tag, "-").concat(index));
    }));
  }

  return /*#__PURE__*/React__default['default'].createElement(node.tag, _objectSpread__default['default'](_objectSpread__default['default']({
    key: key
  }, normalizeAttrs(node.attrs)), rootProps), (node.children || []).map(function (child, index) {
    return generate$1(child, "".concat(key, "-").concat(node.tag, "-").concat(index));
  }));
}
function getSecondaryColor(primaryColor) {
  // choose the second color
  return generate(primaryColor)[0];
}
function normalizeTwoToneColors(twoToneColor) {
  if (!twoToneColor) {
    return [];
  }

  return Array.isArray(twoToneColor) ? twoToneColor : [twoToneColor];
} // These props make sure that the SVG behaviours like general text.
var iconStyles = "\n.anticon {\n  display: inline-block;\n  color: inherit;\n  font-style: normal;\n  line-height: 0;\n  text-align: center;\n  text-transform: none;\n  vertical-align: -0.125em;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.anticon > * {\n  line-height: 1;\n}\n\n.anticon svg {\n  display: inline-block;\n}\n\n.anticon::before {\n  display: none;\n}\n\n.anticon .anticon-icon {\n  display: block;\n}\n\n.anticon[tabindex] {\n  cursor: pointer;\n}\n\n.anticon-spin::before,\n.anticon-spin {\n  display: inline-block;\n  -webkit-animation: loadingCircle 1s infinite linear;\n  animation: loadingCircle 1s infinite linear;\n}\n\n@-webkit-keyframes loadingCircle {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes loadingCircle {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n";
var cssInjectedFlag = false;
var useInsertStyles = function useInsertStyles() {
  var styleStr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : iconStyles;
  React.useEffect(function () {
    if (!cssInjectedFlag) {
      insertCss_1(styleStr, {
        prepend: true
      });
      cssInjectedFlag = true;
    }
  }, []);
};

var twoToneColorPalette = {
  primaryColor: '#333',
  secondaryColor: '#E6E6E6',
  calculated: false
};

function setTwoToneColors(_ref) {
  var primaryColor = _ref.primaryColor,
      secondaryColor = _ref.secondaryColor;
  twoToneColorPalette.primaryColor = primaryColor;
  twoToneColorPalette.secondaryColor = secondaryColor || getSecondaryColor(primaryColor);
  twoToneColorPalette.calculated = !!secondaryColor;
}

function getTwoToneColors() {
  return _objectSpread__default['default']({}, twoToneColorPalette);
}

var IconBase = function IconBase(props) {
  var icon = props.icon,
      className = props.className,
      onClick = props.onClick,
      style = props.style,
      primaryColor = props.primaryColor,
      secondaryColor = props.secondaryColor,
      restProps = _objectWithoutProperties__default['default'](props, ["icon", "className", "onClick", "style", "primaryColor", "secondaryColor"]);

  var colors = twoToneColorPalette;

  if (primaryColor) {
    colors = {
      primaryColor: primaryColor,
      secondaryColor: secondaryColor || getSecondaryColor(primaryColor)
    };
  }

  useInsertStyles();
  warning$1(isIconDefinition(icon), "icon should be icon definiton, but got ".concat(icon));

  if (!isIconDefinition(icon)) {
    return null;
  }

  var target = icon;

  if (target && typeof target.icon === 'function') {
    target = _objectSpread__default['default'](_objectSpread__default['default']({}, target), {}, {
      icon: target.icon(colors.primaryColor, colors.secondaryColor)
    });
  }

  return generate$1(target.icon, "svg-".concat(target.name), _objectSpread__default['default']({
    className: className,
    onClick: onClick,
    style: style,
    'data-icon': target.name,
    width: '1em',
    height: '1em',
    fill: 'currentColor',
    'aria-hidden': 'true'
  }, restProps));
};

IconBase.displayName = 'IconReact';
IconBase.getTwoToneColors = getTwoToneColors;
IconBase.setTwoToneColors = setTwoToneColors;

function setTwoToneColor(twoToneColor) {
  var _normalizeTwoToneColo = normalizeTwoToneColors(twoToneColor),
      _normalizeTwoToneColo2 = _slicedToArray__default['default'](_normalizeTwoToneColo, 2),
      primaryColor = _normalizeTwoToneColo2[0],
      secondaryColor = _normalizeTwoToneColo2[1];

  return IconBase.setTwoToneColors({
    primaryColor: primaryColor,
    secondaryColor: secondaryColor
  });
}
function getTwoToneColor() {
  var colors = IconBase.getTwoToneColors();

  if (!colors.calculated) {
    return colors.primaryColor;
  }

  return [colors.primaryColor, colors.secondaryColor];
}

// should move it to antd main repo?

setTwoToneColor('#1890ff');
var Icon = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var className = props.className,
      icon = props.icon,
      spin = props.spin,
      rotate = props.rotate,
      tabIndex = props.tabIndex,
      onClick = props.onClick,
      twoToneColor = props.twoToneColor,
      restProps = _objectWithoutProperties__default['default'](props, ["className", "icon", "spin", "rotate", "tabIndex", "onClick", "twoToneColor"]);

  var classString = _classnames_2_2_6_classnames('anticon', _defineProperty__default['default']({}, "anticon-".concat(icon.name), Boolean(icon.name)), {
    'anticon-spin': !!spin || icon.name === 'loading'
  }, className);
  var iconTabIndex = tabIndex;

  if (iconTabIndex === undefined && onClick) {
    iconTabIndex = -1;
  }

  var svgStyle = rotate ? {
    msTransform: "rotate(".concat(rotate, "deg)"),
    transform: "rotate(".concat(rotate, "deg)")
  } : undefined;

  var _normalizeTwoToneColo = normalizeTwoToneColors(twoToneColor),
      _normalizeTwoToneColo2 = _slicedToArray__default['default'](_normalizeTwoToneColo, 2),
      primaryColor = _normalizeTwoToneColo2[0],
      secondaryColor = _normalizeTwoToneColo2[1];

  return /*#__PURE__*/React.createElement("span", Object.assign({
    role: "img",
    "aria-label": icon.name
  }, restProps, {
    ref: ref,
    tabIndex: iconTabIndex,
    onClick: onClick,
    className: classString
  }), /*#__PURE__*/React.createElement(IconBase, {
    icon: icon,
    primaryColor: primaryColor,
    secondaryColor: secondaryColor,
    style: svgStyle
  }));
});
Icon.displayName = 'AntdIcon';
Icon.getTwoToneColor = getTwoToneColor;
Icon.setTwoToneColor = setTwoToneColor;

// This icon file is generated automatically.
var LoadingOutlined = {
  "icon": {
    "tag": "svg",
    "attrs": {
      "viewBox": "0 0 1024 1024",
      "focusable": "false"
    },
    "children": [{
      "tag": "path",
      "attrs": {
        "d": "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
      }
    }]
  },
  "name": "loading",
  "theme": "outlined"
};

// GENERATE BY ./scripts/generate.ts

var LoadingOutlined$1 = function LoadingOutlined$1(props, ref) {
  return /*#__PURE__*/React.createElement(Icon, Object.assign({}, props, {
    ref: ref,
    icon: LoadingOutlined
  }));
};

LoadingOutlined$1.displayName = 'LoadingOutlined';
var LoadingOutlined$2 = /*#__PURE__*/React.forwardRef(LoadingOutlined$1);

var resourceColumns = [{
  title: '名称',
  dataIndex: 'name',
  key: 'name'
}, {
  title: '类型',
  dataIndex: 'type',
  width: 160,
  key: 'type'
}, {
  title: '耗时(ms)',
  dataIndex: 'duration',
  sorter: function sorter(a, b) {
    return a.duration - b.duration;
  },
  width: 120,
  key: 'duration',
  render: function render(v) {
    return v.toFixed(2);
  }
}, {
  title: '开始时间',
  width: 160,
  sorter: function sorter(a, b) {
    return a.startTime - b.startTime;
  },
  dataIndex: 'startTime',
  key: 'startTime',
  render: function render(v) {
    return dayjs__default['default'](v).format('HH:mm:ss SSS');
  }
}];
var resourceOpts = [{
  label: '名称',
  value: 'name'
}, {
  label: '类型',
  value: 'type'
}, {
  label: '耗时',
  value: 'duration'
}, {
  label: '开始时间',
  value: 'startTime'
}];
var apiColumns = [{
  title: '名称',
  dataIndex: 'name',
  key: 'name'
}, {
  title: '参数',
  dataIndex: 'param',
  key: 'param'
}, {
  title: '耗时(ms)',
  dataIndex: 'duration',
  sorter: function sorter(a, b) {
    return a.duration - b.duration;
  },
  key: 'duration',
  render: function render(v) {
    if (v) {
      return v;
    }

    return /*#__PURE__*/React__default['default'].createElement(LoadingOutlined$2, {
      style: {
        fontSize: 24,
        color: '#1890ff'
      },
      spin: true
    });
  }
}, {
  title: '开始时间',
  width: 160,
  sorter: function sorter(a, b) {
    return a.startTime - b.startTime;
  },
  dataIndex: 'startTime',
  key: 'startTime',
  render: function render(v) {
    return dayjs__default['default'](v).format('HH:mm:ss SSS');
  }
}];
var apiOpts = [{
  label: '名称',
  value: 'name'
}, {
  label: '参数',
  value: 'param'
}, {
  label: '耗时',
  value: 'duration'
}, {
  label: '开始时间',
  value: 'startTime'
}];

var Search = _Input__default['default'].Search;
var Panel = _Collapse__default['default'].Panel;
var Card = (function (_ref) {
  var data = _ref.data;

  var _useState = React.useState(0),
      height = _useState[0],
      setHeight = _useState[1];

  var _useState2 = React.useState({
    value: ''
  }),
      resourcefilter = _useState2[0],
      setResourcefilter = _useState2[1];

  var _useState3 = React.useState({
    value: ''
  }),
      apifilter = _useState3[0],
      setApifilter = _useState3[1];

  var changeResource = React.useCallback(function (val) {
    setResourcefilter(_objectSpread__default$1['default'](_objectSpread__default$1['default']({}, resourcefilter), val));
  }, [resourcefilter]);
  var changeApi = React.useCallback(function (val) {
    console.log(1111, val);
    setApifilter(_objectSpread__default$1['default'](_objectSpread__default$1['default']({}, apifilter), val));
  }, [apifilter]);
  var getHeight = React.useCallback(function () {
    var h = document.body.offsetHeight;
    setHeight(h - 350);
  }, []);
  React.useEffect(function () {
    getHeight();
  }, [getHeight]);
  return /*#__PURE__*/React__default['default'].createElement("div", {
    className: "debug-mode-content"
  }, /*#__PURE__*/React__default['default'].createElement(_Collapse__default['default'], {
    accordion: true
  }, data.map(function (item, idx) {
    switch (item.type) {
      case 'api':
        return /*#__PURE__*/React__default['default'].createElement(Panel, {
          header: renderInfo(item),
          key: idx
        }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(_Select__default['default'], {
          placeholder: "\u8BF7\u9009\u62E9\u5173\u952E\u8BCD\u641C\u7D22\u7C7B\u578B",
          onChange: function onChange(val) {
            changeApi({
              filterType: val
            });
          },
          value: apifilter.filterType,
          allowClear: true,
          options: apiOpts
        }), /*#__PURE__*/React__default['default'].createElement(Search, {
          placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD\u67E5\u8BE2",
          onSearch: function onSearch(val) {
            changeApi({
              value: val
            });
          },
          defaultValue: apifilter.value
        })), /*#__PURE__*/React__default['default'].createElement(_Table__default['default'], {
          size: "small",
          pagination: false,
          scroll: {
            y: height
          },
          dataSource: filterSearch(apifilter.value, item.child, apifilter.filterType),
          columns: apiColumns
        }));

      case 'resource':
        return /*#__PURE__*/React__default['default'].createElement(Panel, {
          header: renderInfo(item),
          key: idx
        }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(_Select__default['default'], {
          placeholder: "\u8BF7\u9009\u62E9\u5173\u952E\u8BCD\u641C\u7D22\u7C7B\u578B",
          onChange: function onChange(val) {
            changeResource({
              filterType: val
            });
          },
          value: resourcefilter.filterType,
          allowClear: true,
          options: resourceOpts
        }), /*#__PURE__*/React__default['default'].createElement(Search, {
          placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD\u67E5\u8BE2",
          onSearch: function onSearch(val) {
            changeResource({
              value: val
            });
          },
          defaultValue: resourcefilter.value
        })), /*#__PURE__*/React__default['default'].createElement(_Table__default['default'], {
          size: "small",
          pagination: false,
          scroll: {
            y: height
          },
          dataSource: filterSearch(resourcefilter.value, item.child, resourcefilter.filterType),
          columns: resourceColumns
        }));

      default:
        return /*#__PURE__*/React__default['default'].createElement(Panel, {
          header: renderInfo(item),
          key: idx
        }, /*#__PURE__*/React__default['default'].createElement(_List__default['default'], {
          size: "small",
          bordered: true,
          dataSource: (item == null ? void 0 : item.child) || [],
          renderItem: function renderItem(child) {
            return /*#__PURE__*/React__default['default'].createElement(_List__default['default'].Item, null, renderInfo(child));
          }
        }));
    }
  })));
});

var Content = (function (_ref) {
  var _ref$visible = _ref.visible,
      visible = _ref$visible === void 0 ? false : _ref$visible,
      closeHandle = _ref.closeHandle;

  var _useState = React.useState({}),
      pageTiming = _useState[0],
      setPageTiming = _useState[1];

  var _useState2 = React.useState({}),
      resourceTiming = _useState2[0],
      setResourceTiming = _useState2[1];

  var _useState3 = React.useState({
    name: '接口加载时长',
    type: 'api'
  }),
      apiTiming = _useState3[0],
      setApiTiming = _useState3[1];

  React.useEffect(function () {
    (function (open, send) {
      var arr = [];
      var i = 0;
      var minT = performance.now();

      XMLHttpRequest.prototype.open = function () {
        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
          args[_key] = arguments[_key];
        }

        arr[i] = {
          key: i,
          name: args[1]
        };
        return open.apply(this, args);
      };

      XMLHttpRequest.prototype.send = function () {
        var _this = this;

        var st = Date.now();
        arr[i].startTime = st;

        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
          args[_key2] = arguments[_key2];
        }

        arr[i].param = args[0];

        (function (idx) {
          _this.addEventListener('loadend', function () {
            arr[idx].duration = Date.now() - st;
            setApiTiming({
              name: '接口加载时长',
              type: 'api',
              value: performance.now() - minT,
              child: arr
            });
          });
        })(i);

        i++;
        return send.apply(this, args);
      };
    })(XMLHttpRequest.prototype.open, XMLHttpRequest.prototype.send);
  }, []);
  React.useEffect(function () {
    if (visible) {
      var t = performance.getEntriesByType('navigation')[0];
      var resourceArr = performance.getEntriesByType('resource');
      var minT = Math.min.apply(Math, resourceArr.map(function (item) {
        return item.startTime;
      }));
      var maxT = Math.max.apply(Math, resourceArr.map(function (item) {
        return item.responseEnd;
      }));
      var pageLoad = {
        name: '页面onLoad时间',
        value: t.loadEventEnd - t.redirectStart,
        type: 'page',
        child: [{
          name: '跳转&重定向',
          value: t.fetchStart - t.redirectStart
        }, {
          name: '缓存耗时',
          value: t.domainLookupStart - t.fetchStart
        }, {
          name: 'DNS解析',
          value: t.domainLookupEnd - t.domainLookupStart
        }, {
          name: 'TCP连接耗时',
          value: t.requestStart - t.connectStart
        }, {
          name: '网络请求耗时',
          value: t.responseStart - t.requestStart
        }, {
          name: '数据传输耗时',
          value: t.responseEnd - t.responseStart
        }, {
          name: '可交互 DOM 解析耗时',
          value: t.domInteractive - t.responseEnd
        }, {
          name: '剩余 DOM 解析耗时',
          value: t.domContentLoadedEventStart - t.domInteractive
        }, {
          name: 'DOMContentLoaded 事件耗时',
          value: t.domContentLoadedEventEnd - t.domContentLoadedEventStart
        }, {
          name: '资源加载耗时',
          value: t.loadEventStart - t.domContentLoadedEventEnd
        }, {
          name: 'onLoad事件耗时',
          value: t.loadEventEnd - t.loadEventStart
        }]
      };
      var resourceLoad = {
        name: '资源加载时长',
        value: maxT - minT,
        type: 'resource',
        child: resourceArr.map(function (item, idx) {
          return {
            type: item.initiatorType,
            name: item.name,
            key: idx,
            duration: item.duration,
            startTime: unixTime(item.startTime)
          };
        })
      };
      setPageTiming(pageLoad);
      setResourceTiming(resourceLoad);
    }
  }, [visible]);
  return /*#__PURE__*/React__default['default'].createElement(_Drawer__default['default'], {
    visible: visible,
    width: "60%",
    onClose: function onClose() {
      closeHandle();
    }
  }, /*#__PURE__*/React__default['default'].createElement(Card, {
    data: [pageTiming, resourceTiming, apiTiming]
  }));
});

var DebugTool = (function (_ref) {
  var _ref$isDrag = _ref.isDrag,
      isDrag = _ref$isDrag === void 0 ? true : _ref$isDrag,
      _ref$autoPos = _ref.autoPos,
      autoPos = _ref$autoPos === void 0 ? true : _ref$autoPos,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 34 : _ref$size,
      _ref$placement = _ref.placement,
      placement = _ref$placement === void 0 ? 'rb' : _ref$placement;

  var _useState = React.useState(!!localStorage.getItem('showDebug')),
      show = _useState[0],
      setShow = _useState[1];

  var _useState2 = React.useState(defPosFun(placement, size)),
      position = _useState2[0],
      setPosition = _useState2[1];

  var _useState3 = React.useState(false),
      visible = _useState3[0],
      setVisible = _useState3[1];

  React.useEffect(function () {
    var fn = function fn(e) {
      if (e.shiftKey && e.altKey && e.keyCode === 71) {
        setShow(!show);

        if (!show) {
          localStorage.setItem('showDebug', 'true');
        } else {
          setVisible(false);
          localStorage.removeItem('showDebug');
        }
      }
    };

    window.addEventListener('keydown', fn);
    return function () {
      window.removeEventListener('keydown', fn);
    };
  }, [show]);
  var autoPosFun = React.useCallback(function (oldPos) {
    if (!autoPos) return oldPos;
    var $body = document.body;
    var x = oldPos.x,
        y = oldPos.y;
    var w = $body.offsetWidth;
    var h = $body.offsetHeight;
    if (!w || !h) return oldPos;
    var top = y <= (h - size) / 2 && y < x && y < w - x;
    var bottom = y > (h - size) / 2 && h - y < x && h - y < w - x;
    var left = x <= (w - size) / 2 && x <= y && x <= h - y;
    var right = w - x < (w - size) / 2 && w - x <= y && w - x <= h - y;

    if (top) {
      return {
        x: x,
        y: 0
      };
    } else if (right) {
      return {
        x: w - size,
        y: y
      };
    } else if (bottom) {
      return {
        x: x,
        y: h - size
      };
    } else if (left) {
      return {
        x: 0,
        y: y
      };
    } else {
      return oldPos;
    }
  }, [autoPos, size]);
  var handleStop = React.useCallback(function (_e, data) {
    // 不触发拖拽，点击弹出debug内容
    if (Math.abs(data.x - position.x) < 2 && Math.abs(data.y - position.y) < 2) {
      setVisible(true);
      return;
    }

    var pos = {
      x: data.x,
      y: data.y
    };
    pos = autoPosFun(pos);
    localStorage.setItem('pos', JSON.stringify(pos));
    setPosition(pos);
  }, [setPosition, autoPosFun, position]);
  var closeHandle = React.useCallback(function () {
    setVisible(false);
  }, []);
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, show ? /*#__PURE__*/React__default['default'].createElement(Draggable__default['default'], {
    scale: 1,
    disabled: !isDrag,
    onStop: handleStop,
    position: position,
    bounds: "body"
  }, /*#__PURE__*/React__default['default'].createElement("div", {
    style: {
      height: size,
      width: size
    },
    className: "debug-mode-btn"
  }, /*#__PURE__*/React__default['default'].createElement(DebugIcon, null))) : null, /*#__PURE__*/React__default['default'].createElement(Content, {
    closeHandle: closeHandle,
    visible: visible
  }));
});

window.DebugTool = DebugTool;

module.exports = DebugTool;
