<template>
  <div style="padding:20px;">
    <h2>MCU 对比</h2>
    <table border="1" cellpadding="6">
      <thead>
        <tr>
          <th>字段</th>
          <th v-for="m in mcus" :key="m.id">{{ m.name }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="key in fieldKeys" :key="key">
          <td><strong>{{ FIELD_LABELS[key] || key }}</strong></td>
          <td v-for="m in mcus" :key="m.id">{{ m[key] }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="$router.push('/')">返回</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const mcus = ref([]);
const fieldKeys = ref([]);

const FIELD_LABELS = {
  name: "Name",
  core_num: "Number of Cores",
  core_type: "Core Architecture",
  instruction_set: "Instruction Set",
  coremark: "CoreMark Score",
  coremark_per_mhz: "CoreMark per MHz",
  frequency: "Frequency (MHz)",
  flash: "Flash (KB)",
  rom: "ROM (KB)",
  ram: "RAM (KB)",
  sram: "SRAM (KB)",
  sram_in_rtc: "RTC SRAM (KB)",
  bus_width: "Bus Width (bit)",
  cache_type: "Cache Type",
  l1_cache_size: "L1 Cache (KB)",
  l2_cache_size: "L2 Cache (KB)",
  l3_cache_size: "L3 Cache (KB)",
  pipeline_depth: "Pipeline Depth",
  simd_support: "SIMD Support (1 = Yes, 0 = No)",
  fpu: "FPU Support (Single/Double Precision)",
  package: "Package",
  gpios: "Number of GPIOs",
  uarts: "Number of UARTs",
  i2cs: "Number of I2C Interfaces",
  i2ses: "Number of I2S Interfaces",
  spis: "Number of SPI Interfaces",
  spi_protocols: "Supported SPI Protocols",
  systems: "Supported Systems",
  manufacturer: "Manufacturer",
  link: "Product Link"
};

onMounted(async () => {
  const ids = route.query.ids.split(",");
  for (let id of ids) {
    const res = await fetch(`/api/mcus/${id}`);
    mcus.value.push(await res.json());
  }

  // Don't compare the "link" field
  fieldKeys.value = Object.keys(FIELD_LABELS).filter(k => k !== "link");
});
</script>
