<script setup name="sjFlowRecord">
defineProps({
  flowData: Array
})
</script>

<template>
  <el-timeline class="flowRecord">
    <el-timeline-item v-for="(item,index) in flowData?.filter(i=>i.stepName!='虚拟'&&i.stepName!='流程结束')" :key="index">
      <template #dot>
        <svg-icon :name="item.status==='审核通过'||item.status==='发起流程'?'timelineIcon1':item.status==='已拒绝'?'timelineIcon3':'timelineIcon2'" />
      </template>
      <div>
        <div class="flex items-center">
          <svg-icon name="portraitIcon" class="text-32 mr-8" />
          <p class="font-semibold">{{ item.stepName }}</p>
        </div>
        <div class="ml-40">
          <p class="mb-8 flex items-center">
            <svg-icon :name="item.status==='审核通过'||item.status==='发起流程'?'timelineIcon1':item.status==='已拒绝'?'timelineIcon3':'timelineIcon2'" />
            <span class="ml-8">{{ item.label }}</span>
          </p>
          <p class="text-info">{{ item.approverTime }}</p>
          <div v-if="item.comment||item.attachmentFile" class="bg-gray-100 p-8 mt-8">
            <p class="text-info">
              意见：<span>{{ item.comment||'-' }}</span>
            </p>
            <div v-if="item.attachmentFile?.length">
              <span class="text-info">附件：</span>
              <p v-for="(file,key) in item.attachmentFile" :key="key">
                <a :href="file.accessUrl">{{ file.fileName }}</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </el-timeline-item>
  </el-timeline>
</template>
