<!-- 设备详情弹窗 -->
<template>
    <div class="container">
        <div class="title">
            <div class="text">设备详情</div>
            <div class="close" @click="close">x</div>
        </div>
        <div class="item">设备名称 : {{ device.deviceName }}</div>
        <div class="item">设备信息 : {{ device.produceCode }}</div>
        <div class="item">设备ID : {{ device.deviceId }}</div>
        <div class="item">IP地址 : {{ device.deviceIp }}</div>
        <div class="item">地址 : {{ device.deviceAddress }}</div>
    </div>
</template>

<script>
export default {
    name: 'detailDevice',
    data() {
    return {
      overlay: null,
      infoWindow: null,
      device:{}
    }
  },
  methods:{
    // 初始化
    initialize(e) {
      this.overlay = e.overlay;
      this.infoWindow = e.infoWindow;
      this.device = e.device
    },
    //关闭
    close() {
      this.infoWindow.close();
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
    width: 340px;
    height: 194px;
    padding: 10px;
    background-image: url("../../assets/kitchen/地图详情背景.png");

    .title {
        font-size: 16px;
        font-weight: 700;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;

        .close {
            color: #ccc;
            &:hover{
                cursor: pointer;
            }
        }
    }

    .item {
        padding: 0 5px;
        color: #111213;
        font-size: 14px;
        margin: 10px;
        border-bottom: 1px solid #ccc;
    }
}
</style>