<template>
  <view
    :class="
      useModel?.showData?.value?.status === 'PendingFollowUp' ||
      useModel?.showData?.value?.status === 'InProgress'
        ? 'emergency_show'
        : ''
    "
  >
    <view class="emergency_card">
      <view class="emergency_item_head">
        <view class="level"> {{ useModel?.showData?.value?.emergency_event_levels_name }} </view>
        <view :class="`status status_${useModel?.showData?.value?.status}`">
          <hs-enum-tag
            :value="useModel?.showData?.value?.status"
            :Enums="EmergencyEventsStatusEnum"
        /></view>
      </view>
      <view class="emergency_content">{{ useModel?.showData?.value?.name }}</view>
      <view class="emergency_cell">
        {{ useModel?.showData?.value?.one_emergency_categories_name }}/{{
          useModel?.showData?.value?.two_emergency_categories_name
        }}
      </view>
      <view class="emergency_cell">
        <text>所属项目:</text> {{ useModel?.showData?.value?.asset_project?.name || '' }}
      </view>
      <view class="emergency_cell">
        <text>提报时间:</text> {{ useModel?.showData?.value?.created_at || '' }}
      </view>
      <view class="emergency_cell" v-if="useModel?.showData?.value?.emergency_location">
        <text>事发地点:</text> {{ useModel?.showData?.value?.emergency_location }}
      </view>
      <view class="emergency_cell" v-if="useModel?.showData?.value?.emergency_description">
        <text>事件描述:</text> {{ useModel?.showData?.value?.emergency_description }}
      </view>
      <view class="emergency_cell" v-if="useModel?.showData?.value?.emergency_cause">
        <text>事件原因:</text> {{ useModel?.showData?.value?.emergency_cause }}
      </view>
      <view class="emergency_cell" v-if="useModel?.showData?.value?.cause_result">
        <text>造成结果:</text> {{ useModel?.showData?.value?.cause_result }}
      </view>
      <view class="emergency_cell" v-if="useModel?.showData?.value?.supplement">
        <text>补充信息:</text> {{ useModel?.showData?.value?.supplement }}
      </view>
      <view class="emergency_cell" v-if="useModel?.showData?.value?.related_person">
        <text>关联人物:</text> {{ useModel?.showData?.value?.related_person }}
      </view>
      <view class="emergency_label"> 事件相关图片: </view>
      <view class="emergency_images_content">
        <view
          v-for="(i, index) in useModel?.showData?.value?.emergency_images"
          :key="`item_${index}`"
          @click="method?.handlePreview(index)"
          class="emergency_images_item"
        >
          <image :src="i?.url" mode="aspectFill" />
        </view>
      </view>
    </view>
    <cc-scroll-loading
      :meta="useModel?.metaData?.value"
      @load="method?.handleLoad"
      :emptyShow="false"
    >
      <MyProcessLogs />
    </cc-scroll-loading>
    <hs-footer
      v-if="
        useModel?.showData?.value?.status === 'PendingFollowUp' ||
        useModel?.showData?.value?.status === 'InProgress'
      "
    >
      <view class="footer_page">
        <view class="update_btn" @click="method?.handleUpdateFollow">
          <uni-icons type="compose" size="24"></uni-icons>
          <view> 事件变更 </view>
        </view>
        <view class="footer_group_btn">
          <view class="btn" @click="method?.handleClose"> 申请关闭 </view>
          <view class="btn" @click="method?.handleUpdate"> 更新进度 </view>
        </view>
      </view>
    </hs-footer>
  </view>
</template>

<script setup lang="ts">
import MyProcessLogs from './components/ProcessLogs.vue'
import useModel from './model'
import method from './method'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import { EmergencyEventsStatusEnum } from '@/gen/Enums'

onLoad(e => {
  useModel.logsData.value = []
  useModel.formData.value = { id: e?.id }
  method?.getShow()
})
onShow(() => {
  if (useModel?.showData?.value?.id) {
    useModel.logsData.value = []
    useModel.formDataLogs.value.page = 1
    method?.getShow()
  }
})
onUnload(() => {
  useModel.showData.value = {}
  useModel.formData.value = {}
  useModel.metaData.value = {}
  useModel.logsData.value = []
  useModel.formDataLogs.value = {}
})
</script>
<style lang="scss">
@import './style.scss';
</style>
