import "../../../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.mjs";
import Flipper from "../../../../../components/Pages/Flipper/index.vue.mjs";
import { defineComponent, watch, onMounted, resolveComponent, openBlock, createElementBlock, withDirectives, createVNode, withCtx, Fragment, renderList, createBlock, createCommentVNode } from "../../../../../../node_modules/.pnpm/@vue_runtime-core@3.3.4/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.mjs";
import { useCssVars, vShow } from "../../../../../../node_modules/.pnpm/@vue_runtime-dom@3.3.4/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.mjs";
import { unref, toRefs, ref } from "../../../../../../node_modules/.pnpm/@vue_reactivity@3.3.4/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.mjs";
const _hoisted_1 = { key: 0 };
const _hoisted_2 = { key: 1 };
const _hoisted_3 = { key: 1 };
const _hoisted_4 = { key: 2 };
const _hoisted_5 = { key: 3 };
const _hoisted_6 = { key: 4 };
const _hoisted_7 = { key: 5 };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    chartConfig: {
      type: Object,
      required: true
    }
  },
  setup(__props) {
    const props = __props;
    useCssVars((_ctx) => ({
      "a0c42b24": `${unref(w)}px`,
      "a26aec42": `${unref(h)}px`,
      "225bc0d6": `${unref(flipperWidth)}px`,
      "bd636264": `${unref(flipperHeight)}px`,
      "48414a19": unref(flipperTextColor)
    }));
    const { w, h } = toRefs(props.chartConfig.attr);
    const {
      dataset,
      useEndDate,
      endDate,
      style,
      showDay,
      flipperBgColor,
      flipperTextColor,
      flipperWidth,
      flipperHeight,
      flipperRadius,
      flipperGap,
      flipperType,
      flipperSpeed
    } = toRefs(props.chartConfig.option);
    const countdownRef = ref();
    const countdownActive = ref(false);
    const totalDuration = ref(dataset.value * 1e3);
    const daysFlipperData = ref([]);
    const hoursFlipperData = ref([]);
    const minutesFlipperData = ref([]);
    const secondsFlipperData = ref([]);
    const getFlipperData = (val) => {
      const len = Math.max(val.toString().length, 2);
      return val.toString().padStart(len, "0").split("");
    };
    const updateDatasetHandler = (hours, minutes, seconds) => {
      const days = Math.floor(hours / 24);
      daysFlipperData.value = getFlipperData(days);
      hoursFlipperData.value = getFlipperData(showDay.value ? hours % 24 : hours);
      minutesFlipperData.value = getFlipperData(minutes);
      secondsFlipperData.value = getFlipperData(seconds);
    };
    const renderCountdown = ({ hours, minutes, seconds }) => {
      updateDatasetHandler(hours, minutes, seconds);
    };
    const updateTotalDuration = () => {
      var _a, _b;
      try {
        countdownActive.value = false;
        totalDuration.value = useEndDate.value ? endDate.value - (/* @__PURE__ */ new Date()).getTime() : dataset.value * 1e3;
        ((_a = countdownRef.value) == null ? void 0 : _a.reset) && ((_b = countdownRef.value) == null ? void 0 : _b.reset());
        countdownActive.value = true;
      } catch (error) {
        console.log(error);
      }
    };
    watch(
      () => props.chartConfig.option.dataset,
      () => {
        updateTotalDuration();
      },
      {
        immediate: true
      }
    );
    watch(
      () => props.chartConfig.option.endDate,
      () => {
        updateTotalDuration();
      },
      {
        immediate: true
      }
    );
    watch(
      () => props.chartConfig.option.useEndDate,
      () => {
        updateTotalDuration();
      },
      {
        immediate: true
      }
    );
    onMounted(() => {
      updateTotalDuration();
    });
    return (_ctx, _cache) => {
      const _component_n_countdown = resolveComponent("n-countdown");
      const _component_n_space = resolveComponent("n-space");
      return openBlock(), createElementBlock("div", null, [
        withDirectives(createVNode(_component_n_countdown, {
          ref_key: "countdownRef",
          ref: countdownRef,
          duration: totalDuration.value,
          render: renderCountdown,
          active: countdownActive.value
        }, null, 8, ["duration", "active"]), [
          [vShow, false]
        ]),
        createVNode(_component_n_space, {
          class: "go-decorates-more-countdown",
          size: unref(flipperGap),
          align: "center",
          justify: "center"
        }, {
          default: withCtx(() => [
            unref(showDay) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
              (openBlock(true), createElementBlock(Fragment, null, renderList(daysFlipperData.value, (item, index) => {
                return openBlock(), createBlock(unref(Flipper), {
                  count: item,
                  width: unref(flipperWidth),
                  height: unref(flipperHeight),
                  "front-color": unref(flipperTextColor),
                  "back-color": unref(flipperBgColor),
                  radius: unref(flipperRadius),
                  "flip-type": unref(flipperType),
                  duration: unref(flipperSpeed),
                  key: index,
                  class: "go-d-block"
                }, null, 8, ["count", "width", "height", "front-color", "back-color", "radius", "flip-type", "duration"]);
              }), 128)),
              unref(style) === "时分秒" ? (openBlock(), createElementBlock("div", _hoisted_1, "天")) : (openBlock(), createElementBlock("div", _hoisted_2, ":"))
            ], 64)) : createCommentVNode("", true),
            (openBlock(true), createElementBlock(Fragment, null, renderList(hoursFlipperData.value, (item, index) => {
              return openBlock(), createBlock(unref(Flipper), {
                count: item,
                width: unref(flipperWidth),
                height: unref(flipperHeight),
                "front-color": unref(flipperTextColor),
                "back-color": unref(flipperBgColor),
                radius: unref(flipperRadius),
                "flip-type": unref(flipperType),
                duration: unref(flipperSpeed),
                key: index,
                class: "go-d-block"
              }, null, 8, ["count", "width", "height", "front-color", "back-color", "radius", "flip-type", "duration"]);
            }), 128)),
            unref(style) === "时分秒" ? (openBlock(), createElementBlock("div", _hoisted_3, "时")) : (openBlock(), createElementBlock("div", _hoisted_4, ":")),
            (openBlock(true), createElementBlock(Fragment, null, renderList(minutesFlipperData.value, (item, index) => {
              return openBlock(), createBlock(unref(Flipper), {
                count: item,
                width: unref(flipperWidth),
                height: unref(flipperHeight),
                "front-color": unref(flipperTextColor),
                "back-color": unref(flipperBgColor),
                radius: unref(flipperRadius),
                "flip-type": unref(flipperType),
                duration: unref(flipperSpeed),
                key: index,
                class: "go-d-block"
              }, null, 8, ["count", "width", "height", "front-color", "back-color", "radius", "flip-type", "duration"]);
            }), 128)),
            unref(style) === "时分秒" ? (openBlock(), createElementBlock("div", _hoisted_5, "分")) : (openBlock(), createElementBlock("div", _hoisted_6, ":")),
            (openBlock(true), createElementBlock(Fragment, null, renderList(secondsFlipperData.value, (item, index) => {
              return openBlock(), createBlock(unref(Flipper), {
                count: item,
                width: unref(flipperWidth),
                height: unref(flipperHeight),
                "front-color": unref(flipperTextColor),
                "back-color": unref(flipperBgColor),
                radius: unref(flipperRadius),
                "flip-type": unref(flipperType),
                duration: unref(flipperSpeed),
                key: index,
                class: "go-d-block"
              }, null, 8, ["count", "width", "height", "front-color", "back-color", "radius", "flip-type", "duration"]);
            }), 128)),
            unref(style) === "时分秒" ? (openBlock(), createElementBlock("div", _hoisted_7, "秒")) : createCommentVNode("", true)
          ]),
          _: 1
        }, 8, ["size"])
      ]);
    };
  }
});
export {
  _sfc_main as default
};
