<template>
  <div class="eth-component" :style="{ width: width + 'px', height: height + 'px' }">
    <img src="../equipments/svg/eth.svg" :width="width" :height="height" alt="以太网接口" class="svg-image"
      draggable="false" />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

interface Props {
  size?: number;
  devIPAddress?: string;
  devPort?: string;
}

const props = withDefaults(defineProps<Props>(), getDefaultProps());

// 计算实际宽高
const width = computed(() => 100 * props.size);
const height = computed(() => 60 * props.size);

// 向外暴露方法
defineExpose({
  getInfo: () => ({
    size: props.size,
    type: "ETH",
  }),
  // 主板没有引脚，但为了接口一致性，提供一个空的getPinPosition方法
  getPinPosition: () => null,
});
</script>

<script lang="ts">
// 添加一个静态方法来获取默认props
export function getDefaultProps() {
  return {
    size: 1,
    devIPAddress: "127.0.0.1",
    devPort: "1234",
  };
}
</script>

<style scoped>
.eth-component {
  display: block;
  user-select: none;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
}

.svg-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  /* 禁止鼠标交互 */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
</style>
