<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 :jtagFreq="jtagFreq" :exam-id="examId" @change-jtag-freq="changeJtagFreq" />
  </Teleport>
</template>

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

// 主板特有属性
export interface MotherBoardProps {
  size: number;
  componentId?: string;
  examId?: string; // 新增examId属性
}

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,
  };
}
</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>
