import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
import "./styles/device.css";
import { convertToUnit } from "@veno-ui/utils";
import { defineComponent } from "../../utils";
import { makeTagProps } from "../../composables/tag";
import { makeVariantProps, useVariant } from "../../composables/variant";
import { makeDeviceProps, useDevice } from "../../composables/device";
import { DeviceStatusBar } from "./device-status-bar";
const Device = defineComponent({
  name: "VeDevice",
  props: {
    battery: {
      type: Number,
      default: 100
    },
    operator: {
      type: String,
      default: "Z+"
    },
    headerColor: String,
    ...makeDeviceProps(),
    ...makeTagProps(),
    ...makeVariantProps()
  },
  setup(props, {
    slots
  }) {
    const {
      colorClasses,
      colorStyles,
      variantClasses
    } = useVariant(props);
    const {
      deviceModel,
      deviceStyles
    } = useDevice(props);
    return () => {
      return _createVNode(props.tag, {
        "class": ["ve-device", variantClasses.value, colorClasses.value],
        "style": [deviceStyles.value, colorStyles.value]
      }, {
        default: () => [_createVNode("div", {
          "class": "ve-device__app-header",
          "style": {
            backgroundColor: props.headerColor
          }
        }, [deviceModel.value.statusBarHeight > 0 && _createVNode(DeviceStatusBar, {
          "height": deviceModel.value.statusBarHeight,
          "battery": props.battery,
          "operator": props.operator
        }, null), slots.header && _createVNode("div", {
          "class": "ve-device__app-bar"
        }, [slots.header?.()])]), _createVNode("div", {
          "class": "ve-device__app-main"
        }, [slots.default?.()]), props.autoHeight && typeof deviceModel.value.height === "number" && _createVNode("div", {
          "class": "ve-device__height-tip",
          "style": {
            top: convertToUnit(deviceModel.value.height - 21)
          }
        }, [props.model, _createTextVNode("\u9AD8\u5EA6")])]
      });
    };
  }
});
export {
  Device
};
//# sourceMappingURL=device.mjs.map
