import * as echarts from "echarts";

/**
 * 基础仪表盘：炉温监控
 */
const gaugeOption = {
  series: [
    {
      type: "gauge",
      min: 0,
      max: 120,
      splitNumber: 6,               // 刻度分段（内部跑 nice 算法——你 Day 50 的老朋友）
      axisLine: {
        // ⭐ 分段着色：正常区/警告区/危险区（工业仪表盘的灵魂）
        lineStyle: {
          width: 20,
          color: [
            [80 / 120, "#00c6ff"],      // 0~80 正常：蓝
            [100 / 120, "#ffd666"],     // 80~100 警告：黄
            [1, "#ff4d4f"],             // 100~120 危险：红
          ],
        },
      },
      pointer: { itemStyle: { color: "auto" } },   // 指针颜色跟随所在区段
      axisTick: { distance: -20, length: 6 },
      splitLine: { distance: -20, length: 20 },
      axisLabel: { distance: 30, color: "#6a7a94" },
      detail: {
        // 中央数值显示
        valueAnimation: true,          // 数值变化时动画滚动（大屏质感的关键）
        formatter: "{value} ℃",
        color: "#e0e8f0",
        fontSize: 32,
        offsetCenter: [0, "60%"],
      },
      title: { offsetCenter: [0, "85%"], fontSize: 14 },
      data: [{ value: 92, name: "1号炉温度" }],
    },
  ],
};

/**
 * 进度环式仪表盘：极简风格
 * 核心思路：仪表盘当进度条用——只显示进度弧 + 大数字
 */
const ringOption = {
  series: [
    {
      type: "gauge",
      startAngle: 225,          // 起始角：左下
      endAngle: -45,            // 终止角：右下（总跨度 270°）
      min: 0,
      max: 100,
      pointer: { show: false },   // ⭐ 不要指针
      progress: {
        show: true,               // ⭐ 进度弧
        roundCap: true,           // 圆头
        width: 14,
        itemStyle: { color: "#00c6ff" },
      },
      axisLine: { lineStyle: { width: 14, color: [[1, "#1a2740"]] } },  // 背景弧
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
      title: { show: true, offsetCenter: [0, "30%"] },
      detail: {
        valueAnimation: true,
        fontSize: 40,
        color: "#00c6ff",
        offsetCenter: [0, 0],
        formatter: (v: number) => `${v}%`,
      },
      data: [{ value: 76.5, name: "设备综合效率 OEE" }],
    },
  ],
};

/**
 * 按数值动态换进度色：正常蓝 → 警告黄 → 危险红
 * 大屏常见需求：颜色本身携带告警语义
 */
function ringColor(v: number): string {
  if (v >= 90) return "#ff4d4f";
  if (v >= 80) return "#ffd666";
  return "#00c6ff";
}

chart.setOption({
  series: [{
    type: "gauge",
    progress: { itemStyle: { color: ringColor(currentValue) } },
    detail: { color: ringColor(currentValue) },
    data: [{ value: currentValue }],
  }],
});

/**
 * 设备健康度雷达图：单设备 vs 厂区平均（对比才有意义）
 */
const radarOption = {
  radar: {
    // ⭐ indicator 定义维度（名称 + 各维最大值——各维量纲不同，必须显式给 max）
    indicator: [
      { name: "温度稳定性", max: 100 },
      { name: "振动控制", max: 100 },
      { name: "能耗效率", max: 100 },
      { name: "故障率控制", max: 100 },
      { name: "维护及时性", max: 100 },
    ],
    shape: "polygon",           // 'polygon' 多边形 | 'circle' 圆形
    splitNumber: 4,
    axisName: { color: "#6a7a94" },
    splitLine: { lineStyle: { color: "rgba(106,122,148,0.2)" } },
    splitArea: { show: false },
  },
  series: [
    {
      type: "radar",
      data: [
        {
          value: [92, 68, 85, 74, 90],
          name: "3号机组",
          areaStyle: { color: "rgba(0,198,255,0.25)" },   // 半透明面积：健康度直观化
          lineStyle: { color: "#00c6ff" },
        },
        {
          value: [80, 80, 78, 82, 75],
          name: "厂区平均",
          lineStyle: { color: "#6a7a94", type: "dashed" },
          symbol: "none",
        },
      ],
    },
  ],
};

/**
 * 产线拓扑：固定坐标布局（工业场景首选——产线位置是物理事实，不能"力引导"乱飘）
 */
