"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _classNames = _interopRequireDefault(require("../../_util/classNames"));
const viewSize = 100;
const borderWidth = viewSize / 5;
const radius = viewSize / 2 - borderWidth / 2;
const circumference = radius * 2 * Math.PI;
const position = 50;
const CustomCircle = (0, _vue.defineComponent)({
  inheritAttrs: false,
  props: ['dotClassName', 'style', 'hasCircleCls'],
  setup(props) {
    return () => {
      const {
        dotClassName,
        style,
        hasCircleCls
      } = props;
      return (0, _vue.createVNode)("circle", {
        "class": (0, _classNames.default)(`${dotClassName}-circle`, {
          [`${dotClassName}-circle-bg`]: hasCircleCls
        }),
        "r": radius,
        "cx": position,
        "cy": position,
        "stroke-width": borderWidth,
        "style": style
      }, null);
    };
  }
});
var _default = exports.default = (0, _vue.defineComponent)({
  inheritAttrs: false,
  props: ['prefixCls', 'percent'],
  setup(props) {
    const dotClassName = `${props.prefixCls}-dot`;
    const holderClassName = `${dotClassName}-holder`;
    const hideClassName = `${holderClassName}-hidden`;
    const render = (0, _vue.ref)(false);
    // ==================== Visible =====================
    (0, _vue.watch)(() => props.percent !== 0, isNotZero => {
      if (isNotZero) {
        render.value = true;
      }
    }, {
      immediate: true,
      flush: 'sync'
    });
    // ==================== Progress ====================
    const safePtg = (0, _vue.computed)(() => Math.max(Math.min(props.percent, 100), 0));
    return () => {
      if (!render.value) {
        return null;
      }
      const circleStyle = {
        strokeDashoffset: `${circumference / 4}`,
        strokeDasharray: `${circumference * safePtg.value / 100} ${circumference * (100 - safePtg.value) / 100}`
      };
      return (0, _vue.createVNode)("span", {
        "class": (0, _classNames.default)(holderClassName, `${dotClassName}-progress`, safePtg.value <= 0 && hideClassName)
      }, [(0, _vue.createVNode)("svg", {
        "viewBox": `0 0 ${viewSize} ${viewSize}`,
        "role": "progressbar",
        "aria-valuemin": 0,
        "aria-valuemax": 100,
        "aria-valuenow": safePtg.value
      }, [(0, _vue.createVNode)(CustomCircle, {
        "dotClassName": dotClassName,
        "hasCircleCls": true
      }, null), (0, _vue.createVNode)(CustomCircle, {
        "dotClassName": dotClassName,
        "style": circleStyle
      }, null)])]);
    };
  }
});