<script setup lang="ts">
import { computed, ref } from "vue";
import { useMessage } from "naive-ui";
import { Icon } from '@iconify/vue'
import { useThemeStore } from '@/store/modules/theme';
import Ed from "./Ed.vue";

const themeStore = useThemeStore();
const message = useMessage();
const emit = defineEmits<{
  back: [];
  done: [records: number];
  export: [items: any[], mode: "manual" | "ai"];
  save: [];
}>();
const lowerOf = (lv: "高" | "中" | "低"): "高" | "中" | "低" => {
  return lv === "高" ? "中" : "低";
}
const inherentOf = (l: number, s: number): "高" | "中" | "低" => {
  const v = l * s;
  return v >= 10 ? "高" : v >= 5 ? "中" : "低";
}
const toRec = (row: any): any => ({
  item: row.item || "（未命名检查项）",
  scene: `标准：${row.std}；不符合可能导致：${row.cons}`,
  inherent: inherentOf(row.l, row.s),
  existing: row.ctrl,
  suggest: row.sug,
  residual: lowerOf(inherentOf(row.l, row.s)),
  source: "SCL",
});

const gi = ref(0);
const cur = computed(() => groups.value[gi.value]);
const recTotal = computed(() => groups.value.reduce((a, g) => a + g.rows.length, 0));

const updRow = (ri: number, patch: Partial<any>) => {
  const row = cur.value.rows[ri];
  if (row) Object.assign(row, patch);
};
const clampLS = (v: string) => Math.max(1, Math.min(5, +v || 1));
const addRow = () => cur.value.rows.push({ item: "", std: "", cons: "", l: 2, s: 3, ctrl: "", sug: "" });
const delRow = (ri: number) => cur.value.rows.splice(ri, 1);
const exportAll = () => emit("export", groups.value.flatMap((g) => g.rows.map(toRec)), "ai");

const save = () => {
  message.success("已手动保存，分析记录数已同步至工具卡片（内容修改实时自动保存，退出不丢失）");
};
const SCL_INFO = {
  dev: "R-101 缩合反应釜",
  mat: "缩合反应体系（有机溶剂 / 反应物料）",
  param: "设计温度：-10/120 ℃，设计压力：0.6 MPa；变更后操作温度：90±2 ℃（原 80±2 ℃），常压",
};
const TH = "border bg-slate-100 px-2 py-1.5 text-[11px] font-medium text-slate-500";
const TD = "border px-1.5 py-1 align-top";

const ANALYSIS_POOL = [
  { name: "张工艺", org: "一车间", post: "工艺工程师" },
  { name: "王仪表", org: "技术部", post: "仪表工程师" },
  { name: "周设备", org: "设备科", post: "设备工程师" },
  { name: "刘文静", org: "技术部", post: "工艺员" },
  { name: "王海燕", org: "安全环保部", post: "安全工程师" },
  { name: "李主任", org: "一车间", post: "车间主任" },
  { name: "吴海涛", org: "设备科", post: "维修班长" },
  { name: "陈国栋", org: "一车间", post: "班长" },
];
const open = ref(false);
const q = ref("");
const sels = ref<string[]>(["张工艺", "王仪表"]);
const list = computed(() => ANALYSIS_POOL.filter((x) => !q.value || x.name.includes(q.value)));
const toggle = (n: string) => {
  sels.value = sels.value.includes(n) ? sels.value.filter((x) => x !== n) : [...sels.value, n];
};
const rrOf = (l: number, s: number) => {
  const v = l * s;
  if (v >= 15) return { t: `重大 (${v})`, c: "bg-red-500 text-white" };
  if (v >= 10) return { t: `较大 (${v})`, c: "bg-[#F5A623] text-white" };
  if (v >= 5) return { t: `一般 (${v})`, c: "bg-amber-300 text-amber-900" };
  return { t: `低 (${v})`, c: "bg-emerald-500 text-white" };
}

