import { createVNode, createTextVNode } from "vue";
import "./styles/device.scss";
import { makeTagProps } from "../../composables/tag/index.mjs";
import { makeVariantProps, useVariant } from "../../composables/variant/index.mjs";
import { makeDeviceProps, useDevice } from "../../composables/device/index.mjs";
import { DeviceStatusBar } from "./device-status-bar.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
import { convertToUnit } from "../../utils/dist/index.mjs";
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: () => {
          var _a, _b;
          return [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"
          }, [(_a = slots.header) == null ? void 0 : _a.call(slots)])]), createVNode("div", {
            "class": "ve-device__app-main"
          }, [(_b = slots.default) == null ? void 0 : _b.call(slots)]), 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
