<script lang="ts" setup>
// @ts-ignore

import {
  ElCard,
  ElDescriptions,
  ElDescriptionsItem,
  ElImage,
} from 'element-plus';

// 定义组件的Props接口
interface JoinEmergencyProps {
  taskDetail: any;
}

// 接收父组件传递的任务详情数据
defineProps<JoinEmergencyProps>();
</script>

<template>
  <ElCard>
    <template #header>
      <div class="flex items-center gap-4">
        <div style="width: 4px; height: 12px; background-color: #215acd"></div>
        <span
          class="text-lg font-bold text-gray-800"
          style="font-size: 14px; font-weight: 600"
        >
          {{
            taskDetail?.subFormType === 'participate_emergency_wy'
              ? '参与应急演练详情'
              : '参与油站会议详情'
          }}
        </span>
      </div>
    </template>

    <div class="task-info">
      <ElDescriptions :column="4" class="mb-6">
        <ElDescriptionsItem label="参与时间:">
          {{ taskDetail?.participationTime || '-' }}
        </ElDescriptionsItem>
      </ElDescriptions>

      <ElDescriptions :column="4" class="mb-6">
        <ElDescriptionsItem label="参与详情:" :span="4">
          {{ taskDetail?.participationRecord || '-' }}
        </ElDescriptionsItem>
      </ElDescriptions>

      <ElDescriptions :column="4" class="mb-6">
        <ElDescriptionsItem
          v-if="taskDetail?.imagesUrl?.length > 0"
          label="参与现场图片:"
          :span="4"
        >
          <div class="task-images">
            <ElImage
              v-for="(image, index) in taskDetail?.imagesUrl"
              :key="index"
              :src="image"
              :preview-src-list="taskDetail?.imagesUrl"
              :initial-index="+index"
              fit="cover"
              alt="参与照片"
              class="task-image"
            />
          </div>
        </ElDescriptionsItem>
        <ElDescriptionsItem v-else label="参与现场图片:" :span="4">
          -
        </ElDescriptionsItem>
      </ElDescriptions>
    </div>
  </ElCard>
</template>

<style scoped lang="scss">
.task-info {
  .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 12px 0;

    .section-bar {
      width: 4px;
      height: 12px;
      background-color: #215acd;
    }

    .section-text {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-color-primary);
    }
  }

  :deep(.el-descriptions) {
    margin-bottom: 0 !important;
  }

  :deep(.el-descriptions__label) {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color-secondary);
  }

  :deep(.el-descriptions__content) {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-primary);
  }

  :deep(.el-descriptions__table) {
    background: transparent !important;
  }
}

.task-images {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;

  .task-image {
    width: 80px;
    height: 80px;
    cursor: pointer;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.2s;
  }
}
</style>
