import { computed as p, ref as s, watch as W, onMounted as q, onBeforeUnmount as J, openBlock as u, createElementBlock as v, normalizeStyle as C, createVNode as K, createCommentVNode as d, createBlock as A, unref as i, createSlots as Q, withCtx as _, renderSlot as y, normalizeProps as N, guardReactiveProps as M, normalizeClass as L, Fragment as Z, renderList as ee, toDisplayString as te } from "vue";
import { u as ae, c as le, t as se, o as ne, e as oe, v as U, X as re, i as ue, f as ie } from "./index-CguVaFlt.js";
import { _ as ce } from "./Title-DbTGPg4G.js";
import { u as he, U as ve } from "./usePrinter-ClsMRVJG.js";
import { t as de, u as ye } from "./useResponsive-NZB-WLRF.js";
import fe from "./vue-ui-skeleton-ChHLL5Hw.js";
import { u as X } from "./useNestedProp-BbEbJmgv.js";
import { _ as ge } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const me = ["id"], pe = ["xmlns", "viewBox"], ke = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-linecap"], we = ["cx", "cy", "r", "stroke", "stroke-width"], be = ["x", "y", "font-size", "fill", "font-weight"], Ce = {
  key: 3,
  class: "vue-data-ui-watermark"
}, _e = {
  __name: "vue-ui-wheel",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  setup(B, { expose: G }) {
    const n = B, { vue_ui_wheel: T } = ae(), k = p(() => !!n.dataset && Object.keys(n.dataset).length), w = s(le()), E = s(null), x = s(0), f = s(null), I = s(null), e = p(() => {
      const t = X({
        userConfig: n.config,
        defaultConfig: T
      });
      return t.theme ? {
        ...X({
          userConfig: se.vue_ui_wheel[t.theme] || n.config,
          defaultConfig: t
        })
      } : t;
    }), { isPrinting: $, isImaging: F, generatePdf: P, generateImage: z } = he({
      elementId: w.value,
      fileName: e.value.style.chart.title.text || "vue-ui-wheel"
    }), l = s({
      size: 360,
      height: 360,
      width: 360
    }), b = s(e.value.style.chart.layout.percentage.fontSize), o = p(() => ({
      radius: Math.min(l.value.width, l.value.height) * 0.9 / 2,
      centerX: l.value.width / 2,
      centerY: l.value.height / 2
    }));
    function O(t, c = 1) {
      return {
        x: o.value.centerX + o.value.radius * Math.cos(29.85 + t * Math.PI / 180) * c,
        y: o.value.centerY + o.value.radius * Math.sin(29.85 + t * Math.PI / 180) * c
      };
    }
    const r = s(e.value.style.chart.animation.use ? 0 : n.dataset.percentage || 0);
    W(() => n.dataset.percentage, () => {
      r.value = s(e.value.style.chart.animation.use ? 0 : n.dataset.percentage || 0), S();
    });
    const g = s(null);
    q(() => {
      if (ne(n.dataset) && oe({
        componentName: "VueUiWheel",
        type: "dataset"
      }), S(), e.value.responsive) {
        const t = de(() => {
          const { width: c, height: a } = ye({
            chart: f.value,
            title: e.value.style.chart.title.text ? I.value : null
          });
          l.value.width = c, l.value.height = a, b.value = e.value.style.chart.layout.percentage.fontSize / 360 * Math.min(c, a);
        });
        g.value = new ResizeObserver(t), g.value.observe(f.value.parentNode);
      }
    }), J(() => {
      g.value && g.value.disconnect();
    });
    function S() {
      let t = 0, c = e.value.style.chart.animation.speed, a = 5e-3 * e.value.style.chart.animation.acceleration;
      function h() {
        r.value += c + t, t += a, r.value < (n.dataset.percentage || 0) ? requestAnimationFrame(h) : r.value = n.dataset.percentage || 0;
      }
      e.value.style.chart.animation.use && (r.value = 0, h());
    }
    const j = p(() => {
      const t = [];
      for (let a = 0; a < 100; a += 1) {
        const h = r.value > a ? e.value.style.chart.layout.wheel.ticks.activeColor : e.value.style.chart.layout.wheel.ticks.inactiveColor, { x: R, y: V } = O(l.value.size / 100 * a), { x: Y, y: H } = O(l.value.size / 100 * a, 0.9);
        t.push({
          x1: R,
          y1: V,
          x2: Y,
          y2: H,
          color: e.value.style.chart.layout.wheel.ticks.gradient.show ? U(h, a / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : h
        });
      }
      return t;
    }), m = s(!1);
    function D(t) {
      m.value = t, x.value += 1;
    }
    return G({
      generatePdf: P,
      generateImage: z
    }), (t, c) => (u(), v("div", {
      class: "vue-ui-wheel",
      ref_key: "wheelChart",
      ref: f,
      id: w.value,
      style: C(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`)
    }, [
      e.value.style.chart.title.text ? (u(), v("div", {
        key: 0,
        ref_key: "chartTitle",
        ref: I,
        style: C(`width:100%;background:${e.value.style.chart.backgroundColor};padding-bottom:12px`)
      }, [
        K(ce, {
          config: {
            title: {
              cy: "wheel-title",
              ...e.value.style.chart.title
            },
            subtitle: {
              cy: "wheel-subtitle",
              ...e.value.style.chart.title.subtitle
            }
          }
        }, null, 8, ["config"])
      ], 4)) : d("", !0),
      e.value.userOptions.show && k.value ? (u(), A(ve, {
        ref_key: "details",
        ref: E,
        key: `user_options_${x.value}`,
        backgroundColor: e.value.style.chart.backgroundColor,
        color: e.value.style.chart.color,
        isPrinting: i($),
        isImaging: i(F),
        uid: w.value,
        hasPdf: e.value.userOptions.buttons.pdf,
        hasImg: e.value.userOptions.buttons.img,
        hasFullscreen: e.value.userOptions.buttons.fullscreen,
        hasXls: !1,
        isFullscreen: m.value,
        titles: { ...e.value.userOptions.buttonTitles },
        chartElement: f.value,
        onToggleFullscreen: D,
        onGeneratePdf: i(P),
        onGenerateImage: i(z)
      }, Q({ _: 2 }, [
        t.$slots.optionPdf ? {
          name: "optionPdf",
          fn: _(() => [
            y(t.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        t.$slots.optionImg ? {
          name: "optionImg",
          fn: _(() => [
            y(t.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        t.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: _(({ toggleFullscreen: a, isFullscreen: h }) => [
            y(t.$slots, "optionFullscreen", N(M({ toggleFullscreen: a, isFullscreen: h })), void 0, !0)
          ]),
          key: "2"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "onGeneratePdf", "onGenerateImage"])) : d("", !0),
      k.value ? (u(), v("svg", {
        key: 2,
        xmlns: i(re),
        class: L({ "vue-data-ui-fullscreen--on": m.value, "vue-data-ui-fulscreen--off": !m.value }),
        viewBox: `0 0 ${l.value.width <= 0 ? 10 : l.value.width} ${l.value.height <= 0 ? 10 : l.value.height}`,
        style: C(`max-width:100%;overflow:visible;background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color}`)
      }, [
        (u(!0), v(Z, null, ee(j.value, (a, h) => (u(), v("line", {
          x1: a.x1,
          x2: a.x2,
          y1: a.y1,
          y2: a.y2,
          stroke: a.color,
          "stroke-width": 5 / 360 * Math.min(l.value.width, l.value.height),
          "stroke-linecap": e.value.style.chart.layout.wheel.ticks.rounded ? "round" : "butt",
          class: L({ "vue-ui-tick-animated": e.value.style.chart.animation.use && h <= r.value })
        }, null, 10, ke))), 256)),
        e.value.style.chart.layout.innerCircle.show ? (u(), v("circle", {
          key: 0,
          cx: o.value.centerX,
          cy: o.value.centerY,
          r: o.value.radius * 0.8 <= 0 ? 1e-4 : o.value.radius * 0.8,
          stroke: e.value.style.chart.layout.innerCircle.stroke,
          "stroke-width": e.value.style.chart.layout.innerCircle.strokeWidth,
          fill: "none"
        }, null, 8, we)) : d("", !0),
        e.value.style.chart.layout.percentage.show ? (u(), v("text", {
          key: 1,
          x: o.value.centerX,
          y: o.value.centerY + b.value / 3,
          "font-size": b.value,
          fill: e.value.style.chart.layout.wheel.ticks.gradient.show ? i(U)(e.value.style.chart.layout.wheel.ticks.activeColor, r.value / 100 * (e.value.style.chart.layout.wheel.ticks.gradient.shiftHueIntensity / 100)) : e.value.style.chart.layout.wheel.ticks.activeColor,
          "text-anchor": "middle",
          "font-weight": e.value.style.chart.layout.percentage.bold ? "bold" : "normal",
          style: { "font-variant-numeric": "tabluar-nums" }
        }, te(i(ue)(
          e.value.style.chart.layout.percentage.formatter,
          r.value,
          i(ie)({
            v: r.value,
            s: "%",
            r: e.value.style.chart.layout.percentage.rounding
          })
        )), 9, be)) : d("", !0),
        y(t.$slots, "svg", { svg: l.value }, void 0, !0)
      ], 14, pe)) : d("", !0),
      t.$slots.watermark ? (u(), v("div", Ce, [
        y(t.$slots, "watermark", N(M({ isPrinting: i($) || i(F) })), void 0, !0)
      ])) : d("", !0),
      k.value ? d("", !0) : (u(), A(fe, {
        key: 4,
        config: {
          type: "wheel",
          style: {
            backgroundColor: e.value.style.chart.backgroundColor,
            wheel: {
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"]))
    ], 12, me));
  }
}, Ae = /* @__PURE__ */ ge(_e, [["__scopeId", "data-v-a9569c10"]]);
export {
  Ae as default
};
