@dssp/supervision 1.0.0 → 1.0.1

package/dist-client/pages/building-inspection/building-inspection-detail-ai-measurement.js

@@ -0,0 +1,1407 @@
+import { __decorate, __metadata } from "tslib";
+/**
+ * 검측 관리 상세 - AI 자동 검측
+ *
+ * 검측 체크리스트 항목을 AI 엔진(inspection-ai)에 보내:
+ *  1) 촬영 가이드(plan-shots)를 받아 단계별 촬영 슬롯을 표시하고
+ *  2) 촬영된 사진으로 자동 판정(inspect)을 실행한 뒤
+ *  3) 항목별 상세 / 추가 촬영(재검사) / 종합 리포트를 거쳐
+ *  4) 검사 등록 시 감리자 적합/부적합 자동 반영 + AI판단 근거를 첨부한다.
+ */
+import '@material/web/icon/icon.js';
+import '@material/web/progress/circular-progress.js';
+import gql from 'graphql-tag';
+import { css, html } from 'lit';
+import { customElement, state, query } from 'lit/decorators.js';
+import { PageView, navigate } from '@operato/shell';
+import { ScrollbarStyles } from '@operato/styles';
+import { client } from '@operato/graphql';
+import { notify } from '@operato/layout';
+import './component/building-inspection-detail-header';
+const ENGINE_BASE_URL = 'https://hatiolab-korea-uni.ettisoft.com';
+const ENGINE_RUN_URL = `${ENGINE_BASE_URL}/api/run/inspection-ai`;
+const ENGINE_AUTH = `Basic ${btoa('admin:admin1234')}`;
+const MAX_IMAGES = 8;
+/* 엔진 verdict(기계값) → 화면 라벨. pass/fail만 합/불로 자동 체크, 나머지(보류/미지원/오류)는 감리자 판단 */
+const VERDICT_LABEL = {
+    pass: '적합',
+    fail: '부적합',
+    hold: '보류',
+    pending: '미지원',
+    error: '오류'
+};
+/* 엔진 routing(기계값) → 화면 라벨 */
+const ROUTING_LABEL = {
+    vlm: 'AI 사진판독',
+    cv: '자동 측정',
+    cv_missing: '자동 측정 누락'
+};
+let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement extends PageView {
+    constructor() {
+        super(...arguments);
+        this.project = {};
+        this.buildingInspection = {};
+        this.buildingInspectionId = '';
+        this.guide = null; // plan-shots 응답 {shots, total_shots, markdown}
+        this.photos = [];
+        this.result = null; // inspect 응답
+        this.mainPhotoIndex = 0;
+        this.panel = 'none';
+        this.selectedItem = null;
+        this.recaptureBase = 0; // 재촬영 패널 진입 시점의 사진 수
+        this.expandedReportId = null; // 종합 리포트에서 펼친 항목(아코디언)
+        this.loading = false;
+        this.loadingText = '';
+        /* 슬롯 클릭으로 선택기를 연 경우 대상 슬롯 인덱스 (null이면 뒤에 추가) */
+        this.pendingSlotIndex = null;
+        this._resetPhotos = () => {
+            this.photos.forEach(p => URL.revokeObjectURL(p.url));
+            this.photos = [];
+        };
+        this._openReport = () => {
+            this.panel = 'report';
+            this.selectedItem = null;
+            this.expandedReportId = null;
+        };
+        this._closePanel = () => {
+            this.panel = 'none';
+            this.selectedItem = null;
+        };
+    }
+    get context() {
+        return {
+            title: '검측 관리 상세 - AI 자동 검측'
+        };
+    }
+    /* 엔진에 보낼 검측요청서: 체크리스트 항목 → {item_id, category, text} */
+    get engineChecklist() {
+        var _a, _b;
+        const items = ((_b = (_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.checklist) === null || _b === void 0 ? void 0 : _b.checklistItems) || [];
+        return [...items]
+            .sort((a, b) => (a.sequence || 0) - (b.sequence || 0))
+            .map(item => ({
+            item_id: item.id,
+            category: [item.mainType, item.detailType].filter(Boolean).join(' · '),
+            text: item.name || ''
+        }));
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        return html `
+      <building-inspection-detail-header
+        .buildingInspectionId=${(_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.id}
+        .buildingLevelId=${(_c = (_b = this.buildingInspection) === null || _b === void 0 ? void 0 : _b.buildingLevel) === null || _c === void 0 ? void 0 : _c.id}
+        .projectName=${this.project.name}
+        .buildingName=${(_f = (_e = (_d = this.buildingInspection) === null || _d === void 0 ? void 0 : _d.buildingLevel) === null || _e === void 0 ? void 0 : _e.building) === null || _f === void 0 ? void 0 : _f.name}
+        .buildingLevelFloor=${(_h = (_g = this.buildingInspection) === null || _g === void 0 ? void 0 : _g.buildingLevel) === null || _h === void 0 ? void 0 : _h.floor}
+        .projectId=${this.project.id}
+      ></building-inspection-detail-header>
+
+      <div body>
+        <div class="page-title">
+          AI 자동 검측 – ${((_k = (_j = this.buildingInspection) === null || _j === void 0 ? void 0 : _j.checklist) === null || _k === void 0 ? void 0 : _k.location) || ''}
+          <span target>${((_m = (_l = this.buildingInspection) === null || _l === void 0 ? void 0 : _l.checklist) === null || _m === void 0 ? void 0 : _m.name) || ''}</span>
+        </div>
+
+        ${this.result ? this._renderResult() : this._renderGuide()}
+      </div>
+
+      <!-- 모바일에서 촬영/앨범 선택이 함께 뜨도록 capture 속성 없이 사용 -->
+      <input id="photoInput" type="file" accept="image/*" multiple @change=${this._onPhotosSelected} />
+
+      ${this.loading
+            ? html `
+              <div class="loading-overlay">
+                <div class="box">
+                  <md-circular-progress indeterminate></md-circular-progress>
+                  <span>${this.loadingText}</span>
+                </div>
+              </div>
+            `
+            : ''}
+    `;
+    }
+    /* ─── 1단계: 촬영 가이드 화면 ─── */
+    _renderGuide() {
+        if (!this.guide) {
+            return html `<div class="empty-state">촬영 가이드를 준비 중입니다...</div>`;
+        }
+        const shots = this.guide.shots || [];
+        const total = this.guide.total_shots || shots.length;
+        const taken = this.photos.length;
+        const current = shots[Math.min(taken, shots.length - 1)];
+        const done = taken >= total;
+        return html `
+      <div class="guide-container">
+        <div class="step-badge">${Math.min(taken + 1, total)}단계 · ${(current === null || current === void 0 ? void 0 : current.target) || '촬영'}</div>
+        <div class="guide-title">${(current === null || current === void 0 ? void 0 : current.target) || ''}${done ? ' 촬영 완료' : ''}</div>
+        <div class="guide-desc">이 사진을 토대로 AI가 적용할 체크리스트를 결정하고 일부를 자동 판정합니다.</div>
+
+        <div class="card">
+          <h4>촬영 가이드</h4>
+          <ul>
+            ${shots.map(s => html `<li>${s.target} — ${s.how}</li>`)}
+          </ul>
+        </div>
+
+        <div class="card" style="display: flex; flex-direction: column; gap: 10px;">
+          <div class="progress-row">
+            <span>사진 진행</span>
+            <span>${taken} / ${total}</span>
+          </div>
+          <div class="progress-bar"><div style="width: ${total ? (taken / total) * 100 : 0}%"></div></div>
+          ${!done ? html `<div class="next-shot">다음 촬영: ${(current === null || current === void 0 ? void 0 : current.how) || (current === null || current === void 0 ? void 0 : current.target) || ''}</div>` : ''}
+          <div class="slot-grid">
+            ${shots.map((s, i) => html `
+                <div class="slot" @click=${() => this._openPhotoPicker(i)}>
+                  ${this.photos[i]
+            ? html `<img src=${this.photos[i].url} alt=${s.target} />`
+            : html `<md-icon>add_a_photo</md-icon>${s.target}`}
+                </div>
+              `)}
+          </div>
+        </div>
+
+        <button class="primary-button" ?disabled=${taken === 0} @click=${() => this._runInspection()}>
+          사진 선택 ${taken ? `(${taken}/${total})` : ''}
+        </button>
+        ${taken > 0
+            ? html `
+                <div style="display: flex; justify-content: flex-end;">
+                  <button class="text-button" @click=${this._resetPhotos}>사진 초기화</button>
+                </div>
+              `
+            : ''}
+      </div>
+    `;
+    }
+    /* ─── 2단계: 판정 결과 화면 ─── */
+    _renderResult() {
+        const items = this._sortedItems();
+        const autoItems = items.filter(it => it.verdict === 'pass' || it.verdict === 'fail');
+        const moreItems = items.filter(it => it.verdict !== 'pass' && it.verdict !== 'fail');
+        // 클릭한 항목의 used_images만 표시 (선택 없으면 전체 항목 합집합). used_images는 전체 사진 기준 1-based
+        const focusItems = this.selectedItem ? [this.selectedItem] : items;
+        const usedNos = new Set();
+        for (const it of focusItems)
+            for (const n of it.used_images || [])
+                usedNos.add(n);
+        const usedPhotos = this.photos.map((photo, i) => ({ photo, no: i + 1 })).filter(x => usedNos.has(x.no));
+        const mainPhoto = usedPhotos[this.mainPhotoIndex];
+        return html `
+      <div class="result-body">
+        <div class="photo-pane">
+          <div class="caption">판정에 사용된 사진</div>
+          <div class="photo-main">${mainPhoto ? html `<img src=${mainPhoto.photo.url} alt="현장 사진" />` : ''}</div>
+          <div class="photo-thumbs">
+            ${usedPhotos.map((x, i) => html `
+                <img
+                  src=${x.photo.url}
+                  alt="사진 ${x.no}"
+                  ?selected=${i === this.mainPhotoIndex}
+                  @click=${() => (this.mainPhotoIndex = i)}
+                />
+              `)}
+          </div>
+        </div>
+
+        <div class="items-pane">
+          <div class="summary-banner">
+            적용 항목 ${items.length}개 · 자동 판정 ${autoItems.length}개 · 추가 촬영 ${moreItems.length}개
+          </div>
+
+          ${autoItems.length
+            ? html `
+                  <div class="group-title">자동 판정 완료 (${autoItems.length})</div>
+                  ${autoItems.map((it, i) => this._renderItemCard(it, i + 1))}
+                `
+            : ''}
+          ${moreItems.length
+            ? html `
+                  <div class="group-title">추가 촬영 필요 (${moreItems.length} 남음)</div>
+                  ${moreItems.map((it, i) => this._renderItemCard(it, i + 1))}
+                `
+            : ''}
+
+          <button class="primary-button" @click=${this._openReport}>종합 검사 리포트</button>
+        </div>
+
+        ${this.panel !== 'none' ? this._renderSidePane() : ''}
+      </div>
+    `;
+    }
+    _renderItemCard(item, no) {
+        var _a;
+        const auto = item.verdict === 'pass' || item.verdict === 'fail';
+        return html `
+      <div class="item-card" ?selected=${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.item_id) === item.item_id} @click=${() => this._openDetail(item)}>
+        <div class="item-no">${no}</div>
+        <div class="item-main">
+          <div class="item-name">${item.text}</div>
+          <div>
+            <span class="chip">${ROUTING_LABEL[item.routing] || item.routing}</span>
+            <span class="chip-verdict">${VERDICT_LABEL[item.verdict] || item.verdict}</span>
+          </div>
+          <div class="item-desc">${item.observation ? `관찰: ${item.observation}` : item.reason || ''}</div>
+        </div>
+        ${auto
+            ? html `
+                <div class="badge" ?pass=${item.verdict === 'pass'} ?fail=${item.verdict === 'fail'}>
+                  ${VERDICT_LABEL[item.verdict]}
+                </div>
+              `
+            : item.verdict === 'hold'
+                ? html `
+                  <button
+                    class="capture-button"
+                    @click=${(e) => {
+                    e.stopPropagation();
+                    this._openRecapture(item);
+                }}
+                  >
+                    촬영하기
+                  </button>
+                `
+                : html `<div class="badge" etc>${VERDICT_LABEL[item.verdict] || item.verdict}</div>`}
+      </div>
+    `;
+    }
+    /* ─── 우측 패널: 상세 / 재촬영 / 리포트 ─── */
+    _renderSidePane() {
+        if (this.panel === 'detail' && this.selectedItem)
+            return this._renderDetailPane(this.selectedItem);
+        if (this.panel === 'recapture' && this.selectedItem)
+            return this._renderRecapturePane(this.selectedItem);
+        if (this.panel === 'report')
+            return this._renderReportPane();
+        return '';
+    }
+    _renderDetailPane(item) {
+        const auto = item.verdict === 'pass' || item.verdict === 'fail';
+        const routingLabel = ROUTING_LABEL[item.routing] || item.routing;
+        const verdictLabel = VERDICT_LABEL[item.verdict] || item.verdict;
+        return html `
+      <div class="side-pane">
+        <div class="detail-header">
+          <span class="badge" ?pass=${item.verdict === 'pass'} ?fail=${item.verdict === 'fail'} ?etc=${!auto}>
+            ${routingLabel}
+          </span>
+          <h3>${verdictLabel}</h3>
+        </div>
+        <div class="detail-summary">${(item.observation || item.ai_report || '').trim()}</div>
+        <div class="kv-grid">
+          <div class="kv">
+            <label>판정</label>
+            <span class="verdict-value" ?pass=${item.verdict === 'pass'} ?fail=${item.verdict === 'fail'}>
+              ${verdictLabel || '-'}
+            </span>
+          </div>
+          ${item.confidence != null
+            ? html `
+                  <div class="kv">
+                    <label>신뢰도</label>
+                    <span>${Math.round(item.confidence * 100)}%</span>
+                  </div>
+                `
+            : ''}
+          <div class="kv">
+            <label>처리</label>
+            <span>${ROUTING_LABEL[item.routing] || item.routing || '-'}</span>
+          </div>
+        </div>
+
+        <div class="reason-box">
+          <div class="reason-verdict">
+            <label style="font-size: 11px;color: #7d2f2f; display: block; font-weight: bold;">판단 근거</label>
+            ${item.reason}
+          </div>
+        </div>
+
+        <button class="text-button" @click=${this._closePanel}>닫기</button>
+      </div>
+    `;
+    }
+    _renderRecapturePane(item) {
+        var _a;
+        const shots = ((_a = item.recapture_shots) === null || _a === void 0 ? void 0 : _a.length)
+            ? item.recapture_shots
+            : [{ target: '추가 사진', how: '항목이 잘 보이도록 촬영해주세요.' }];
+        const taken = this.photos.length - this.recaptureBase;
+        const total = shots.length;
+        return html `
+      <div class="side-pane">
+        <h3>${item.text}</h3>
+        <div class="why-box">
+          <b>왜 추가 촬영이 필요한가요?</b><br />
+          ${item.reason || '판정을 위해 추가 사진이 필요합니다.'}
+        </div>
+        <div>
+          <h4 style="margin: 0 0 8px 0; font-size: 13px;">촬영 가이드</h4>
+          <ul
+            style="margin: 0; padding-left: 18px; font-size: 12px; color: #555; display: flex; flex-direction: column; gap: 6px;"
+          >
+            ${shots.map(s => html `<li>${s.target} — ${s.how}</li>`)}
+          </ul>
+        </div>
+        <div class="progress-row">
+          <span>사진 진행</span>
+          <span>${Math.min(taken, total)} / ${total}</span>
+        </div>
+        <div class="progress-bar"><div style="width: ${total ? Math.min(taken / total, 1) * 100 : 0}%"></div></div>
+        <div class="slot-grid">
+          ${shots.map((s, i) => {
+            const photo = this.photos[this.recaptureBase + i];
+            return html `
+              <div class="slot" @click=${() => this._openPhotoPicker(this.recaptureBase + i)}>
+                ${photo ? html `<img src=${photo.url} alt=${s.target} />` : html `<md-icon>add_a_photo</md-icon>${s.target}`}
+              </div>
+            `;
+        })}
+        </div>
+        ${taken > 0
+            ? html `<button class="primary-button" @click=${() => this._runInspection()}>재검사 실행 (${taken}장)</button>`
+            : ''}
+        <button class="text-button" @click=${this._closePanel}>닫기</button>
+      </div>
+    `;
+    }
+    _renderReportPane() {
+        var _a;
+        const items = this._sortedItems();
+        const summary = ((_a = this.result) === null || _a === void 0 ? void 0 : _a.summary) || {};
+        const etcCount = (summary.hold || 0) + (summary.pending || 0) + (summary.error || 0);
+        return html `
+      <div class="side-pane">
+        <h3>종합 검사 리포트</h3>
+        <div class="report-counts">
+          <div pass><b>${summary.pass || 0}</b><small>적합</small></div>
+          <div fail><b>${summary.fail || 0}</b><small>부적합</small></div>
+          <div etc><b>${etcCount}</b><small>미검사</small></div>
+        </div>
+        <div style="overflow-y: auto; max-height: 380px;">
+          ${items.map((it, i) => {
+            var _a;
+            const expanded = this.expandedReportId === it.item_id;
+            return html `
+              <div class="report-item">
+                <div class="report-head" @click=${() => this._toggleReportItem(it.item_id)}>
+                  <span class="report-text">${i + 1}. ${it.text}</span>
+                  <span
+                    class="verdict"
+                    ?pass=${it.verdict === 'pass'}
+                    ?fail=${it.verdict === 'fail'}
+                    ?etc=${it.verdict !== 'pass' && it.verdict !== 'fail'}
+                  >
+                    ${VERDICT_LABEL[it.verdict] || it.verdict}
+                  </span>
+                  <md-icon class="report-caret" ?open=${expanded}>expand_more</md-icon>
+                </div>
+                ${expanded
+                ? html `
+                        <div class="report-basis">
+                          ${it.ai_report ? html `<div class="report-ai">${(it.ai_report || '').trim()}</div>` : ''}
+                          ${it.observation ? html `<div>관찰: ${it.observation}</div>` : ''}
+                          ${it.reason ? html `<div>판단: ${it.reason}</div>` : ''}
+                          ${((_a = it.used_images) === null || _a === void 0 ? void 0 : _a.length)
+                    ? html `<div class="report-used">근거 사진: ${it.used_images.map(n => `#${n}`).join(', ')}</div>`
+                    : ''}
+                        </div>
+                      `
+                : ''}
+              </div>
+            `;
+        })}
+        </div>
+        <button class="primary-button" @click=${this._registerInspection}>검사 등록</button>
+        <button class="text-button" @click=${this._closePanel}>닫기</button>
+      </div>
+    `;
+    }
+    /* ─── 라이프사이클 ─── */
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            this._resetAll();
+            this.buildingInspectionId = lifecycle.resourceId || '';
+            await this.initBuildingInspection(this.buildingInspectionId);
+            await this._loadShotGuide();
+        }
+    }
+    async initBuildingInspection(buildingInspectionId = '') {
+        var _a, _b, _c, _d;
+        const response = await client.query({
+            query: gql `
+        query BuildingInspection($buildingInspectionId: String!) {
+          buildingInspection(id: $buildingInspectionId) {
+            id
+            status
+            checklist {
+              id
+              name
+              location
+              checklistItems {
+                id
+                sequence
+                mainType
+                detailType
+                name
+              }
+            }
+            buildingLevel {
+              id
+              floor
+              building {
+                id
+                name
+                buildingComplex {
+                  id
+                }
+              }
+            }
+          }
+        }
+      `,
+            variables: { buildingInspectionId }
+        });
+        if (response.errors)
+            return;
+        this.buildingInspection = response.data.buildingInspection;
+        await this._getProjectByBuildingComplexId((_d = (_c = (_b = (_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.buildingLevel) === null || _b === void 0 ? void 0 : _b.building) === null || _c === void 0 ? void 0 : _c.buildingComplex) === null || _d === void 0 ? void 0 : _d.id);
+    }
+    async _getProjectByBuildingComplexId(buildingComplexId) {
+        const response = await client.query({
+            query: gql `
+        query ProjectByBuildingComplexId($buildingComplexId: String!) {
+          project: projectByBuildingComplexId(buildingComplexId: $buildingComplexId) {
+            id
+            name
+          }
+        }
+      `,
+            variables: { buildingComplexId }
+        });
+        if (response.errors)
+            return;
+        this.project = response.data.project;
+    }
+    /* ─── 엔진 호출 ─── */
+    /* 엔진 실행 공통 호출: input(JSON) + 사진 파일들을 multipart로 전송 */
+    async _callEngine(input, files = []) {
+        const form = new FormData();
+        form.append('input', JSON.stringify(input));
+        for (const file of files)
+            form.append('files', file, file.name);
+        const response = await fetch(ENGINE_RUN_URL, {
+            method: 'POST',
+            headers: { Authorization: ENGINE_AUTH },
+            body: form
+        });
+        const raw = await response.json();
+        const data = (raw === null || raw === void 0 ? void 0 : raw.result) || {};
+        if ((data === null || data === void 0 ? void 0 : data.status) !== 'success') {
+            throw new Error((data === null || data === void 0 ? void 0 : data.error) || (raw === null || raw === void 0 ? void 0 : raw.error) || 'AI 엔진 호출에 실패했습니다.');
+        }
+        return data.result;
+    }
+    /* [1단계] 촬영 가이드 생성 (plan-shots) */
+    async _loadShotGuide() {
+        const checklist = this.engineChecklist;
+        if (!checklist.length) {
+            notify({ message: '체크리스트 항목이 없습니다.', level: 'warn' });
+            return;
+        }
+        try {
+            this.loading = true;
+            this.loadingText = 'AI 촬영 가이드 생성 중...';
+            this.guide = await this._callEngine({ action: 'plan-shots', checklist });
+        }
+        catch (error) {
+            console.error('촬영 가이드 생성 실패:', error);
+            notify({ message: error.message, level: 'error' });
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    /* [2단계] 자동 판정 실행 (inspect)
+     * - 최초 판정: 전체 사진 + 전체 체크리스트
+     * - 재검사(재촬영 패널): 이번에 새로 찍은 사진만 + 해당 항목만 재판정 후 결과 병합 */
+    async _runInspection() {
+        const isRecapture = this.panel === 'recapture' && !!this.selectedItem;
+        // 재검사는 recaptureBase 이후에 찍은 사진만 전송
+        const files = (isRecapture ? this.photos.slice(this.recaptureBase) : this.photos).map(p => p.file);
+        if (!files.length) {
+            notify({ message: '촬영된 사진이 없습니다.', level: 'warn' });
+            return;
+        }
+        const checklist = isRecapture
+            ? this.engineChecklist.filter(c => c.item_id === this.selectedItem.item_id)
+            : this.engineChecklist;
+        try {
+            this.loading = true;
+            this.loadingText = 'AI 자동 판정 중... (최대 1~2분 소요)';
+            const result = await this._callEngine({ action: 'inspect', checklist }, files);
+            if (isRecapture) {
+                this._mergeRecaptureResult(result);
+            }
+            else {
+                this.result = result;
+            }
+            this.panel = 'none';
+            this.selectedItem = null;
+            this.mainPhotoIndex = 0;
+        }
+        catch (error) {
+            console.error('AI 자동 판정 실패:', error);
+            notify({ message: error.message, level: 'error' });
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    /* 재검사(부분 전송) 결과를 기존 전체 결과에 병합
+     * - used_images는 전송한 부분집합 기준 1-based → 전체 사진 인덱스로 보정(recaptureBase 가산)
+     * - 해당 항목만 교체 후 summary 재계산 */
+    _mergeRecaptureResult(result) {
+        var _a, _b;
+        const base = this.recaptureBase;
+        const updated = ((result === null || result === void 0 ? void 0 : result.items_sorted) || (result === null || result === void 0 ? void 0 : result.items) || []).map((it) => (Object.assign(Object.assign({}, it), { used_images: (it.used_images || []).map((n) => n + base) })));
+        const byId = new Map(updated.map((it) => [it.item_id, it]));
+        const replace = (arr) => (arr || []).map(it => byId.get(it.item_id) || it);
+        const items = replace((_a = this.result) === null || _a === void 0 ? void 0 : _a.items);
+        const itemsSorted = ((_b = this.result) === null || _b === void 0 ? void 0 : _b.items_sorted) ? replace(this.result.items_sorted) : undefined;
+        const summary = { pass: 0, fail: 0, hold: 0, pending: 0, error: 0 };
+        for (const it of itemsSorted || items)
+            summary[it.verdict] = (summary[it.verdict] || 0) + 1;
+        this.result = Object.assign(Object.assign(Object.assign(Object.assign({}, this.result), { items }), (itemsSorted ? { items_sorted: itemsSorted } : {})), { summary });
+    }
+    /* ─── 사진 선택 ─── */
+    /* 슬롯 클릭 → 사진 선택기 열기 (모바일: 촬영/앨범 선택 팝업, 채워진 슬롯이면 교체) */
+    _openPhotoPicker(slotIndex = null) {
+        var _a;
+        this.pendingSlotIndex = slotIndex;
+        (_a = this.photoInputEl) === null || _a === void 0 ? void 0 : _a.click();
+    }
+    _onPhotosSelected(event) {
+        const input = event.target;
+        const files = Array.from((input === null || input === void 0 ? void 0 : input.files) || []).filter(f => f.type.startsWith('image/') || /\.heic$/i.test(f.name));
+        input.value = '';
+        const slotIndex = this.pendingSlotIndex;
+        this.pendingSlotIndex = null;
+        if (!files.length)
+            return;
+        // 채워진 슬롯을 클릭한 경우 → 해당 사진 교체 (첫 파일만 사용)
+        if (slotIndex !== null && slotIndex < this.photos.length) {
+            URL.revokeObjectURL(this.photos[slotIndex].url);
+            const next = [...this.photos];
+            next[slotIndex] = { file: files[0], url: URL.createObjectURL(files[0]) };
+            this.photos = next;
+            return;
+        }
+        // 빈 슬롯/추가 → 순서대로 뒤에 추가
+        // 엔진 제한은 요청(호출)당 MAX_IMAGES장. 재검사는 새로 찍은 사진만 별도 전송되므로
+        // 누적 합계가 아니라 이번 회차(최초=전체, 재검사=recaptureBase 이후) 기준으로만 제한한다.
+        const batchBase = this.panel === 'recapture' ? this.recaptureBase : 0;
+        const cap = batchBase + MAX_IMAGES;
+        if (this.photos.length + files.length > cap) {
+            notify({ message: `사진은 회차당 최대 ${MAX_IMAGES}장까지 사용할 수 있습니다.`, level: 'warn' });
+            files.length = Math.max(0, cap - this.photos.length);
+            if (!files.length)
+                return;
+        }
+        this.photos = [...this.photos, ...files.map(file => ({ file, url: URL.createObjectURL(file) }))];
+    }
+    _resetAll() {
+        this._resetPhotos();
+        this.guide = null;
+        this.result = null;
+        this.panel = 'none';
+        this.selectedItem = null;
+        this.mainPhotoIndex = 0;
+        this.recaptureBase = 0;
+    }
+    /* ─── 패널 열기/닫기 ─── */
+    _openDetail(item) {
+        // 보류(hold)는 추가 촬영이 필요한 케이스 → 상세 대신 추가 촬영 UI를 바로 표시
+        if (item.verdict === 'hold') {
+            this._openRecapture(item);
+            return;
+        }
+        this.selectedItem = item;
+        this.mainPhotoIndex = 0; // 선택 항목의 첫 사용 사진부터 표시
+        this.panel = 'detail';
+    }
+    _openRecapture(item) {
+        this.selectedItem = item;
+        this.recaptureBase = this.photos.length;
+        this.panel = 'recapture';
+    }
+    /* 종합 리포트 항목 펼치기/접기 (한 번에 하나만 펼침) */
+    _toggleReportItem(id) {
+        this.expandedReportId = this.expandedReportId === id ? null : id;
+    }
+    _sortedItems() {
+        var _a, _b;
+        return ((_a = this.result) === null || _a === void 0 ? void 0 : _a.items_sorted) || ((_b = this.result) === null || _b === void 0 ? void 0 : _b.items) || [];
+    }
+    /* ─── [6단계] 검사 등록: 감리자 판정 자동 반영 + AI판단 근거 첨부 ─── */
+    async _registerInspection() {
+        var _a, _b;
+        const items = this._sortedItems();
+        if (!items.length) {
+            notify({ message: '판정 결과가 없습니다.', level: 'warn' });
+            return;
+        }
+        // 적합/부적합으로 자동 판정된 항목만 반영 (보류/미지원/오류는 미검사로 건너뜀)
+        const judged = items.filter(it => it.verdict === 'pass' || it.verdict === 'fail');
+        try {
+            this.loading = true;
+            this.loadingText = '검사 결과 등록 중...';
+            // 1) 감리자 적합/부적합 자동 채움 (적합/부적합 판정된 항목만, 없으면 건너뜀)
+            if (judged.length) {
+                const response = await client.mutate({
+                    mutation: gql `
+            mutation UpdateChecklistItemsAiJudgment($items: [ChecklistItemAiJudgment!]!) {
+              updateChecklistItemsAiJudgment(items: $items)
+            }
+          `,
+                    variables: {
+                        items: judged.map(it => ({
+                            id: it.item_id,
+                            supervisoryConfirmStatus: it.verdict === 'pass' ? 'T' : 'F'
+                        }))
+                    }
+                });
+                if (response.errors)
+                    throw new Error(((_a = response.errors[0]) === null || _a === void 0 ? void 0 : _a.message) || '검사 등록에 실패했습니다.');
+            }
+            // 2) 항목별 첨부: 판단 근거(AI판단 텍스트) + 근거 사진 (판정 여부와 무관하게 전체 항목)
+            const attachments = [];
+            for (const it of items) {
+                if (it.ai_report) {
+                    attachments.push({
+                        file: new File([it.ai_report], `AI판단_${(it.text || it.item_id).slice(0, 30)}.txt`, { type: 'text/plain' }),
+                        refBy: it.item_id,
+                        refType: 'ChecklistItem',
+                        description: 'AI판단'
+                    });
+                }
+                for (const n of it.used_images || []) {
+                    const photo = this.photos[n - 1];
+                    if (photo) {
+                        attachments.push({ file: photo.file, refBy: it.item_id, refType: 'ChecklistItem', description: 'AI판단' });
+                    }
+                }
+            }
+            if (attachments.length) {
+                const attachResponse = await client.mutate({
+                    mutation: gql `
+            mutation CreateAttachments($attachments: [NewAttachment!]!) {
+              createAttachments(attachments: $attachments) {
+                id
+              }
+            }
+          `,
+                    variables: { attachments },
+                    context: { hasUpload: true }
+                });
+                if (attachResponse.errors)
+                    throw new Error(((_b = attachResponse.errors[0]) === null || _b === void 0 ? void 0 : _b.message) || 'AI판단 자료 첨부에 실패했습니다.');
+            }
+            notify({ message: `검사 결과를 등록하였습니다. (자동 판정 ${judged.length}건 반영)` });
+            // 등록 후 체크리스트 화면으로 이동
+            navigate(`building-inspection-detail-checklist/${this.buildingInspectionId}`);
+        }
+        catch (error) {
+            console.error('검사 등록 실패:', error);
+            notify({ message: error.message, level: 'error' });
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+};
+BuildingInspectionAiMeasurement.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: grid;
+        grid-template-rows: 75px 1fr;
+        color: #4e5055;
+        width: 100%;
+        height: 100%;
+        background-color: #f7f7f7;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      div[body] {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        overflow-y: auto;
+        padding: var(--spacing-medium);
+        gap: 12px;
+      }
+
+      .page-title {
+        text-align: center;
+        font-size: 16px;
+        font-weight: 700;
+        color: #333;
+      }
+
+      .page-title span[target] {
+        color: #7d2f2f;
+        text-decoration: underline;
+      }
+
+      /* ─── 1단계: 촬영 가이드 ─── */
+      .guide-container {
+        max-width: 560px;
+        width: 100%;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+      }
+
+      .step-badge {
+        align-self: flex-start;
+        background: #f7e9e9;
+        color: #7d2f2f;
+        font-size: 12px;
+        font-weight: 700;
+        padding: 4px 10px;
+        border-radius: 12px;
+      }
+
+      .guide-title {
+        font-size: 26px;
+        font-weight: 800;
+        color: #222;
+        line-height: 1.3;
+        white-space: pre-line;
+      }
+
+      .guide-desc {
+        font-size: 13px;
+        color: #777;
+      }
+
+      .card {
+        background: #fff;
+        border: 1px solid #e5e5e5;
+        border-radius: 10px;
+        padding: 16px;
+      }
+
+      .card h4 {
+        margin: 0 0 10px 0;
+        font-size: 14px;
+        color: #333;
+      }
+
+      .card ul {
+        margin: 0;
+        padding-left: 4px;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .card ul li {
+        font-size: 13px;
+        color: #555;
+        display: flex;
+        gap: 8px;
+      }
+
+      .card ul li::before {
+        content: '';
+        flex-shrink: 0;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #7d2f2f;
+        margin-top: 6px;
+      }
+
+      .progress-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 13px;
+        color: #555;
+        font-weight: 600;
+      }
+
+      .progress-bar {
+        height: 6px;
+        border-radius: 3px;
+        background: #eee;
+        overflow: hidden;
+      }
+
+      .progress-bar div {
+        height: 100%;
+        background: #7d2f2f;
+        transition: width 0.3s;
+      }
+
+      .next-shot {
+        font-size: 13px;
+        font-weight: 700;
+        color: #333;
+      }
+
+      .slot-grid {
+        display: flex;
+        gap: 8px;
+      }
+
+      .slot {
+        flex: 1;
+        aspect-ratio: 1;
+        border: 1px dashed #ccc;
+        border-radius: 8px;
+        background: #fafafa;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 4px;
+        font-size: 12px;
+        color: #999;
+        text-align: center;
+        padding: 4px;
+        overflow: hidden;
+        cursor: pointer;
+      }
+
+      .slot md-icon {
+        --md-icon-size: 28px;
+        color: #b5b5b5;
+      }
+
+      .slot img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 6px;
+      }
+
+      .primary-button {
+        width: 100%;
+        border: none;
+        border-radius: 8px;
+        background: #7d2f2f;
+        color: #fff;
+        font-size: 16px;
+        font-weight: 700;
+        padding: 14px;
+        cursor: pointer;
+      }
+
+      .primary-button:disabled {
+        background: #ccc;
+        cursor: default;
+      }
+
+      .text-button {
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        background: #fff;
+        color: #555;
+        font-size: 13px;
+        padding: 8px 14px;
+        cursor: pointer;
+      }
+
+      input[type='file'] {
+        display: none;
+      }
+
+      /* ─── 2단계: 판정 결과 ─── */
+      .result-body {
+        display: flex;
+        gap: 14px;
+        align-items: flex-start;
+        min-height: 0;
+      }
+
+      .photo-pane {
+        flex: 1.1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .photo-pane .caption {
+        text-align: center;
+        font-size: 12px;
+        color: #999;
+      }
+
+      .photo-main {
+        border-radius: 10px;
+        overflow: hidden;
+        background: #000;
+        display: flex;
+        justify-content: center;
+        max-height: 480px;
+      }
+
+      .photo-main img {
+        max-width: 100%;
+        max-height: 480px;
+        object-fit: contain;
+      }
+
+      .photo-thumbs {
+        display: flex;
+        gap: 8px;
+        overflow-x: auto;
+        padding-bottom: 4px;
+      }
+
+      .photo-thumbs img {
+        width: 96px;
+        height: 72px;
+        object-fit: cover;
+        border-radius: 6px;
+        cursor: pointer;
+        border: 2px solid transparent;
+      }
+
+      .photo-thumbs img[selected] {
+        border-color: #7d2f2f;
+      }
+
+      .items-pane {
+        flex: 1.4;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .summary-banner {
+        background: #f7e9e9;
+        border: 1px solid #eedada;
+        color: #7d2f2f;
+        font-size: 13px;
+        font-weight: 700;
+        border-radius: 8px;
+        padding: 10px 14px;
+      }
+
+      .group-title {
+        font-size: 14px;
+        font-weight: 700;
+        color: #333;
+        margin-top: 4px;
+      }
+
+      .item-card {
+        display: flex;
+        gap: 10px;
+        align-items: flex-start;
+        background: #fff;
+        border: 1px solid #e5e5e5;
+        border-radius: 10px;
+        padding: 12px;
+        cursor: pointer;
+      }
+
+      .item-card[selected] {
+        border-color: #7d2f2f;
+        box-shadow: 0 0 0 1px #7d2f2f inset;
+      }
+
+      .item-no {
+        flex-shrink: 0;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background: #7d2f2f;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 700;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .item-main {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .item-name {
+        font-size: 14px;
+        font-weight: 700;
+        color: #222;
+        margin-bottom: 4px;
+      }
+
+      .item-desc {
+        font-size: 12px;
+        color: #777;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .chip {
+        display: inline-block;
+        font-size: 11px;
+        font-weight: 700;
+        border-radius: 4px;
+        padding: 2px 6px;
+        margin-right: 6px;
+        background: #eef2f7;
+        color: #3f71a0;
+      }
+
+      .chip-verdict {
+        font-size: 12px;
+        font-weight: 700;
+        color: #555;
+      }
+
+      .badge {
+        flex-shrink: 0;
+        font-size: 12px;
+        font-weight: 700;
+        border-radius: 14px;
+        padding: 5px 12px;
+        white-space: nowrap;
+      }
+
+      .badge[pass] {
+        background: #e8f5e9;
+        color: #2e7d32;
+      }
+
+      .badge[fail] {
+        background: #fdecea;
+        color: #c62828;
+      }
+
+      .badge[etc] {
+        background: #fff8e1;
+        color: #b7791f;
+      }
+
+      .capture-button {
+        flex-shrink: 0;
+        border: none;
+        border-radius: 14px;
+        background: #fff3e0;
+        color: #b7791f;
+        font-size: 12px;
+        font-weight: 700;
+        padding: 6px 12px;
+        cursor: pointer;
+      }
+
+      /* ─── 우측 패널 (상세/재촬영/리포트) ─── */
+      .side-pane {
+        flex: 1;
+        min-width: 280px;
+        max-width: 360px;
+        background: #fff;
+        border: 1px solid #e5e5e5;
+        border-radius: 10px;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .side-pane h3 {
+        margin: 0;
+        font-size: 16px;
+        color: #222;
+      }
+
+      .detail-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .detail-header h3 {
+        font-size: 18px;
+      }
+
+      .detail-summary {
+        font-size: 12px;
+        color: #555;
+        line-height: 1.7;
+        white-space: pre-line;
+        border-bottom: 1px solid #f0f0f0;
+        padding-bottom: 10px;
+      }
+
+      .kv-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+      }
+
+      .kv {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        border: 1px solid #eee;
+        border-radius: 8px;
+        padding: 10px 12px;
+        background: #fff;
+      }
+
+      .kv label {
+        font-size: 11px;
+        color: #999;
+      }
+
+      .kv span {
+        font-size: 15px;
+        font-weight: 700;
+        color: #333;
+      }
+
+      .kv .verdict-value[pass] {
+        color: #2e7d32;
+      }
+
+      .kv .verdict-value[fail] {
+        color: #c62828;
+      }
+
+      .reason-box {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        font-size: 12px;
+        line-height: 1.7;
+      }
+
+      .reason-verdict {
+        border-left: 3px solid #7d2f2f;
+        background: #fdf6f6;
+        color: #333;
+        padding: 8px 10px;
+      }
+
+      .why-box {
+        background: #fff8e1;
+        border: 1px solid #f4e4b5;
+        border-radius: 8px;
+        padding: 10px;
+        font-size: 12px;
+        color: #7a5c14;
+        line-height: 1.6;
+      }
+
+      .report-counts {
+        display: flex;
+        text-align: center;
+        border: 1px solid #eee;
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .report-counts div {
+        flex: 1;
+        padding: 10px 0;
+      }
+
+      .report-counts b {
+        display: block;
+        font-size: 20px;
+      }
+
+      .report-counts small {
+        font-size: 11px;
+        color: #888;
+      }
+
+      .report-counts div[pass] b {
+        color: #2e7d32;
+      }
+
+      .report-counts div[fail] b {
+        color: #c62828;
+      }
+
+      .report-counts div[etc] b {
+        color: #b7791f;
+      }
+
+      .report-item {
+        border-bottom: 1px solid #f0f0f0;
+        font-size: 13px;
+        color: #333;
+      }
+
+      .report-head {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 10px 0;
+        cursor: pointer;
+      }
+
+      .report-head .report-text {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .report-caret {
+        --md-icon-size: 20px;
+        color: #999;
+        transition: transform 0.2s;
+      }
+
+      .report-caret[open] {
+        transform: rotate(180deg);
+      }
+
+      .report-basis {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        font-size: 12px;
+        color: #555;
+        background: #f7f7f7;
+        border-radius: 6px;
+        padding: 10px;
+        margin: 0 0 10px 0;
+      }
+
+      .report-basis .report-ai {
+        white-space: pre-line;
+        color: #333;
+      }
+
+      .report-basis .report-used {
+        color: #888;
+      }
+
+      .report-item .verdict {
+        font-weight: 700;
+        flex-shrink: 0;
+      }
+
+      .report-item .verdict[pass] {
+        color: #2e7d32;
+      }
+
+      .report-item .verdict[fail] {
+        color: #c62828;
+      }
+
+      .report-item .verdict[etc] {
+        color: #b7791f;
+      }
+
+      /* ─── 로딩 오버레이 ─── */
+      .loading-overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 2000;
+      }
+
+      .loading-overlay .box {
+        background: #fff;
+        padding: 32px 48px;
+        border-radius: 12px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        font-size: 14px;
+        color: #555;
+      }
+
+      .empty-state {
+        text-align: center;
+        color: #999;
+        font-size: 14px;
+        padding: 60px 0;
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "project", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "buildingInspection", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionAiMeasurement.prototype, "buildingInspectionId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "guide", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], BuildingInspectionAiMeasurement.prototype, "photos", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "result", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], BuildingInspectionAiMeasurement.prototype, "mainPhotoIndex", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionAiMeasurement.prototype, "panel", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "selectedItem", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], BuildingInspectionAiMeasurement.prototype, "recaptureBase", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "expandedReportId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], BuildingInspectionAiMeasurement.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionAiMeasurement.prototype, "loadingText", void 0);
+__decorate([
+    query('#photoInput'),
+    __metadata("design:type", HTMLInputElement
+    /* 슬롯 클릭으로 선택기를 연 경우 대상 슬롯 인덱스 (null이면 뒤에 추가) */
+    )
+], BuildingInspectionAiMeasurement.prototype, "photoInputEl", void 0);
+BuildingInspectionAiMeasurement = __decorate([
+    customElement('building-inspection-detail-ai-measurement')
+], BuildingInspectionAiMeasurement);
+export { BuildingInspectionAiMeasurement };
+//# sourceMappingURL=building-inspection-detail-ai-measurement.js.map