<template>
  <header class="info-container__header">
    <span class="title">{{ getWarningType(warningInfoDetail?.disasterType || '') }}</span>
    <div class="disaster">
      <p class="info-item">
        灾害等级：<span class="info-content">{{ getDisasterLevel(warningInfoDetail?.disasterLevel || '') }}</span>
      </p>
      <p class="info-item">
        创建人：<span class="info-content">{{ warningInfoDetail?.realname }}</span>
      </p>
      <p class="info-item">
        预警时间：<span class="info-content">{{ warningInfoDetail?.warnTime }}</span>
      </p>
      <p class="info-item">
        信息来源：<span class="info-content">{{ warningInfoDetail?.source }}</span>
      </p>
      <p class="info-item">
        启动应急事件：<span class="info-content">{{ getEmergencyStatusLabel }}</span>
      </p>
      <p v-if="warningInfoDetail?.isEmergency === IS_EMERGENCY.EMERGENCY" class="info-item">
        应急事件类型：<span class="info-content">{{ emergencyEventLabel }}</span>
      </p>
    </div>
  </header>
  <section class="divider"></section>
  <section class="content">
    <!-- eslint-disable-next-line vue/no-v-html -->
    <div v-html="warningInfoDetail?.content"></div>
  </section>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed } from 'vue';
  import { useDisasterWarningHook } from '../hook';
  import type { WarningInfoDetailResponse } from '@/types/disaster-warning';
  import { getWarningInfoDetail } from '@/api/disaster-warning';
  import { useEmergencyProcedureHook } from '@/views/emergency/emergency-procedure/hooks';
  import { IS_EMERGENCY } from '@/views/disaster/constant';

  const props = defineProps<{
    id: number;
  }>();

  const { getWarningInfoDict, getWarningType, getDisasterLevelDict, getDisasterLevel } = useDisasterWarningHook();
  const { emergencyEventDice, getEmergencyEventDict } = useEmergencyProcedureHook();

  const warningInfoDetail = ref<WarningInfoDetailResponse>();

  const getEmergencyStatusLabel = computed(() => {
    if (!warningInfoDetail.value) return '-';
    return warningInfoDetail.value.isEmergency === IS_EMERGENCY.EMERGENCY ? '是' : '否';
  });

  const emergencyEventLabel = computed(() => {
    if (!warningInfoDetail.value || warningInfoDetail.value.isEmergency !== IS_EMERGENCY.EMERGENCY) {
      return '-';
    }
    const eventType = warningInfoDetail.value.eventType || '';
    return eventType || emergencyEventDice.value.find((item) => item.itemValue === eventType)?.itemValue || '-';
  });

  onMounted(() => {
    getWarningInfoDict();
    getDisasterLevelDict();
    getEmergencyEventDict();
    getWarningInfoDetail(props.id).then((res) => {
      warningInfoDetail.value = res;
    });
  });
</script>

<style scoped lang="scss">
  @use '../style/view-common.scss' as *;
  .disaster {
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 0;
  }
  .info-item {
    width: 50%;
    margin-bottom: 16px;
  }
</style>