const graphOption = {
  series: [
    {
      type: "graph",
      layout: "none",            // ⭐ 固定坐标（x/y 自己给）；'force' 是力引导自动布局
      symbol: "roundRect",
      symbolSize: [90, 40],      // 节点尺寸：宽90 高40（近似流程图节点）
      roam: true,                // 允许缩放平移（复用你写过的 viewport 能力）
      label: { show: true, color: "#e0e8f0" },
      edgeSymbol: ["none", "arrow"],          // 连线末端箭头
      edgeSymbolSize: 8,
      // 节点数据（类比第 7 周的 FlowNode）
      data: [
        { id: "n1", name: "原料上料", x: 100, y: 200, itemStyle: { color: "#1a2740", borderColor: "#3a4a6a" } },
        { id: "n2", name: "加热炉", x: 300, y: 200, itemStyle: { color: "#2a1a20", borderColor: "#ff4d4f" } },   // 异常节点红边
        { id: "n3", name: "轧制", x: 500, y: 200 },
        { id: "n4", name: "质检", x: 300, y: 350 },
      ],
      // 连线数据（类比 FlowEdge）
      edges: [
        { source: "n1", target: "n2" },
        { source: "n2", target: "n3" },
        { source: "n3", target: "n4" },
        // 异常链路：红色高亮（第 7 周"连线选中态"的业务化）
        { source: "n2", target: "n3", lineStyle: { color: "#ff4d4f", width: 2 } },
      ],
    },
  ],
};

// 关系网络没有物理位置（组织关系、告警传播链）时用 force：
series: [{
  type: "graph",
  layout: "force",
  force: {
    repulsion: 200,        // 节点间斥力（越大摊得越开）
    edgeLength: [60, 120], // 边长范围
    gravity: 0.1,          // 向心力（防止飞散）
  },
  data: orgNodes,
  edges: orgEdges,
}]

/**
 * 车间能耗排名：symbolRepeat 象形柱
 * 原理：用重复的小图标堆叠出"柱子"，数量即数值——像温度计刻度
 */
const pictorialOption = {
  grid: { left: 80, right: 40, top: 20, bottom: 30, containLabel: true },
  xAxis: { type: "value", show: false },
  yAxis: {
    type: "category",
    inverse: true,                      // ⭐ 排名从上往下：第 1 名在顶
    data: ["3车间", "1车间", "4车间", "2车间"],
  },
  series: [
    // 第一层：背景槽（灰色全长度，形成"进度槽"视觉）
    {
      type: "pictorialBar",
      symbol: "rect",
      symbolRepeat: true,               // 重复堆叠
      symbolSize: [14, 6],              // 每个小块的尺寸
      symbolMargin: 2,                  // 块间距
      symbolClip: true,                 // ⭐ 裁剪：只显示数据长度部分
      data: [98, 85, 72, 60],
      itemStyle: { color: "#00c6ff" },
      z: 1,                             // 前景层
      animationDuration: 1200,
    },
    {
      type: "pictorialBar",
      symbol: "rect",
      symbolRepeat: true,
      symbolSize: [14, 6],
      symbolMargin: 2,
      symbolClip: false,                // 背景层：不裁剪，全长度
      data: [100, 100, 100, 100],
      itemStyle: { color: "rgba(26,39,64,0.8)" },
      z: 0,                             // 背景层
    },
  ],
};

import * as echarts from "echarts";

/**
 * 工业深色主题：一次定义，处处生效
 * 所有图表 init 时传主题名，不再逐图写 textStyle
 */
const industrialDark = {
  backgroundColor: "transparent",
  textStyle: { color: "#8fa3c0", fontFamily: "sans-serif" },
  title: { textStyle: { color: "#e0e8f0" }, left: "center" },
  legend: { textStyle: { color: "#8fa3c0" } },
  categoryAxis: {
    axisLine: { lineStyle: { color: "#3a4a6a" } },
    axisTick: { show: false },
    axisLabel: { color: "#6a7a94" },
    splitLine: { show: false },
  },
  valueAxis: {
    axisLine: { show: false },
    axisLabel: { color: "#6a7a94" },
    splitLine: { lineStyle: { color: "rgba(106,122,148,0.15)" } },
  },
  color: [
    "#00c6ff", "#00ff88", "#ffd666", "#ff4d4f",
    "#7b61ff", "#ff85c0", "#36cfc9", "#ffc53d",
  ],   // 调色盘：系列自动轮询取色
};

echarts.registerTheme("industrial-dark", industrialDark);

// 使用：
const chart = echarts.init(el, "industrial-dark");

/**
 * 大屏整体缩放：设计稿 1920×1080，按目标分辨率 transform scale
 * ⚠️ 这会带来 canvas 模糊问题（见下）
 */
function fitScreen(): void {
  const designW = 1920, designH = 1080;
  const scaleX = window.innerWidth / designW;
  const scaleY = window.innerHeight / designH;
  const scale = Math.min(scaleX, scaleY);   // 等比缩放防变形
  const el = document.querySelector<HTMLElement>("#screen")!;
  el.style.transform = `scale(${scale})`;
  el.style.transformOrigin = "left top";
  el.style.width = `${designW}px`;
  el.style.height = `${designH}px`;
}
window.addEventListener("resize", fitScreen);
fitScreen();

/**
 * 高清大屏初始化：devicePixelRatio 之外再乘大屏缩放比
 * echarts.init 的 opts.devicePixelRatio 支持显式指定（不读浏览器默认值）
 */
function initCrispChart(el: HTMLElement, screenScale: number): echarts.ECharts {
  return echarts.init(el, "industrial-dark", {
    // 总像素比 = 浏览器 DPR × 大屏缩放比
    devicePixelRatio: (window.devicePixelRatio || 1) * screenScale,
  });
}