<template>
  <div class="motherboard-container" :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>
</template>

<script setup lang="tsx">
import { JtagClient, type FileParameter } from "@/APIClient";
import z from "zod";
import { useEquipments } from "@/stores/equipments";
import UploadCard from "@/components/UploadCard.vue";
import { useDialogStore } from "@/stores/dialog";
import { toNumber, toString } from "lodash";
import { computed, ref, defineComponent, watch } from "vue";

// 主板特有属性
interface MotherBoardProps {
  size?: number;
  jtagAddr?: string;
  jtagPort?: string;
}

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

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

watch([props.jtagAddr, props.jtagPort], () => {
  eqps.jtagIPAddr = props.jtagAddr;
  eqps.jtagPort = props.jtagPort;
});

// 向外暴露方法
defineExpose({
  getInfo: () => ({
    size: props.size,
    type: "motherboard",
  }),
  // 主板没有引脚，但为了接口一致性，提供一个空的getPinPosition方法
  getPinPosition: () => null,
  getCapabilities: () => {
    // 返回组件定义而不是直接返回JSX
    return defineComponent({
      name: "MotherBoardCapabilities",
      props: {
        jtagAddr: {
          type: String,
          default: props.jtagAddr,
        },
        jtagPort: {
          type: String,
          default: props.jtagPort,
        },
      },
      setup(props) {
        const jtagController = new JtagClient();
        const dialog = useDialogStore();

        // 使用传入的属性或默认值
        const jtagIDCode = ref("");
        const boardAddress = computed(() => props.jtagAddr);
        const boardPort = computed(() => toNumber(props.jtagPort));

        async function uploadBitstream(event: Event, bitstream: File) {
          if (!boardAddress.value || !boardPort.value) {
            dialog.error("开发板地址或端口空缺");
            return;
          }

          const fileParam = {
            data: bitstream,
            fileName: bitstream.name,
          };

          try {
            const resp = await jtagController.uploadBitstream(
              boardAddress.value,
              fileParam,
            );
            return resp;
          } catch (e) {
            dialog.error("上传错误");
          }
        }

        async function downloadBitstream() {
          if (!boardAddress.value || !boardPort.value) {
            dialog.error("开发板地址或端口空缺");
            return;
          }

          try {
            const resp = await jtagController.downloadBitstream(
              boardAddress.value,
              boardPort.value,
            );
            return resp;
          } catch (e) {
            dialog.error("上传错误");
            console.error(e);
          }
        }

        watch([boardAddress, boardPort], () => {
          if (
            z.string().ip().safeParse(boardAddress).success &&
            z.number().positive().safeParse(boardPort).success
          )
            getIDCode();
        });

        async function getIDCode() {
          if (!boardAddress.value || !boardPort.value) {
            dialog.error("开发板地址或端口空缺");
            return;
          }

          try {
            const resp = await jtagController.getDeviceIDCode(
              boardAddress.value,
              boardPort.value,
            );
            jtagIDCode.value = toString(resp);
          } catch (e) {
            dialog.error("获取IDCode错误");
            console.error(e);
          }
        }

        return () => (
          <div>
            <h1 class="font-bold text-center text-2xl">Jtag</h1>
            <div class="flex">
              <p class="grow">IDCode: {jtagIDCode.value}</p>
              <button class="btn btn-circle w-8 h-8" onClick={getIDCode}>
                <svg
                  class="icon opacity-70"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4865"
                  width="200"
                  height="200"
                >
                  <path
                    d="M894.481158 505.727133c0 49.589418-9.711176 97.705276-28.867468 143.007041-18.501376 43.74634-44.98454 83.031065-78.712713 116.759237-33.728172 33.728172-73.012897 60.211337-116.759237 78.712713-45.311998 19.156292-93.417623 28.877701-143.007041 28.877701s-97.695043-9.721409-142.996808-28.877701c-43.756573-18.501376-83.031065-44.98454-116.76947-78.712713-33.728172-33.728172-60.211337-73.012897-78.712713-116.759237-19.156292-45.301765-28.867468-93.417623-28.867468-143.007041 0-49.579185 9.711176-97.695043 28.867468-142.996808 18.501376-43.74634 44.98454-83.031065 78.712713-116.759237 33.738405-33.728172 73.012897-60.211337 116.76947-78.712713 45.301765-19.166525 93.40739-28.877701 142.996808-28.877701 52.925397 0 104.008842 11.010775 151.827941 32.745798 46.192042 20.977777 86.909395 50.79692 121.016191 88.608084 4.389984 4.860704 8.646937 9.854439 12.781094 14.97097l0-136.263453c0-11.307533 9.168824-20.466124 20.466124-20.466124 11.307533 0 20.466124 9.15859 20.466124 20.466124l0 183.64253c0 5.433756-2.148943 10.632151-5.986341 14.46955-3.847631 3.837398-9.046027 5.996574-14.479783 5.996574l-183.64253-0.020466c-11.307533 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l132.293025 0.020466c-3.960195-4.952802-8.063653-9.782807-12.289907-14.479783-30.320563-33.605376-66.514903-60.098773-107.549481-78.753645-42.467207-19.289322-87.850837-29.072129-134.902456-29.072129-87.195921 0-169.172981 33.9533-230.816946 95.597265-61.654198 61.654198-95.597265 143.621025-95.597265 230.816946s33.943067 169.172981 95.597265 230.816946c61.643965 61.654198 143.621025 95.607498 230.816946 95.607498s169.172981-33.9533 230.816946-95.607498c61.654198-61.643965 95.597265-143.621025 95.597265-230.816946 0-11.2973 9.168824-20.466124 20.466124-20.466124C885.322567 485.261009 894.481158 494.429833 894.481158 505.727133z"
                    p-id="4866"
                  ></path>
                </svg>
              </button>
            </div>
            <div class="divider"></div>
            <UploadCard
              class="bg-base-200"
              upload-event={uploadBitstream}
              download-event={downloadBitstream}
              defaultFile={eqps.jtagBitstream}
              onFinishedUpload={(file: File) => {
                eqps.jtagBitstream = file;
              }}
            >
              {" "}
            </UploadCard>
          </div>
        );
      },
    });
  },
});
</script>

<script lang="tsx">
// 添加一个静态方法来获取默认props
export function getDefaultProps() {
  return {
    size: 1,
    jtagAddr: "127.0.0.1",
    jtagPort: "1234",
  };
}
</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>
