<script setup>
import { inject, ref, watch } from "vue";
import SystemInfoModalContent from "./SystemInfoModalContent.vue";


const { selectedDevice: data } = inject("system_selectedDevice")

const position = ref({
  left: "0px",
  top: "0px",
  display: "none",
});

watch(
  data,
  (newValue) => {
    if (!newValue.value) {
      position.value = {
        display: "none"
      };
    } else {
      position.value = {
        ...data.value.initPos,
        display: "block"
      };
    }

  }, {
  deep: true,
}
);
</script>

<template>
  <Modal id="system_info_modal" :onCancel="onCancel" width="600" :draggable="!data?.isMobile" :backdrop="false"
    :modalStyle="position" class="-translate-x-1/2 -translate-y-1/2">
    <template #modalContent>
      <SystemInfoModalContent />
    </template>
  </Modal>
</template>

<style lang="scss" scoped></style>
