<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 { createControlLimitOption } from "../utils/chartOptions";

const { result } = useSpc();

const option = computed(() => {
  const xs = result.value?.XS;
  if (!xs) return null;
  return createControlLimitOption({
    title: "Xbar 控制图（XS 控制限）",
    valueName: "子组均值",
    values: xs.CL_Xk,
    center: xs.CL_X,
    upper: xs.UCL_X,
    lower: xs.LCL_X
  });
});

const metrics = computed(() => {
  const xs = result.value?.XS;
  if (!xs) return [];
  return [
    { label: "CL_X", value: xs.CL_X },
    { label: "UCL_X", value: xs.UCL_X },
    { label: "LCL_X", value: xs.LCL_X },
    { label: "子组数", value: xs.k }
  ];
});
</script>

<template>
  <article class="page-stack">
    <MetricStrip v-if="metrics.length" :metrics="metrics" />
    <EChartPanel
      title="Xbar-S：均值控制图"
      eyebrow="Xbar-S"
      description="Xbar-S 中的均值图同样观察过程中心，但控制限由样本标准差口径计算，适合和 S 图配套检查过程稳定性。"
      :option="option"
    />
  </article>
</template>