const groups = ref([
  { g: "本体", rows: [
    { item: "釜体及夹套壁厚", std: "测厚值 ≥ 设计最小壁厚，无超标腐蚀减薄", cons: "壁厚不足导致强度失效、泄漏", l: 1, s: 4, ctrl: "工程控制：定期测厚；管理措施：年度检验计划", sug: "变更后温度提升，复核腐蚀速率评估" },
    { item: "搅拌器运行状态", std: "电流、振动在正常范围，无异响", cons: "搅拌失效导致传热不均、局部过热", l: 2, s: 3, ctrl: "工程控制：电流在线监视；培训教育：异常处置规程", sug: "投用首周每班记录搅拌电流趋势" },
  ] },
  { g: "安全附件", rows: [
    { item: "安全阀", std: "校验在有效期内，起跳压力 0.5 MPa，铅封完好", cons: "超压时无法正常泄放", l: 1, s: 5, ctrl: "工程控制：定期校验；管理措施：校验台账管理", sug: "本次温度变更不影响泄放工况，维持原校验周期" },
    { item: "温度 / 压力仪表", std: "校验合格，现场示值与 DCS 一致", cons: "测量失真导致误判", l: 2, s: 3, ctrl: "管理措施：周期校验；现场与 DCS 比对核查", sug: "变更投用前完成一次示值比对" },
  ] },
  { g: "DCS 联锁与报警", rows: [
    { item: "温度高报 / 联锁设定值", std: "高报 95℃、高高报及联锁 100℃，与变更单一致", cons: "设定错误导致保护失效或误动作", l: 2, s: 5, ctrl: "管理措施：双人复核修改；工程控制：联锁测试", sug: "测试记录归档至变更资料" },
    { item: "联锁传动测试", std: "试验动作正确率 100%", cons: "联锁拒动 / 误动", l: 1, s: 5, ctrl: "管理措施：投用前强制测试；培训教育", sug: "纳入 PSSR 必查项" },
  ] },
  { g: "操作规程与应急", rows: [
    { item: "新版操作规程", std: "90℃ / 4h 工艺参数已修订发布并完成培训", cons: "沿用旧规程导致误操作", l: 2, s: 3, ctrl: "管理措施：规程受控发放；培训教育：签到考核", sug: "旧版规程现场收回，防止混用" },
    { item: "超温应急处置卡", std: "处置卡已更新并放置岗位", cons: "应急处置不当扩大事态", l: 1, s: 4, ctrl: "培训教育：应急演练；个体防护：应急物资就位", sug: "投用前组织一次超温处置桌面演练" },
  ] },
])
</script>

