<template>
  <div class="motherboard-container" v-bind="$attrs" :style="{
    width: width + 'px',
    height: height + 'px',
    position: 'relative',
  }">
    <svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" :viewBox="`0 0 800 600`"
      class="motherboard-svg">
      <image href="../equipments/svg/motherboard.svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" />
    </svg>
  </div>
  <Teleport to="#ComponentCapabilities" v-if="selectecComponentID === props.componentId">
    <MotherBoardCaps :jtagAddr="props.boardAddr" :jtagPort="toNumber(props.boardPort)" :jtagFreq="jtagFreq"
      @change-jtag-freq="changeJtagFreq" />
  </Teleport>
</template>

<script setup lang="tsx">
import MotherBoardCaps from "./MotherBoardCaps.vue";
import { ref, computed, watchEffect, inject } from "vue";
import { CanvasCurrentSelectedComponentID } from "../InjectKeys";
import { toNumber } from "lodash";

// 主板特有属性
export interface MotherBoardProps {
  size?: number;
  boardAddr?: string;
  boardPort?: string;
  componentId?: string;
}

const emit = defineEmits<{
  (e: "pinClick", pinId: string): void;
}>();

const props = withDefaults(defineProps<MotherBoardProps>(), getDefaultProps());
const selectecComponentID = inject(CanvasCurrentSelectedComponentID, ref(null));

const jtagFreq = ref("25 MHz");
function changeJtagFreq(text: string) {
  jtagFreq.value = text;
}

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

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

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

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

.motherboard-svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* 禁止鼠标交互 */
}
</style>
