<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue';
import { onBeforeRouteLeave, useRouter } from 'vue-router';

const { proxy } = getCurrentInstance()

const router = useRouter();
const formData = ref({});
const activityVisible = ref(false);
const equipmentVisible = ref(false);
onMounted(() => {
  const activityStr = sessionStorage.getItem('activityInfo');
  const equipmentStr = sessionStorage.getItem('equipmentInfo');
  if (activityStr) {
    formData.value = JSON.parse(activityStr);
    equipmentVisible.value = false
    activityVisible.value = true;
  }

  if (equipmentStr) {
    formData.value = JSON.parse(equipmentStr);
    activityVisible.value = false
    equipmentVisible.value = true;
  }
});

const returnInspectionCycle = (inspectionCycle) => {
  if (!inspectionCycle) return '';
  if (inspectionCycle === '不定期') return '不定期';
  return '每' + inspectionCycle + '一次';
};

// 控制哪个面板是展开的
const activeNames = ref(['risk', 'steps', 'controlMeasures']);

const jumpHiddenDanger = (hiddenDangerId) => {
  sessionStorage.setItem('hiddenDangerId', hiddenDangerId);
  router.push('/yinhuan/registration_edit/index');
};

onBeforeRouteLeave((to, from, next) => {
  if (to.path === '/yinhuan/riskChecklistRecords') {
    sessionStorage.removeItem('activityInfo');
    sessionStorage.removeItem('equipmentInfo');
  }
  next();
});

</script>

<template>
  <div class="page-container">
    <van-sticky>
      <van-nav-bar title="风险隐患排查记录详情">
      </van-nav-bar>
    </van-sticky>
    <div class="scroll-container">
      <div v-if="activityVisible" class="hierarchical-data-view">
        <van-collapse v-model="activeNames">
          <van-collapse-item title="风险点" name="risk">
            <van-cell title="编号" :value="formData.numbering" class="indent-level-1" />
            <van-cell title="类型" :value="formData.activityType" class="indent-level-1" />
            <van-cell title="名称" :value="formData.activityName" class="indent-level-1" />
          </van-collapse-item>
        </van-collapse>

        <van-collapse v-model="activeNames">
          <van-collapse-item title="作业步骤" name="steps">
            <van-cell title="序号" :value="formData.serialNumber" class="indent-level-1" />
            <van-cell title="名称" :value="formData.jobSteps" class="indent-level-1" />
          </van-collapse-item>
        </van-collapse>

        <van-cell-group>
          <van-cell title="危险源或潜在事件" :value="formData.hazardSources" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="评价级别" :value="formData.evaluationLevel" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="风险分级" :value="formData.riskGrading" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="可能发生的事故类型及后果" :value="formData.possibleAccidentType" />
        </van-cell-group>

        <van-collapse v-model="activeNames">
          <van-collapse-item title="管控措施" name="controlMeasures">
            <van-cell title="工程技术措施" :value="formData.engineeringAndTechnical" class="indent-level-1" />
            <van-cell title="管理措施" :value="formData.management" class="indent-level-1" />
            <van-cell title="培训教育措施" :value="formData.trainingAndEducation" class="indent-level-1" />
            <van-cell title="个体防护措施" :value="formData.personalProtective" class="indent-level-1" />
            <van-cell title="应急处置措施" :value="formData.emergencyResponse" class="indent-level-1" />
          </van-collapse-item>
        </van-collapse>

        <van-cell-group>
          <van-cell title="管控层级" :value="formData.controlLevel" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="责任单位" :value="formData.responsibleUnitName" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="责任人" :value="formData.responsiblePersonName" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="排查周期">
            <template #value>
              {{ returnInspectionCycle(formData.inspectionCycle) }}
            </template>
          </van-cell>
        </van-cell-group>

        <van-cell-group>
          <van-cell title="排查日期" :value="formData.inspectionDate" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="隐患详情">
            <template #value>
              <van-button v-if="formData.hiddenDangerId" type="danger" size="small" @click="jumpHiddenDanger(formData.hiddenDangerId)">隐患详情</van-button>
              <van-tag v-else type="success" size="small" >暂无隐患</van-tag>
            </template>
          </van-cell>
        </van-cell-group>
      </div>

      <div v-if="equipmentVisible" class="hierarchical-data-view">
        <van-collapse v-model="activeNames">
          <van-collapse-item title="风险点" name="risk">
            <van-cell title="类型" :value="formData.riskPointsType" class="indent-level-1" />
            <van-cell title="名称" :value="formData.riskPointsName" class="indent-level-1" />
          </van-collapse-item>
        </van-collapse>

        <van-collapse v-model="activeNames">
          <van-collapse-item title="检查项目" name="steps">
            <van-cell title="序号" :value="formData.serialNumber" class="indent-level-1" />
            <van-cell title="名称" :value="formData.inspectItem" class="indent-level-1" />
          </van-collapse-item>
        </van-collapse>

        <van-cell-group>
          <van-cell title="标准" :value="formData.standard" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="评价级别" :value="formData.evaluationLevel" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="风险分级" :value="formData.riskGrading" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="不符合标准情况及后果" :value="formData.consequences" />
        </van-cell-group>

        <van-collapse v-model="activeNames">
          <van-collapse-item title="管控措施" name="controlMeasures">
            <van-cell title="工程技术措施" :value="formData.engineeringAndTechnical" class="indent-level-1" />
            <van-cell title="管理措施" :value="formData.management" class="indent-level-1" />
            <van-cell title="培训教育措施" :value="formData.trainingAndEducation" class="indent-level-1" />
            <van-cell title="个体防护措施" :value="formData.personalProtective" class="indent-level-1" />
            <van-cell title="应急处置措施" :value="formData.emergencyResponse" class="indent-level-1" />
          </van-collapse-item>
        </van-collapse>

        <van-cell-group>
          <van-cell title="管控层级" :value="formData.controlLevel" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="责任单位" :value="formData.responsibleUnitName" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="责任人" :value="formData.responsiblePersonName" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="排查周期" :value="formData.inspectionCycle" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="排查频率" :value="formData.inspectionFrequency" />
        </van-cell-group>

        <van-cell-group>
          <van-cell title="排查日期" :value="formData.inspectionDate" />
        </van-cell-group>


        <van-cell-group>
          <van-cell title="隐患详情">
            <template #value>
              <van-button v-if="formData.hiddenDangerId" type="danger" size="small" @click="jumpHiddenDanger(formData.hiddenDangerId)">隐患详情</van-button>
              <van-tag v-else type="success" size="small" >暂无隐患</van-tag>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-container {
  height: 100vh; /* 关键：外层容器高度设为视口高度 */
  display: flex;
  flex-direction: column;
}

/*  overflow-y: auto; !* 启用垂直滚动 *!*/


.scroll-container {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}

/* 可选：隐藏滚动条（视觉优化） */
.scroll-container::-webkit-scrollbar {
  display: none;
}

.hierarchical-data-view {
  padding: 12px;
}

/* 为子层级添加缩进 */
.indent-level-1 {
  margin-left: 20px; /* 根据实际视觉效果调整缩进量 */
}

/* 可选：为 CellGroups 或 Collapse 添加一些底部外边距，增加空间感 */
.van-cell-group, .van-collapse {
  margin-bottom: 10px;
}

</style>
