<template>
  <div id="dev-info">
    <div class="title">设备属性</div>
    <div class="name">
      <span>设备名称:</span><span>{{ devInfo.name }}</span>
    </div>
    <div class="state-info">
      <span>设备状态:</span><span>{{ devInfo.state }}</span>
    </div>
    <div class="state-info">
      <span>设备位置:</span><span>{{ devInfo.position }}</span>
    </div>
  </div>
</template>

<script setup>
import { defineProps, watch } from "vue";
// 接受参数
const params = defineProps(["devInfo"]);
watch(
  () => params.devInfo,
  (newValue, oldValue) => {
    console.log("监听");
    console.log(newValue, oldValue);
  }
);
</script>

<style lang="scss" scoped>
#dev-info {
  height: 300px;
  width: 200px;
  background-color: rgba(236, 236, 236, 0.836);
  position: absolute;
  z-index: 999;
  border-radius: 10px;
  padding: 5px;
  display: block;
  opacity: 0;
  .title {
    height: 20px;
    text-align: center;
  }
}
</style>
