<template>
  <div class="workflow-step-preview">
    <!-- data：不分步骤，直接展示（有就展示，没有就不展示） -->
    <a-descriptions
      v-if="previewData && previewData.length"
      :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
      bordered
      size="small"
      class="descriptionPreviewItem"
    >
      <p slot="title" class="descriptionTitle">
        填写历史
      </p>
      <a-descriptions-item
        v-for="(item, idx) in previewData"
        :key="item.label || idx"
        v-if="item.label !== '附件上传' && item.label !== '__expressionRs'"
      >
        <span slot="label" class="label">{{ item.label }}</span>
        <span v-if="(item.type ?? 'default') === 'image'">
          <div class="value">
            <image-item :images="item.value" :width="70" :padding="0"/>
          </div>
        </span>
        <span v-else>
          <div class="value">{{ item.value }}</div>
        </span>
      </a-descriptions-item>
    </a-descriptions>

    <!-- 附件：按步骤分组展示（有就展示，没有就不展示） -->
    <a-card
      v-for="step in normalizedAttachmentSteps"
      :key="step.stepId"
      size="small"
      class="step-card"
      :bordered="false"
    >
      <template slot="title">
        <span class="step-title">{{ step.stepName }}</span>
      </template>

      <div v-if="Array.isArray(step.images) && step.images.length" class="attachment-block">
        <image-item :images="step.images" :width="70" :padding="0"/>
      </div>

      <div v-if="Array.isArray(step.files) && step.files.length" class="attachment-block">
        <file-item :files="step.files" />
      </div>
    </a-card>
  </div>
</template>

<script>
import { FileItem, ImageItem } from '@vue2-client/components/FileImageItem'

export default {
  name: 'WorkFlowStepFilesPreview',
  components: {
    FileItem,
    ImageItem
  },
  props: {
    preview: {
      type: Object,
      default: null
    },
    stepAttachments: {
      type: Array,
      default: () => []
    },
  },
  computed: {
    previewData () {
      const data = this.preview?.data
      return Array.isArray(data) ? data : null
    },
    normalizedAttachmentSteps () {
      const steps = (this.preview && Array.isArray(this.preview.stepAttachments))
        ? this.preview.stepAttachments
        : this.stepAttachments

      return (steps || [])
        .filter(step => step && step.stepId != null)
        .map(step => ({
          stepId: step.stepId,
          stepName: step.stepName || `步骤 ${step.stepId}`,
          images: Array.isArray(step.images) ? step.images : [],
          files: Array.isArray(step.files) ? step.files : []
        }))
        .filter(step => step.images.length || step.files.length)
    }
  },
}
</script>

<style lang="less" scoped>
.workflow-step-preview {
  padding: 4px 0;
}

.step-card {
  margin-bottom: 14px;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.05);

  :deep(.ant-card-body) {
    padding: 12px 16px 10px;
  }
}

.step-title {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
}

.label {
  color: rgba(0, 0, 0, 0.85);
}

.value {
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(0, 0, 0, 0.65);
}

.attachment-block {
  padding: 8px 0;

  & + & {
    margin-top: 8px;
  }

  :deep(.file-item),
  :deep(.image-item) {
    margin: 0;
  }
}

.descriptionPreviewItem {
  margin-bottom: 22px;
  border-radius: 10px;
  overflow: hidden;
}

.descriptionTitle {
  position: relative;
  padding-left: 12px;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: #1890ff;
    border-radius: 2px;
  }
}
</style>


