<!-- 管理员-设备详情 -->
<template>
  <div class="detail">
    <NavBar title="设备详情" />
    <div id="container" style="width:100%;height: 65%;">
      <Map :position="position" />
    </div>
    <div class="info">
      <h3 class="title">设备基本信息</h3>
      <div class="text-area">
        <span class="text-title">安装位置： </span>
        <span class="text"> {{ equipmentInfo.position }}</span>
      </div>
      <div class="text-area">
        <span class="text-title">设备编号： </span>
        <span class="text"> {{ equipmentInfo.devCode }}</span>
      </div>
      <div class="text-area">
        <span class="text-title">设备状态： </span>
        <span :class="equipmentInfo.status === '正常' ? 'online' : equipmentInfo.status === '离线' ? 'offline' : equipmentInfo.status === '报警' ? 'alarm' : 'text'"> {{ equipmentInfo.status }}</span>
      </div>
    </div>
  </div>
  
</template>
<script lang="ts" name="Detail" setup>
import NavBar from '../../../components/navBar/navBar.vue'
import Map from '../../../components/map/map.vue'
const $route = useRoute()
const position = ref<string[]>([]) // 经纬度
const equipmentInfo = ref({
  devCode: "", // 设备编号
  doorName: "", // 设备名称
  position: "", // 详细地址
  latitude: "", //纬度
  longtitude: "", // 经度
  status: "", // 设备状态
})
onMounted(() => {
  equipmentInfo.value.devCode = $route.query.devCode as string  // 设备编号
  equipmentInfo.value.doorName = $route.query.doorName as string  // 设备名称
  equipmentInfo.value.position = $route.query.position as string  // 详细地址
  position.value = [$route.query.longtitude as string, $route.query.latitude as string] // 经纬度
  equipmentInfo.value.status = $route.query.status as string  // 设备状态
})
</script>
<style lang="scss" scoped>

.detail {
  width: 100%;
  height: 100%;
  padding: 50px 0;
  box-sizing: border-box;
  .info {
    padding: 32px 10px;
    .title {
      font-weight: 600;
      font-size: 24px;
      margin-bottom: 20px;
    }
    .text-area {
      display: flex;
      line-height: 32px;
      .text-title {
        font-size: 20px;
        // font-weight: 600;
        white-space: nowrap;
      }
      .text {
        font-size: 20px;
        color: #978888;
      }
      .online {
        font-size: 18px;
        color: #1ca951;
      }
      .alarm {
        font-size: 18px;
        color: #d54941;
      }
      .offline {
        font-size: 18px;
        color: #6c6c6c;
      }
    }
  }
}
</style>
<style lang="scss">
.detail {
}

</style>