<script setup lang="ts">
import { computed } from "vue";
import EChartPanel from "../components/EChartPanel.vue";
import MetricStrip from "../components/MetricStrip.vue";
import { useSpc } from "../composables/useSpc";
import { createCapabilityBarOption } from "../utils/chartOptions";

const { result } = useSpc();

const metrics = computed(() => {
  const cpk = result.value?.Cpk;
  if (!cpk) return [];
  return [
    { label: "Cp", value: cpk.Cp, tone: cpk.Cp >= 1.33 ? ("ok" as const) : ("warn" as const) },
    { label: "Cpk", value: cpk.Cpk, tone: cpk.Cpk >= 1.33 ? ("ok" as const) : ("warn" as const) },
    { label: "Pp", value: cpk.Pp, tone: cpk.Pp >= 1.33 ? ("ok" as const) : ("warn" as const) },
    { label: "Ppk", value: cpk.Ppk, tone: cpk.Ppk >= 1.33 ? ("ok" as const) : ("warn" as const) },
    { label: "USL", value: cpk.USL },
    { label: "LSL", value: cpk.LSL }
  ];
});

const capabilityOption = computed(() => (result.value?.Cpk ? createCapabilityBarOption(result.value.Cpk) : null));
</script>

<template>
  <article class="page-stack">
    <MetricStrip v-if="metrics.length" :metrics="metrics" />
    <EChartPanel
      title="过程能力指标"
      eyebrow="Capability"
      description="能力柱状图用于快速比较 Cp、Cpk、Pp、Ppk。页面保留 1.00 与 1.33 参考线，方便验证常见能力门槛；分布形态请在直方图和正态曲线页面单独查看。"
      :option="capabilityOption"
    />
  </article>
</template>
