mky-vent-base/src/views/vent/home/selfIgnition/components/ManualView.vue

<template>
  <div class="ignition-view manual-view">
    <!-- 左：人工录入 -->
    <ModuleCommon
      :show-style="panelShowStyle(23, 105, 335, 934)"
      :module-data="EMPTY_MODULE_DATA"
      module-name="人工录入"
      device-type="ignition_manual_input"
      :data="{}"
      :visible="true"
    >
      <div class="manual-form">
        <div class="form-toolbar">
          <div class="target-row">
            <span class="target-label">评价对象：</span>
            <PanelSelect v-model="manageSystemId" :options="sceneSelectOptions" @update:model-value="loadLatest" />
          </div>
          <div class="eval-type-tabs">
            <span :class="{ active: evalType === 1 }" @click="changeEvalType(1)">采前评价</span>
            <span :class="{ active: evalType === 2 }" @click="changeEvalType(2)">采中评价</span>
          </div>
        </div>

        <div class="group-list">
          <div v-if="loadingOptions" class="form-loading">评价指标加载中...</div>
          <template v-else>
            <div v-for="group in fieldGroups" :key="group.key" class="form-group">
              <div class="group-collapse" @click="toggleGroup(group.key)">
                <img class="group-icon" src="@/assets/images/vent/home/selfIgnition/form-icon.svg" alt="" />
                <span>{{ group.title }}</span>
                <i class="collapse-arrow" :class="{ collapsed: collapsed[group.key] }"></i>
              </div>
              <template v-if="!collapsed[group.key]">
                <div class="group-title">
                  <span class="title-bars">
                    <i v-for="n in 4" :key="n"></i>
                  </span>
                  <span>{{ group.title }}指标</span>
                  <span class="title-dots">
                    <i v-for="n in 3" :key="n"></i>
                    <b></b>
                  </span>
                </div>
                <div class="field-list">
                  <div v-for="item in group.fields" :key="item.code" class="field-row">
                    <span class="field-label" :title="item.name">{{ item.name }}：</span>
                    <PanelSelect v-model="formValues[FIELD_BY_CODE[item.code]]" :options="selectOptions(item)" />
                  </div>
                </div>
              </template>
            </div>
            <div v-if="!fieldGroups.length" class="form-loading">暂无评价指标</div>
          </template>
        </div>

        <div class="form-actions">
          <button class="action-button preview-button" :disabled="busy" @click="preview">
            {{ previewing ? '计算中...' : '计算预览' }}
          </button>
          <button class="action-button submit-button" :disabled="busy" @click="submit">
            {{ submitting ? '提交中...' : '提交' }}
          </button>
        </div>
      </div>
    </ModuleCommon>

    <!-- 右：评价结果 -->
    <ModuleCommon
      :show-style="panelShowStyle(1523, 105, 337, 934)"
      :module-data="EMPTY_MODULE_DATA"
      module-name="评价结果"
      device-type="ignition_evaluation_result"
      :data="{}"
      :visible="true"
    >
      <div class="result-panel">
        <div class="result-top">
          <div class="score-line">
            <span class="score-label">安全评价得分：</span>
            <img class="score-info" src="@/assets/images/vent/home/selfIgnition/info-icon.svg" alt="由后端算法计算" />
            <span class="score-value">{{ resultScore }}</span>
          </div>
          <div class="gauge-line">
            <div class="gauge">
              <img class="gauge-segment gauge-segment-1" src="@/assets/images/vent/home/selfIgnition/risk-gauge.png" alt="" />
              <img class="gauge-segment gauge-segment-2" src="@/assets/images/vent/home/selfIgnition/risk-gauge.png" alt="" />
            </div>
            <span class="risk-tag" :style="{ '--risk-color': resultRiskColor }">{{ resultTagText }}</span>
          </div>
        </div>

        <div class="result-info">
          <div class="info-row"
            ><span>评价对象：</span><em>{{ resultTarget }}</em></div
          >
          <div class="info-row"
            ><span>数据时间：</span><em>{{ resultTime }}</em></div
          >
          <div class="info-row"><span>数据来源：</span><em>人工录入</em></div>
        </div>

        <div class="level-table">
          <div class="level-head"><span>评价等级</span><span>评分范围</span><span>对应颜色</span></div>
          <div
            v-for="item in levels"
            :key="item.level"
            class="level-row"
            :class="{ highlight: item.level === resultLevel }"
            :style="item.level === resultLevel ? { '--highlight-color': resultRiskColor } : undefined"
          >
            <span class="level-name">
              <i :style="{ background: item.color, boxShadow: `0 0 8px ${item.color}` }"></i>
              {{ item.level }}
            </span>
            <span>{{ item.range }}</span>
            <span>{{ item.colorName }}</span>
          </div>
        </div>

        <div class="suggestion-box">
          <span class="suggestion-icon"></span>
          <p>{{ resultSuggestion }}</p>
        </div>

        <button class="action-button report-button" :disabled="!hasEvaluation" @click="showReport = true">查看评价报告</button>
      </div>
    </ModuleCommon>

    <Transition name="ignition-fade">
      <div v-if="showReport" class="report-mask" @click.self="showReport = false">
        <div class="report-dialog">
          <div class="report-title">自然发火安全评价报告</div>
          <div class="report-body">
            <div class="report-row"
              ><span>评价对象</span><em>{{ resultTarget }}</em></div
            >
            <div class="report-row"
              ><span>评价类型</span><em>{{ evalTypeText }}</em></div
            >
            <div class="report-row"
              ><span>安全评价得分</span><em>{{ resultScore }}</em></div
            >
            <div class="report-row"
              ><span>风险等级</span><em :style="{ color: resultRiskColor }">{{ resultTagText }}</em></div
            >
            <div class="report-row"
              ><span>数据时间</span><em>{{ resultTime }}</em></div
            >
            <div class="report-row"><span>数据来源</span><em>人工录入</em></div>
            <div class="report-suggestion">
              <span class="suggestion-icon"></span>
              <p>{{ resultSuggestion }}</p>
            </div>
          </div>
          <button class="action-button report-close" @click="showReport = false">关闭</button>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script lang="ts" setup>
  import { computed, onMounted, reactive, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import ModuleCommon from '../../configurable/components/ModuleCommon.vue';
  import PanelSelect from './PanelSelect.vue';
  import { EMPTY_MODULE_DATA, panelShowStyle } from '../utils';
  import { useMessage } from '/@/hooks/web/useMessage';
  import {
    calculateSafetyEvaluation,
    getSafetyEvaluationByScene,
    getSafetyItemOptions,
    getSafetySceneList,
    saveSafetyEvaluation,
  } from '../safetyEvaluation.api';
  import { EVAL_RISK_LEVELS, EVAL_RISK_MAP, FIELD_BY_CODE, FALLBACK_SAFETY_ITEMS, FALLBACK_SCENE } from '../evaluation.config';
  import type { SafetyEvaluationEntity, SafetyItem, SafetyScene } from '../evaluation.config';

  const route = useRoute();
  const { createMessage } = useMessage();

  const levels = EVAL_RISK_LEVELS;
  const items = ref<SafetyItem[]>([]);
  const scenes = ref<SafetyScene[]>([]);
  const manageSystemId = ref('');
  const evalType = ref(1);
  const formValues = reactive<Record<string, string>>({});
  const collapsed = reactive<Record<string, boolean>>({});
  const evaluation = ref<SafetyEvaluationEntity | null>(null);
  const loadingOptions = ref(false);
  const loadingScenes = ref(false);
  const previewing = ref(false);
  const submitting = ref(false);
  const showReport = ref(false);

  const busy = computed(() => loadingOptions.value || previewing.value || submitting.value);

  const sceneSelectOptions = computed(() =>
    scenes.value.map((scene) => ({
      label: scene.systemname,
      value: scene.id,
      score: 0,
    }))
  );

  const selectedScene = computed(() => scenes.value.find((scene) => scene.id === manageSystemId.value));

  const targetName = computed(() => {
    const scene = selectedScene.value;
    if (!scene) return '未选择评价对象';
    const name = scene.systemname;
    return name.endsWith('工作面') || name.endsWith('采空区') ? name : `${name}工作面`;
  });

  const visibleItems = computed(() =>
    items.value.filter((item) => {
      const weight = evalType.value === 2 ? item.midWeight : item.preWeight;
      return weight !== null && weight !== undefined;
    })
  );

  const fieldGroups = computed(() => {
    const groups = [
      { key: 'pre', title: '采前评价', fields: visibleItems.value.filter((item) => item.code <= 6) },
      { key: 'condition', title: '开采条件', fields: visibleItems.value.filter((item) => item.code >= 7 && item.code <= 11) },
    ];
    if (evalType.value === 2) {
      groups.push({ key: 'monitor', title: '监测与措施', fields: visibleItems.value.filter((item) => item.code >= 12) });
    }
    return groups.filter((group) => group.fields.length);
  });

  const hasEvaluation = computed(() => !!evaluation.value);
  const resultLevel = computed(() => evaluation.value?.riskLevel || '');
  const resultLevelMeta = computed(() => EVAL_RISK_MAP[resultLevel.value] || null);
  const resultRiskColor = computed(() => resultLevelMeta.value?.color || '#3df6ff');
  const resultTagText = computed(() => resultLevel.value || '未评价');
  const resultTarget = computed(() => evaluation.value?.workfaceName || targetName.value);
  const resultTime = computed(() => evaluation.value?.createTime || '--');
  const resultSuggestion = computed(() => resultLevelMeta.value?.suggestion || '请完成左侧指标选择并提交评价。');
  const evalTypeText = computed(() => (evalType.value === 1 ? '采前评价' : '采中评价'));

  const resultScore = computed(() => {
    const value = evaluation.value?.totalScore;
    if (value === null || value === undefined || value === '') return '--';
    const score = Number(value);
    return Number.isFinite(score) ? score.toFixed(2) : String(value);
  });

  function selectOptions(item: SafetyItem) {
    return item.options.map((option) => ({
      label: option.name,
      value: option.name,
      score: option.normalizedScore,
    }));
  }

  function toggleGroup(key: string) {
    collapsed[key] = !collapsed[key];
  }

  function formatDateTime(date: Date) {
    const pad = (value: number) => `${value}`.padStart(2, '0');
    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
  }

  function normalizeItems(list: any[]): SafetyItem[] {
    return (list || [])
      .map((item) => ({
        code: Number(item.code),
        name: item.name,
        preWeight: item.preWeight ?? null,
        midWeight: item.midWeight ?? null,
        options: (item.options || []).map((option: any) => {
          if (typeof option === 'string') return { name: option, normalizedScore: 0 };
          return { name: option.name, normalizedScore: option.normalizedScore ?? 0 };
        }),
      }))
      .filter((item) => item.code && item.options.length);
  }

  function initDefaults() {
    items.value.forEach((item) => {
      const field = FIELD_BY_CODE[item.code];
      if (field && !formValues[field]) {
        formValues[field] = item.options[0]?.name || '';
      }
    });
  }

  async function loadItems() {
    loadingOptions.value = true;
    try {
      const res: any = await getSafetyItemOptions();
      const list = Array.isArray(res) ? res : (res?.result ?? []);
      items.value = normalizeItems(list);
      if (!items.value.length) {
        items.value = normalizeItems(FALLBACK_SAFETY_ITEMS);
      }
    } catch {
      items.value = normalizeItems(FALLBACK_SAFETY_ITEMS);
      createMessage.warning('评价指标接口异常，已使用内置指标字典');
    } finally {
      loadingOptions.value = false;
      initDefaults();
    }
  }

  async function loadScenes() {
    loadingScenes.value = true;
    try {
      const res: any = await getSafetySceneList();
      const records = res?.records || res?.result?.records || [];
      const list: SafetyScene[] = records.map((record: any) => ({
        id: String(record.id ?? record.deviceID ?? ''),
        systemname: record.systemname || record.name || record.sysname || '未命名场景',
      }));
      scenes.value = list.length ? list : [{ ...FALLBACK_SCENE }];
    } catch {
      scenes.value = [{ ...FALLBACK_SCENE }];
    } finally {
      loadingScenes.value = false;
      const queryScene = (route.query.systemID || route.query.manageSystemId || route.query.sceneId) as string;
      if (queryScene && !scenes.value.some((scene) => scene.id === queryScene)) {
        scenes.value.unshift({ id: queryScene, systemname: '当前场景' });
      }
      manageSystemId.value = queryScene || scenes.value[0]?.id || '';
    }
  }

  function applyEvaluation(entity: SafetyEvaluationEntity) {
    if (!entity) return;
    evaluation.value = {
      ...entity,
      createTime: entity.createTime || formatDateTime(new Date()),
    };
    items.value.forEach((item) => {
      const field = FIELD_BY_CODE[item.code];
      const value = entity[field];
      if (field && value) {
        formValues[field] = value;
      }
    });
  }

  async function loadLatest() {
    evaluation.value = null;
    if (!manageSystemId.value) {
      return;
    }
    try {
      const res: any = await getSafetyEvaluationByScene(manageSystemId.value);
      const data = res?.result ?? res;
      const entity = evalType.value === 2 ? data?.miningEval : data?.beforeEval;
      if (entity) {
        applyEvaluation(entity);
      } else {
        evaluation.value = null;
      }
    } catch {
      evaluation.value = null;
    }
  }

  function changeEvalType(type: number) {
    if (evalType.value === type) return;
    evalType.value = type;
    evaluation.value = null;
    loadLatest();
  }

  function buildPayload() {
    const payload: Record<string, any> = {
      evalType: evalType.value,
      workfaceName: targetName.value,
    };
    if (manageSystemId.value) {
      payload.manageSystemId = manageSystemId.value;
    }
    visibleItems.value.forEach((item) => {
      const field = FIELD_BY_CODE[item.code];
      if (field) {
        payload[field] = formValues[field];
      }
    });
    return payload;
  }

  function validateForm() {
    for (const item of visibleItems.value) {
      const field = FIELD_BY_CODE[item.code];
      if (field && !formValues[field]) {
        createMessage.warning(`请选择【${item.name}】`);
        return false;
      }
    }
    return true;
  }

  function getApiErrorMessage(error: any, fallback: string) {
    const status = error?.response?.status || error?.status || error?.code;
    if (status === 404) {
      return '评价接口未部署（404），请确认后端服务';
    }
    return error?.message || error?.msg || fallback;
  }

  async function preview() {
    if (!validateForm()) return;
    previewing.value = true;
    try {
      const res: any = await calculateSafetyEvaluation(buildPayload());
      applyEvaluation(res?.result ?? res);
      createMessage.success('计算完成');
    } catch (error) {
      createMessage.error(getApiErrorMessage(error, '计算失败，请检查指标选项'));
    } finally {
      previewing.value = false;
    }
  }

  async function submit() {
    if (!validateForm()) return;
    submitting.value = true;
    try {
      const res: any = await saveSafetyEvaluation(buildPayload());
      applyEvaluation(res?.result ?? res);
      createMessage.success('评价已保存');
    } catch (error) {
      createMessage.error(getApiErrorMessage(error, '评价保存失败'));
    } finally {
      submitting.value = false;
    }
  }

  onMounted(async () => {
    await loadItems();
    await loadScenes();
    await loadLatest();
  });
</script>

<style lang="less" scoped>
  .manual-view {
    position: absolute;
    inset: 0;
  }

  .manual-form {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px 10px 12px;
    box-sizing: border-box;
  }

  .form-toolbar {
    flex: none;
  }

  .target-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;

    :deep(.ignition-select) {
      flex: 1;
      min-width: 0;
      height: 32px;
      font-size: 13px;
    }
  }

  .target-label {
    flex: none;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
  }

  .eval-type-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;

    span {
      flex: 1;
      height: 30px;
      line-height: 30px;
      border: 1px solid rgba(61, 246, 255, 0.25);
      background: rgba(8, 42, 70, 0.6);
      color: #a9dcf4;
      font-size: 13px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;

      &.active {
        border-color: rgba(61, 246, 255, 0.7);
        background: linear-gradient(180deg, #2a5985 0%, #1d4773 100%);
        color: #fff;
      }
    }
  }

  .group-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(61, 246, 255, 0.35);
      border-radius: 2px;
    }
  }

  .form-group {
    margin-bottom: 8px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .group-collapse {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 8px;
    border-left: 2px solid #3df6ff;
    background: linear-gradient(90deg, rgba(15, 77, 120, 0.9), rgba(9, 43, 70, 0.15));
    color: #fff;
    font-size: 15px;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
  }

  .group-icon {
    width: 13px;
    height: 15px;
  }

  .collapse-arrow {
    margin-left: auto;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #cfefff;
    transition: transform 0.2s;

    &.collapsed {
      transform: rotate(-90deg);
    }
  }

  .group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 4px;
    color: #a9dcf4;
    font-size: 12px;
    letter-spacing: 0.5px;
  }

  .title-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;

    i {
      width: 3px;
      background: linear-gradient(180deg, #b3fff5, #17b7ff);

      &:nth-child(1) {
        height: 5px;
      }

      &:nth-child(2) {
        height: 12px;
      }

      &:nth-child(3) {
        height: 8px;
      }

      &:nth-child(4) {
        height: 4px;
      }
    }
  }

  .title-dots {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;

    i {
      width: 2px;
      height: 2px;
      background: rgba(61, 246, 255, 0.65);
    }

    b {
      width: 3px;
      height: 3px;
      background: #3df6ff;
      box-shadow: 0 0 4px rgba(61, 246, 255, 0.9);
    }
  }

  .field-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .field-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 42px;

    :deep(.ignition-select) {
      flex: 1;
      min-width: 0;
      height: 34px;
      font-size: 13px;
    }
  }

  .field-label {
    width: 126px;
    flex: none;
    text-align: right;
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    white-space: normal;
    word-break: break-all;
  }

  .form-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 160px;
    color: #a9dcf4;
    font-size: 13px;
  }

  .form-actions {
    display: flex;
    flex: none;
    gap: 8px;
    margin-top: 8px;

    .action-button {
      flex: 1;
      width: auto;
      margin-top: 0;
    }
  }

  .preview-button {
    background: linear-gradient(180deg, rgba(13, 74, 115, 0.9) 0%, rgba(8, 47, 77, 0.95) 100%);

    &::after {
      display: none;
    }
  }

  .result-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 8px 12px 12px;
    box-sizing: border-box;
  }

  .result-top {
    flex: none;
    height: 165px;
    padding-top: 10px;
    box-sizing: border-box;
    background: url('@/assets/images/vent/home/selfIgnition/result-top-bg.png') no-repeat center / 100% 100%;
  }

  .score-line {
    display: flex;
    align-items: baseline;
    padding: 0 20px;
  }

  .score-label {
    color: #fff;
    font-size: 19px;
    letter-spacing: 1px;
  }

  .score-info {
    width: 12px;
    height: 12px;
    margin-left: 5px;
    align-self: center;
    opacity: 0.85;
  }

  .score-value {
    margin-left: 16px;
    color: #fff;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.35);
  }

  .gauge-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding: 0 18px;
  }

  .gauge {
    display: flex;
    align-items: center;
    width: 150px;
    height: 26px;
  }

  .gauge-segment {
    width: 80px;
    height: 22px;
    object-fit: fill;

    & + & {
      margin-left: -8px;
    }
  }

  .gauge-segment-2 {
    opacity: 0.72;
  }

  .risk-tag {
    display: flex;
    align-items: center;
    width: 159px;
    height: 34px;
    padding-left: 22px;
    box-sizing: border-box;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
    -webkit-mask: url('@/assets/images/vent/home/selfIgnition/risk-tag.svg') no-repeat center / 100% 100%;
    mask: url('@/assets/images/vent/home/selfIgnition/risk-tag.svg') no-repeat center / 100% 100%;
    background: var(--risk-color, #3df6ff);
  }

  .result-info {
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 10px 14px;
    border-left: 1px solid rgba(61, 246, 255, 0.16);
    border-right: 1px solid rgba(61, 246, 255, 0.16);
    background: rgba(7, 42, 70, 0.62);
  }

  .info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    color: #fff;
    font-size: 15px;
    letter-spacing: 0.5px;

    em {
      color: #3df6ff;
      font-style: normal;
      font-size: 16px;
      text-shadow: 0 0 8px rgba(61, 246, 255, 0.35);
    }
  }

  .level-table {
    flex: none;
    padding-top: 2px;
  }

  .level-head,
  .level-row {
    display: flex;
    align-items: center;
    text-align: center;
  }

  .level-head {
    height: 34px;
    border: 1px solid rgba(61, 246, 255, 0.4);
    border-radius: 4px;
    color: #3df6ff;
    font-size: 13px;
    background: url('@/assets/images/vent/home/selfIgnition/result-table-head.png') no-repeat center / 100% 100%;

    span:nth-child(1) {
      width: 42%;
    }

    span:nth-child(2) {
      width: 32%;
    }

    span:nth-child(3) {
      width: 26%;
    }
  }

  .level-row {
    position: relative;
    height: 38px;
    color: #e8f8ff;
    font-size: 14px;
    background: url('@/assets/images/vent/home/selfIgnition/result-row-glow.png') no-repeat center bottom / 100% 10px;

    span:nth-child(1) {
      width: 42%;
    }

    span:nth-child(2) {
      width: 32%;
    }

    span:nth-child(3) {
      width: 26%;
    }

    &.highlight {
      outline: 1px solid var(--highlight-color, #ff9d1c);
      outline-offset: -1px;
      background-color: rgba(255, 157, 28, 0.08);
      box-shadow: inset 0 0 18px rgba(255, 157, 28, 0.16);
    }
  }

  .level-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
    }
  }

  .suggestion-box {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: 14px 16px 14px 34px;
    box-sizing: border-box;
    overflow-y: auto;
    border: 1px solid rgba(61, 246, 255, 0.4);
    background: url('@/assets/images/vent/home/selfIgnition/result-block-bg.png') no-repeat center / 100% 100%;

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(61, 246, 255, 0.35);
      border-radius: 2px;
    }

    p {
      margin: 0;
      color: #fff;
      font-size: 15px;
      line-height: 30px;
      letter-spacing: 0.5px;
    }
  }

  .suggestion-icon {
    position: absolute;
    left: 16px;
    top: 20px;
    width: 9px;
    height: 9px;
    background: #f5222d;
    box-shadow: 0 0 9px rgba(245, 34, 45, 0.85);
    transform: rotate(45deg);
  }

  .action-button {
    position: relative;
    flex: none;
    width: 100%;
    height: 42px;
    border: 1px solid rgba(61, 246, 255, 0.55);
    border-radius: 3px;
    background:
      url('@/assets/images/vent/home/selfIgnition/submit-bg.png') no-repeat center / 100% 100%,
      linear-gradient(180deg, #1496e6 0%, #0a6cb5 100%);
    color: #fff;
    font-size: 16px;
    letter-spacing: 3px;
    cursor: pointer;
    transition:
      filter 0.2s,
      box-shadow 0.2s;

    &:hover:not(:disabled) {
      filter: brightness(1.12);
      box-shadow: 0 0 16px rgba(61, 246, 255, 0.35);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;

      &::after {
        display: none;
      }
    }

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -8px;
      height: 16px;
      background: url('@/assets/images/vent/home/selfIgnition/submit-glow.png') no-repeat center / 100% 100%;
      pointer-events: none;
    }
  }

  .report-dialog {
    width: 540px;
    padding: 22px 26px 24px;
    box-sizing: border-box;
    border: 1px solid rgba(61, 246, 255, 0.75);
    background: linear-gradient(180deg, #0b3a5e 0%, #071d33 100%);
    box-shadow: 0 0 40px rgba(61, 246, 255, 0.35);
  }

  .report-title {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(61, 246, 255, 0.3);
    color: #3df6ff;
    font-family: 'douyuFont', sans-serif;
    font-size: 20px;
    letter-spacing: 2px;
    text-align: center;
  }

  .report-body {
    padding: 16px 0;
  }

  .report-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    color: #cfefff;
    font-size: 14px;

    em {
      color: #fff;
      font-style: normal;
      font-size: 15px;
    }
  }

  .report-suggestion {
    position: relative;
    margin-top: 12px;
    padding: 14px 16px 14px 34px;
    border: 1px solid rgba(61, 246, 255, 0.3);
    background: rgba(7, 42, 70, 0.7);

    p {
      margin: 0;
      color: #fff;
      font-size: 14px;
      line-height: 26px;
    }
  }

  .report-close {
    margin-top: 4px;
  }

  .report-mask {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 10, 20, 0.72);
    backdrop-filter: blur(3px);
  }

  .ignition-fade-enter-active,
  .ignition-fade-leave-active {
    transition: opacity 0.2s ease;
  }

  .ignition-fade-enter-from,
  .ignition-fade-leave-to {
    opacity: 0;
  }
</style>