<template>
  <div v-if="recordData" class="drill-plan-record">
    <div class="item">
      <span class="label">演练内容：</span>
      <span class="text">{{ recordData.drillContent }}</span>
    </div>
    <div class="item">
      <span class="label">演练时间：</span>
      <span class="text">{{ recordData.drillTime }}</span>
    </div>
    <div class="item">
      <span class="label">演练地点：</span>
      <span class="text">{{ recordData.drillLocation }}</span>
    </div>
    <div class="item">
      <span class="label">参与人员描述：</span>
      <span class="text">{{ recordData.participants }}</span>
    </div>
    <div class="item">
      <span class="label">演练描述：</span>
      <span class="text">{{ recordData.drillDescription }}</span>
    </div>
    <div class="item">
      <span class="label">演练照片：</span>
      <ShowImages style="min-height: 100px; flex: 1" :image-list="getImageUrls(recordData.drillImage)" />
    </div>
    <div class="item">
      <span class="label">演练效果评估：</span>
      <span class="text">{{ recordData.drillEffectAssess }}</span>
    </div>
    <div class="item">
      <span class="label">演练问题分析：</span>
      <span class="text">{{ recordData.drillProblemAnalyse }}</span>
    </div>
    <div class="item">
      <span class="label">演练改进措施：</span>
      <span class="text">{{ recordData.drillImproveMethod }}</span>
    </div>
  </div>
  <div v-else class="empty">
    <img :src="EmptyImg" alt="empty" />
    <span>暂无数据</span>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { DrillPlanRecord } from '../types';
  import { queryEmergencyDrillRecordInView } from '@/api/emergency-drill/emergency-drill';
  import ShowImages from './ShowImages.vue';
  import EmptyImg from 'assets/images/empty@1X.png';

  const route = useRoute();
  const id = route.query.id;
  const recordData = ref<DrillPlanRecord>();

  async function getData() {
    try {
      recordData.value = await queryEmergencyDrillRecordInView(id);
    } catch (e) {
      console.log(e);
    }
  }

  onMounted(() => {
    getData();
  });

  function getImageUrls(imgs: string) {
    if (!imgs) return [];
    return JSON.parse(imgs);
  }
</script>

<style scoped>
  .data {
    display: flex;
  }
  .item {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 20px 10px;
  }
  .label {
    width: 150px;
    text-align: end;
  }
  .text {
    flex: 1;
    white-space: pre-wrap;
    /* word-break: break-all; */
  }
  .empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: calc(70vh - 500px);
  }
</style>
