<script lang="ts" setup>
import { computed } from 'vue';

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

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

// 接收父组件传递的任务详情数据
const props = defineProps<MeetingProps>();

// 计算属性，获取会议数据
const meetingData = computed(() => {
  return props.taskDetail || {};
});

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '-';
  return new Date(dateTime).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });
};

// 格式化日期范围
// const formatDateRange = (dateRange: string[]) => {
//   if (!dateRange || dateRange.length !== 2) return '-';
//   return `${formatDateTime(dateRange[0])} 至 ${formatDateTime(dateRange[1])}`;
// };

// 获取会议图片
// const getMeetingImages = () => {
//   if (!meetingData.value.meetingImages) return [];
//   return meetingData.value.meetingImages.split(',').filter(Boolean);
// };
</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"
        >
          会议详情
        </span>
      </div>
    </template>

    <div class="task-info">
      <!-- 基本信息 -->
      <div class="section-title">
        <div class="section-bar"></div>
        <span class="section-text">基本信息</span>
      </div>
      <ElDescriptions :column="4" class="mb-6">
        <ElDescriptionsItem label="会议主持:">
          {{ meetingData.meetingHost || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="会议地点:">
          {{ meetingData.meetingLocation || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="参会人数:" :span="4">
          {{ meetingData.attendeesCount || '-' }} /
          {{ meetingData.totalCount || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="首次会议时间:" :span="4">
          {{
            `${meetingData.firstMeetingStart}~${meetingData.firstMeetingEnd}` ||
            '-'
          }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="二次会议时间:" :span="4">
          {{
            `${meetingData.secondMeetingStart}~${
              meetingData.secondMeetingEnd
            }` || '-'
          }}
        </ElDescriptionsItem>
      </ElDescriptions>

      <!-- 会议内容 -->
      <div class="section-title">
        <div class="section-bar"></div>
        <span class="section-text">会议内容</span>
      </div>
      <ElDescriptions :column="4" class="mb-6">
        <ElDescriptionsItem label="通知通告:" :span="4">
          {{ meetingData.noticeAnnouncement || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="业绩管理:" :span="4">
          {{ meetingData.performanceManagement || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="服务提升:" :span="4">
          {{ meetingData.serviceImprovement || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="视觉形象:" :span="4">
          {{ meetingData.visualImage || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="运营管理:" :span="4">
          {{ meetingData.operationManagement || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="安全合规:" :span="4">
          {{ meetingData.securityCompliance || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="安全合规附件名称:" :span="4">
          {{ meetingData.securityComplianceAttachment || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="其它:" :span="4">
          {{ meetingData.otherContent || '-' }}
        </ElDescriptionsItem>
      </ElDescriptions>

      <!-- 会议照片 -->
      <div class="section-title">
        <div class="section-bar"></div>
        <span class="section-text">会议照片</span>
      </div>
      <ElDescriptions :column="4" class="mb-6">
        <ElDescriptionsItem
          v-if="meetingData?.meetingImagesUrl?.length > 0"
          label="会议记录和现场照片:"
          :span="4"
        >
          <div class="task-images">
            <ElImage
              v-for="(image, index) in meetingData?.meetingImagesUrl || []"
              :key="index"
              :src="image"
              :preview-src-list="meetingData?.meetingImagesUrl || []"
              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>
