import { ref, onBeforeUnmount, computed, unref, createVNode, createTextVNode } from "vue";
import "./styles/device-status-bar.scss";
import { makeTagProps } from "../../composables/tag/index.mjs";
import { makeColorProps, useColor } from "../../composables/color/index.mjs";
import { genericComponent } from "../../utils/define-component.mjs";
import { convertToUnit } from "../../utils/dist/index.mjs";
const DeviceStatusBar = genericComponent()({
  name: "VeDeviceStatusBar",
  props: {
    height: {
      type: Number,
      default: 20
    },
    battery: {
      type: Number,
      default: 100
    },
    operator: {
      type: String,
      default: "Z+"
    },
    ...makeTagProps(),
    ...makeColorProps()
  },
  setup(props) {
    function getClockValue() {
      const now = new Date();
      const hour = now.getHours();
      const minute = now.getMinutes();
      let text = hour >= 12 ? "\u4E0B\u5348" : "\u4E0A\u5348";
      text += `${Math.abs(hour - 12)}:`;
      text += minute > 10 ? minute : `0${minute}`;
      return text;
    }
    const clock = ref(getClockValue());
    const clockTimer = setInterval(() => {
      clock.value = getClockValue();
    }, 1e3);
    onBeforeUnmount(() => {
      clearInterval(clockTimer);
    });
    const {
      colorClasses,
      colorStyles
    } = useColor(computed(() => {
      const {
        textColor,
        color
      } = unref(props);
      return {
        background: color,
        text: textColor
      };
    }));
    return () => {
      return createVNode(props.tag, {
        "class": ["ve-device-status-bar", colorClasses.value],
        "style": [{
          height: convertToUnit(props.height)
        }, colorStyles.value]
      }, {
        default: () => [createVNode("div", {
          "class": "ve-device-status-bar__clock"
        }, [clock.value]), createVNode("div", {
          "class": "ve-device-status-bar__mobile-signal"
        }, [[...Array(4)].map((_) => createVNode("div", null, null))]), createVNode("div", {
          "class": "ve-device-status-bar__mobile-operator"
        }, [props.operator]), createVNode("div", {
          "class": "ve-device-status-bar__wifi-signal"
        }, [[...Array(3)].map((_) => createVNode("div", null, null))]), createVNode("div", {
          "class": "ve-device-status-bar__spacer"
        }, null), createVNode("div", {
          "class": "ve-device-status-bar__battery-percentage"
        }, [props.battery, createTextVNode("%")]), createVNode("div", {
          "class": "ve-device-status-bar__battery"
        }, [createVNode("div", {
          "style": {
            width: `${props.battery}%`
          }
        }, null)])]
      });
    };
  }
});
export {
  DeviceStatusBar
};
//# sourceMappingURL=device-status-bar.mjs.map
