<template>
  <view>
    <view class="modal_show_btn" @click="show = true"> 查看变更前内容 </view>
    <up-popup
      :customStyle="{}"
      :overlayStyle="{}"
      :show="show"
      @close="onClose"
      mode="center"
      :round="20"
      :closeable="false"
    >
      <view class="popup_content">
        <view class="emergency_card">
          <view class="emergency_content">{{ props?.data?.emergency_description }}</view>
          <view class="emergency_cell">
            {{ props?.data?.one_emergency_categories_name }}/{{
              props?.data?.two_emergency_categories_name
            }}
          </view>
          <view class="emergency_cell">
            <text>所属项目:</text> {{ props?.data?.asset_project?.name || '-' }}
          </view>
          <view class="emergency_cell">
            <text>提报时间:</text> {{ props?.data?.created_at || '' }}
          </view>
          <view class="emergency_cell" v-if="props?.data?.emergency_location">
            <text>事发地点:</text> {{ props?.data?.emergency_location }}
          </view>
          <view class="emergency_cell" v-if="props?.data?.emergency_description">
            <text>事件描述:</text> {{ props?.data?.emergency_description }}
          </view>
          <view class="emergency_cell" v-if="props?.data?.emergency_cause">
            <text>事件原因:</text> {{ props?.data?.emergency_cause }}
          </view>
          <view class="emergency_cell" v-if="props?.data?.cause_result">
            <text>造成结果:</text> {{ props?.data?.cause_result }}
          </view>
          <view class="emergency_cell" v-if="props?.data?.supplement">
            <text>补充信息:</text> {{ props?.data?.supplement }}
          </view>
          <view class="emergency_cell" v-if="props?.data?.related_person">
            <text>关联人物:</text> {{ props?.data?.related_person }}
          </view>
          <view class="emergency_label"> 事件相关图片: </view>
          <view class="emergency_images_content">
            <view v-for="(i, index) in props?.data?.emergency_images" :key="`item_${index}`">
              <image :src="i?.url" mode="heightFix" />
            </view>
          </view>
        </view>
        <view class="popup_footer">
          <hs-button label="我已知晓" type="primary" @click="show = false" size="large" />
        </view>
      </view>
    </up-popup>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import method from '../method'
const props = defineProps(['data'])
const show = ref(false)
const onClose = () => {}
</script>
<style lang="scss" scoped>
.popup_content {
  width: 90vw;
  padding: 10rpx 0 0 0;
  .emergency_card {
    padding: 0;
  }
}
.modal_show_btn {
  color: #0082fa;
  font-size: 26rpx;
  padding: 10rpx 0 0 0;
}
.popup_footer {
  padding: 30rpx 30rpx 0rpx 30rpx;
}
</style>
