<script lang="ts" setup>
import { ref } from 'vue';
import { ElDescriptions, ElDescriptionsItem, ElTag } from 'element-plus';

// 模拟周报数据
const weeklyData = ref({
  site: '未来路加油站',
  priceAdjustment: '汽油价格调整（三五日提价0.6，其他时间同0.4）',
  activity: '汽车销售部（三五日）员工洗车',
  competitorSituation: '价格优惠0.8',
  competitorChanges: '新增燃油系统',
  completedWork: '站点周边的配套系统升级，反馈应用问题',
  inventorySituation: '站点库存正常/需求调整',
  nextPlan: '员工工作方向为国际站新规培训',
  needCoordination: '系统数据同步功能完善，集成规则后链路数据规则问题',
  safetyMatters: '安全无措施',
  remark: '',
  images: [],
  handleTime: '2025-12-10 07:40:51',
  deadline: '2025-12-14 23:00:00',
  status: '规划完成',
  executor: '要智站务',
  organization: '系统',
});

// 状态标签配置
const statusConfig: any = {
  规划完成: { type: 'success', text: '规划完成' },
  待处理: { type: 'info', text: '待处理' },
  处理中: { type: 'warning', text: '处理中' },
  已完成: { type: 'success', text: '已完成' },
  已关闭: { type: 'danger', text: '已关闭' },
};
</script>

<template>
  <div class="weekly-container">
    <ElDescriptions class="weekly-info" :column="4">
      <ElDescriptionsItem label="站点:" :span="4">
        {{ weeklyData.site }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="本周价格调整:" :span="4">
        {{ weeklyData.priceAdjustment }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="本站活动情况:" :span="4">
        {{ weeklyData.activity }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="竞争对手情况:" :span="4">
        {{ weeklyData.competitorSituation }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="竞争对手变化:" :span="4">
        {{ weeklyData.competitorChanges }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="本周完成工作:" :span="4">
        {{ weeklyData.completedWork }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="本周库存情况:" :span="4">
        {{ weeklyData.inventorySituation }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="下周工作计划:" :span="4">
        {{ weeklyData.nextPlan }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="需领导协调:" :span="4">
        {{ weeklyData.needCoordination }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="安全、内控、合规、其他事项:" :span="4">
        {{ weeklyData.safetyMatters }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="备注:" :span="4">
        {{ weeklyData.remark || '-' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="图片:" :span="4">
        <div
          v-if="weeklyData.images && weeklyData.images.length > 0"
          class="weekly-images"
        >
          <img
            v-for="(image, index) in weeklyData.images"
            :key="index"
            :src="image"
            alt="周报图片"
            class="weekly-image"
          />
        </div>
        <span v-else>-</span>
      </ElDescriptionsItem>
      <ElDescriptionsItem label="处理时间:">
        {{ weeklyData.handleTime }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="截止时间:">
        {{ weeklyData.deadline }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="处理状态:">
        <ElTag :type="statusConfig[weeklyData.status]?.type || 'info'">
          {{ statusConfig[weeklyData.status]?.text || weeklyData.status }}
        </ElTag>
      </ElDescriptionsItem>
      <ElDescriptionsItem label="执行人:">
        {{ weeklyData.executor }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="组织:">
        {{ weeklyData.organization }}
      </ElDescriptionsItem>
    </ElDescriptions>
  </div>
</template>

<style scoped lang="scss">
.weekly-container {
  width: 100%;
  padding: 16px 0;
}

.weekly-info {
  :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__content) {
    color: var(--text-color-primary);
  }
}

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

  .weekly-image {
    width: 60px;
    height: 60px;
    cursor: pointer;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.2s;

    &:hover {
      transform: scale(1.05);
    }
  }
}
</style>
