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

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

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

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

// 计算属性，获取运营周报数据
const weeklyReportData = computed(() => {
  return props.taskDetail || {};
});
</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="本站价格策略:" :span="4">
          {{ weeklyReportData.sitePriceStrategy || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="本站策略变化:" :span="4">
          {{ weeklyReportData.siteStrategyChange || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="竞对油站策略:" :span="4">
          {{ weeklyReportData.competitorStrategy || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="竞对策略变化:" :span="4">
          {{ weeklyReportData.competitorStrategyChange || '-' }}
        </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">
          {{ weeklyReportData.weekCompletedWork || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="本周工作总结:" :span="4">
          {{ weeklyReportData.weekSummary || '-' }}
        </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">
          {{ weeklyReportData.nextWeekPlan || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="需协调与帮助:" :span="4">
          {{ weeklyReportData.coordinationHelp || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="安全、内控、合规、其它事项:" :span="4">
          {{ weeklyReportData.securityInternalComplianceOther || '-' }}
        </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="
            weeklyReportData.imagesUrl && weeklyReportData.imagesUrl.length > 0
          "
          label="图片:"
        >
          <div class="task-images">
            <ElImage
              v-for="(image, index) in weeklyReportData.imagesUrl"
              :key="index"
              :src="image"
              :preview-src-list="weeklyReportData.imagesUrl"
              fit="cover"
              alt="运营周报图片"
              class="task-image"
            />
          </div>
        </ElDescriptionsItem>
        <ElDescriptionsItem v-else label="图片:"> - </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>
