<template>
  <div>
    <template v-if="!noData">
      <a-descriptions
        v-show="formCompletedDataPreview.data"
        :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
        bordered
        class="descriptionPreviewItem"
      >
        <p slot="title" class="descriptionTitle" v-if="showTitle">
          填写历史
        </p>
        <template v-if="legacyMode">
          <a-descriptions-item
            v-for="(value, key) in formCompletedDataPreview.data"
            :key="key"
            v-show="key !== '附件上传' && key !== '__expressionRs'"
          >
            <span slot="label" style="color: #000">{{ key }}</span>
            <div style="white-space: pre-wrap">{{ value }}</div>
          </a-descriptions-item>
        </template>
        <template v-else>
          <a-descriptions-item
            v-for="(item, idx) in formCompletedDataPreview.data"
            :key="item.label || idx"
            v-if="item.label !== '附件上传' && item.label !== '__expressionRs'"
          >
            <span slot="label" style="color: #000">{{ item.label }}</span>
            <span v-if="(item.type ?? 'default') === 'image'">
              <div style="white-space: pre-wrap">
                <image-item :images="item.value" :width="70" :padding="0"/>
              </div>
            </span>
            <span v-else>
              <div style="white-space: pre-wrap">{{ item.value }}</div>
            </span>
          </a-descriptions-item>
        </template>
      </a-descriptions>
      <a-descriptions
        v-show="formCompletedDataPreview.note"
        bordered
        class="descriptionPreviewItem"
      >
        <p slot="title" class="descriptionTitle">
          备注
        </p>
        <a-descriptions-item>
          <span slot="label" style="color: #000">备注信息</span>
          <p style="white-space: pre-wrap">{{ formCompletedDataPreview.note }}</p>
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions
        v-show="formCompletedDataPreview.images.length"
        class="descriptionPreviewItem allWidth"
      >
        <p slot="title" class="descriptionTitle">
          附件
        </p>
        <a-descriptions-item>
          <file-item :files="formCompletedDataPreview.images" />
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions
        v-show="formCompletedDataPreview.files.length"
        class="descriptionPreviewItem allWidth"
      >
        <p slot="title" class="descriptionTitle">
          附件
        </p>
        <a-descriptions-item>
          <file-item :files="formCompletedDataPreview.files" />
        </a-descriptions-item>
      </a-descriptions>
    </template>
    <div v-else>
      <a-result status="404" title="暂无数据" sub-title="该步骤暂无数据。">
      </a-result>
    </div>
  </div>
</template>

<script>
import { FileItem, ImageItem } from '@vue2-client/components/FileImageItem'
export default {
  name: 'WorkFlowPreview',
  components: {
    FileItem,
    ImageItem
  },
  props: {
    formCompletedDataPreview: {
      type: Object,
      required: true
    },
    legacyMode: {
      type: Boolean,
      default: false
    },
    showTitle: {
      type: Boolean,
      default: true
    },
  },
  computed: {
    noData () {
      return !this.formCompletedDataPreview.data && !this.formCompletedDataPreview.files && !this.formCompletedDataPreview.images && !this.formCompletedDataPreview.note
    }
  }
}
</script>

<style scoped>
.descriptionPreviewItem {
  margin-bottom: 22px;
}
.allWidth >>> .ant-descriptions-item-content {
  width: 100%;
}
.descriptionTitle {
  position: relative;
  padding-left: 12px;
}
.descriptionTitle::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background-color: #1890ff;
  border-radius: 2px;
}
</style>
