import { Gauge } from '@ant-design/plots';
import React from 'react';
var UsageCycle = function UsageCycle(_ref) {
  var _ref$color = _ref.color,
    color = _ref$color === void 0 ? '#006269' : _ref$color,
    _ref$title = _ref.title,
    title = _ref$title === void 0 ? '' : _ref$title,
    _ref$usage = _ref.usage,
    usage = _ref$usage === void 0 ? 0 : _ref$usage,
    _ref$consumption = _ref.consumption,
    consumption = _ref$consumption === void 0 ? 0 : _ref$consumption,
    _ref$total = _ref.total,
    total = _ref$total === void 0 ? 1 : _ref$total,
    _ref$percent = _ref.percent,
    percent = _ref$percent === void 0 ? 0 : _ref$percent,
    style = _ref.style;
  var hex2Rgba = function hex2Rgba(bgColor) {
    var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
    var color = bgColor.slice(1); // 去掉'#'号
    var rgba = [parseInt('0x' + color.slice(0, 2)), parseInt('0x' + color.slice(2, 4)), parseInt('0x' + color.slice(4, 6)), alpha];
    return "rgba(".concat(rgba.toString(), ")");
  };
  var getHtml = function getHtml(container, view, datum) {
    var percent = total ? (datum.percent * 100).toFixed(2) + '%' : '--';
    return '<div style="color:#333;">' + '<p style="font-size: 20px; font-weight: 500; margin: 0">' + percent + '</p>' + '<p style="font-size: 14px; font-weight: 400; margin: 0; margin-top: 4px">' + title + '</p>' + '</div>';
  };
  var createConfig = {
    percent: percent,
    type: 'meter',
    startAngle: Math.PI,
    endAngle: Math.PI / 180,
    innerRadius: 0.75,
    range: {
      ticks: [0, total ? usage / total : 0, total ? consumption / total : 0, 1],
      width: 10,
      color: [hex2Rgba(color, 1), hex2Rgba(color, 0.5), hex2Rgba(color, 0.1)]
    },
    indicator: {
      pointer: {
        style: {
          opacity: 0
        }
      },
      pin: {
        style: {
          opacity: 0
        }
      }
    },
    axis: {
      label: null,
      subTickLine: {
        count: 10,
        style: {
          stroke: '#E0E7FF',
          fillOpacity: 1
        }
      }
    },
    statistic: {
      content: {
        offsetY: -5,
        customHtml: getHtml
      }
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    style: style
  }, /*#__PURE__*/React.createElement(Gauge, createConfig));
};
export default UsageCycle;