<template>
  <div class="space-y-3">
    <div 
        class="flex flex-wrap items-center gap-2 rounded-lg border border-[#ACC6E5] bg-[#EAF0F9] px-3 py-2"
        :style="{
            '--theme-color': themeStore.themeColor
        }"
    >
        <NButton size="small" ghost type="primary" class="text-xs" @click="emit('back')">
            <Icon icon="basil:arrow-left-outline" class="size-18px" />
            返回工具列表
        </NButton>
        <NButton size="small" ghost type="primary" class="text-xs" @click="save">保存</NButton>
        <span class="text-sm font-bold text-[var(--theme-color)]">SCL 安全检查表插件</span>
        <NTag size="small" type="info">插件</NTag>
        <NTag size="small">MOC 变更：缩合反应温度及时间优化（演示）</NTag>
        <span class="text-[11px] text-slate-500">{{ `${groups.length} 个检查分类 · ${recTotal} 项检查记录` }}</span>
        <div class="relative">
            <NButton size="small" ghost type="primary" class="text-[11px]" @click="open = !open">
                <Icon icon="lucide:users" class="size-12px" /> 分析组成员 · 已选 {{ sels.length }} 人
            </NButton>
            <template v-if="open">
                <div class="fixed inset-0 z-10" @click="open = false"></div>
                <div class="absolute right-0 top-8 z-20 w-72 rounded-lg border bg-white p-2 shadow-xl">
                    <div class="mb-1.5 flex items-center justify-between">
                        <span class="text-xs font-semibold text-slate-700">选择分析组成员（岗位人员库）</span>
                        <span class="text-[11px] text-slate-400">已选 {{ sels.length }} 人</span>
                    </div>
                    <NInput v-model:value="q" size="small" placeholder="搜索人名…" class="mb-1.5 text-xs" />
                    <div class="max-h-48 space-y-0.5 overflow-y-auto">
                        <div v-for="x in list" :key="x.name" @click="toggle(x.name)"
                            class="cursor-pointer flex w-full items-center min-h-34px gap-2 rounded-md px-2 py-1.5 text-left text-xs"
                            :class="sels.includes(x.name) ? 'bg-[#DFE9F6]' : 'hover:bg-slate-50'">
                            <span class="flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded border text-[10px]"
                            :class="sels.includes(x.name) ? 'border-[var(--theme-color)] bg-[var(--theme-color)] text-white' : 'border-slate-300'">{{ sels.includes(x.name) ? "✓" : "" }}</span>
                            <span class="font-medium text-slate-800">{{ x.name }}</span>
                            <span class="text-[11px] text-slate-400">{{ x.org }} · {{ x.post }}</span>
                            <NTag v-if="sels[0] === x.name" size="small" type="primary" class="ml-auto">组长</NTag>
                        </div>
                    </div>
                    <div class="mt-1.5 border-t pt-1.5 text-[11px] leading-4 text-slate-400">
                    首位选择者默认为组长；成员为选择式（非手写），参与记录自动归属到人，用于「参与风险分析次数」统计采集。
                    </div>
                </div>
            </template>
        </div>
        <div class="ml-auto flex items-center gap-1.5">
            <NButton size="small" ghost type="primary" class="text-xs" :disabled="recTotal === 0" @click="exportAll">
                <Icon icon="lucide:sparkles" class="size-12px mr-1" /> AI 整理入表
            </NButton>
            <NButton size="small" ghost type="primary" class="text-xs" @click="message.success('SCL 检查表已导出（Word）')">
            <Icon icon="material-symbols:download" class="size-14px" /> 导出 Word
            </NButton>
            <NButton size="small" type="primary" class="text-xs" @click="message.success('演示：AI 辅助分析完成，已按变更内容核对检查标准（支持手动修改）')">
                <Icon icon="lucide:sparkles" class="size-12px" />
                辅助分析
            </NButton>
        </div>
    </div>
    <!-- 设备信息头 -->
    <div class="grid gap-2 rounded-lg border bg-white p-3 text-xs sm:grid-cols-3">
      <div><span class="text-slate-400">设备名称：</span><b class="text-slate-700">{{ SCL_INFO.dev }}</b></div>
      <div><span class="text-slate-400">物料信息：</span><b class="text-slate-700">{{ SCL_INFO.mat }}</b></div>
      <div class="sm:col-span-3"><span class="text-slate-400">运行参数：</span><span class="text-slate-600">{{ SCL_INFO.param }}</span></div>
    </div>

    <div 
        class="flex gap-3"
        :style="{'--theme-color':themeStore.themeColor}"
    >
      <!-- 左：检查分类 -->
      <div class="shrink-0 rounded-lg border bg-white p-2 w-44">
        <div v-for="(g, i) in groups" :key="g.g" @click="gi = i"
          class="cursor-pointer flex w-full items-center rounded-md px-3 py-1.5 text-left text-xs transition"
          :class="gi === i ? 'bg-[var(--theme-color)] text-white' : 'text-slate-600 hover:bg-slate-100'">
          <span class="flex-1">{{ g.g }}</span>
          <span class="rounded-full px-1.5 text-[10px]" :class="gi === i ? 'bg-white/25' : 'bg-slate-100 text-slate-400'">{{ g.rows.length }}</span>
        </div>
      </div>
      <!-- 右：检查表 -->
      <div class="min-w-0 flex-1 bg-white">
        <div class="flex items-center gap-2 pb-2">
          <NButton size="small" class="text-xs" @click="addRow">
            <Icon icon="ic:round-plus" class="size-14px" />新增检查项
          </NButton>
          <span class="text-[11px] text-slate-400">单元格点击即可修改；L / S 取值 1-5，风险等级按矩阵实时重算；「入表」将本条选入风险分析记录表</span>
        </div>
        <table class="w-full min-w-[900px] border-collapse text-xs">
          <thead>
            <tr>
              <th :class="TH">检查项目</th>
              <th :class="TH">标准</th>
              <th :class="TH">不符合标准情况及后果</th>
              <th :class="TH" class="w-8">L</th>
              <th :class="TH" class="w-8">S</th>
              <th :class="TH" class="w-20">RR</th>
              <th :class="TH">现有控制措施</th>
              <th :class="TH">建议措施</th>
              <th :class="TH" class="w-16">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, ri) in cur.rows" :key="ri">
              <td :class="TD"><Ed :v="row.item" @update="(x) => updRow(ri, { item: x })" /></td>
              <td :class="TD"><Ed :v="row.std" @update="(x) => updRow(ri, { std: x })" /></td>
              <td :class="TD"><Ed :v="row.cons" @update="(x) => updRow(ri, { cons: x })" /></td>
              <td :class="TD" class="text-center">
                <input :value="row.l" @change="(e) => updRow(ri, { l: clampLS((e.target as HTMLInputElement).value) })"
                  class="w-7 rounded border border-transparent text-center hover:border-slate-200" />
              </td>
              <td :class="TD" class="text-center">
                <input :value="row.s" @change="(e) => updRow(ri, { s: clampLS((e.target as HTMLInputElement).value) })"
                  class="w-7 rounded border border-transparent text-center hover:border-slate-200" />
              </td>
              <td :class="TD" class="text-center">
                <span class="inline-block rounded px-1.5 py-0.5 text-[11px] font-medium" :class="rrOf(row.l, row.s).c">{{ rrOf(row.l, row.s).t }}</span>
              </td>
              <td :class="TD"><Ed :v="row.ctrl" @update="(x) => updRow(ri, { ctrl: x })" /></td>
              <td :class="TD"><Ed :v="row.sug" @update="(x) => updRow(ri, { sug: x })" /></td>
              <td :class="TD">
                <div class="flex items-center justify-between px-1 mt-1">
                    <NButton text type="primary" class="mt-1px text-[11px] hover:underline" title="选入风险分析记录表"
                      @click="emit('export', [toRec(row)], 'manual')">入表
                    </NButton>
                    <NButton text type="error" title="删除行" @click="delRow(ri)">
                      <Icon icon="ep:delete" class="size-14px" />
                    </NButton>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
