<template>
  <div :class="`device ${need_top_border ? 'top_border' : ''}`" v-if="data.ip_location || data.equipment_name">
    <p class="ip-location" v-if="data.ip_location">IP属地：{{ data.ip_location }}</p>
    <p class="device-name" v-if="data.equipment_name">{{ data.equipment_name }}</p>
  </div>
</template>

<script>
export default {
  name: 'Device',
  props: {
    need_top_border: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Object,
      default: () => {
        return {
          equipment_name: "",
          ip_location: "",
        }
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.device {
  font-size: j(12);
  min-height: j(10);
  color: var(--wl-text-color-placeholder, #c1c1c1);
  padding: $up-down-spacing 0;
  @extend %flex-between;

  .ip-location {
    flex:1;
    @include textEllipsis(1);
  }

  .device-name {
    flex:1;
    text-align: right;
    @include textEllipsis(1);
  }

  &.top_border {
    @include halfBorder('top', #dcdcdc);
  }
}
</style>
