<template>
  <div class="drill-activity-container">
    <div class="drill-container__title">
      <div class="drill-container--line"></div>
      <span>演练实施</span>
    </div>
    <div class="drill-container__content">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="drill-container__content--item">
            <span class="label">演练时间：</span>
            <span class="value">{{ drillPlanItemDetail.drillTime }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="drill-container__content--item">
            <span class="label">演练地点：</span>
            <span class="value">{{ drillPlanItemDetail.drillLocation }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="drill-container__content--item">
            <span class="label">演练负责人：</span>
            <span class="value">{{ drillPlanItemDetail.personInChargeName }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="drill-container__content--item" v-if="drillPlanItemDetail.drillScript">
            <span class="label">演练脚本：</span>
            <span class="value font-primary link" @click="handlePreviewScript(drillPlanItemDetail.drillScript)">{{
              JSON.parse(drillPlanItemDetail.drillScript)[0].fileName
            }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="drill-container__content--item">
            <span class="label">签到码：</span>
            <span class="value font-primary">APP端还没做</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <PreviewOnline ref="previewOnlineRef" />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
  import { DrillPlanItemDetail } from '../types';
  import { FILE_TYPE_ICON } from '@/components/UploadFiles/constants';

  defineProps<{
    drillPlanItemDetail: DrillPlanItemDetail;
  }>();
  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
  const handlePreviewScript = (str: string) => {
    const obj = JSON.parse(str);
    const file = Array.isArray(obj) ? obj[0] : obj;
    const url = file.fileUrl;
    const type = file.fileType as keyof typeof FILE_TYPE_ICON;
    if (!url) return;
    previewOnlineRef.value?.open(url, type);
  };
</script>

<style lang="scss" scoped>
  @use '../style/common.scss' as *;
  .link {
    cursor: pointer;
  }
</style>
