<template>
  <a-card :class="prefixCls" title="流程信息" :bordered="false">
    <a-timeline>
      <a-timeline-item color="#3f9eff">
        <div class="workflow">
          <div class="timestamp">{{formatToDateTime()}}</div>
          <a-card>
            <h4>{{'管理员审批'}}</h4>
            <a-row :gutter="25">
              <a-col class="tip" style="margin-left:10px" :span="11">
                <div class="item">
                  <span class="label">审批人 : </span>
                  <span class="value">{{'虚拟内容'}}</span>
                </div>
                <div class="item">
                  <span class="label">办理状态 : </span>
                  <span class="value">
                    <!--                  <a-tag :type="historyFlowChange.activityCommentInfo.mesLevel"
                          effect="dark"
                          size="small"
                  >{{'虚拟内容}}</a-tag>-->
                  </span>
                </div>
                <div class="item">
                  <span class="label">审批意见 : </span>
                  <!--                <a-tooltip effect="dark"
                                              :content="historyFlowChange.activityCommentInfo.message"
                                              placement="top-start"
                                  >
                                    <span class="value">{{'虚拟内容'}}</span>
                                  </a-tooltip>-->
                </div>
                <div class="item">
                  <span class="label">开始时间 : </span>
                  <span class="value">{{'虚拟内容'}}</span>
                </div>
                <div class="item">
                  <span class="label">结束时间 : </span>
                  <span class="value">{{'虚拟内容'}}</span>
                </div>
                <div class="item">
                  <span class="label">用时 : </span>
                  <span class="value">{{'虚拟内容'}}</span>
                </div>
              </a-col>
            </a-row>
          </a-card>
        </div>
      </a-timeline-item>
    </a-timeline>
  </a-card>
</template>
<script lang="ts" setup>
  /**
   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
   * 采用vben-动态表格表单封装组件编写,采用 setup 写法
   * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
   * author wangxiang4
   */
  import { PropType } from 'vue';
  import { Workflow } from '/@/api/platform/workflow/entity/workflow';
  import { Timeline } from 'ant-design-vue';
  import { formatToDateTime } from '/@/utils/dateUtil';
  import { useDesign } from '/@/hooks/web/useDesign';

  const ATimeline = Timeline;
  const ATimelineItem = Timeline.Item;
  const { prefixCls } = useDesign('workflow-time-line');
  const props = defineProps({
    historyFlowChangeList: {
      type: Array as PropType<Workflow[]>,
      default: () => []
    }
  });

</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-workflow-time-line';

  .@{prefix-cls} {
    .workflow{
      .timestamp {
        color: #909399;
        padding-bottom: 12px;
      }

      .item {
        height: 32px;
        line-height: 32px;
        margin-bottom: 8px;

        .label {
          display: inline-block;
          height: 100%;
          width: 70px;
          font-size: 14px;
          color: #5e6d82;
          text-align: end;
          vertical-align: top;

          &::after {
            display: inline-block;
            width: 100%;
            content: '';
            height: 0;
          }
        }

        .value {
          padding-left: 10px;
          font-size: 14px;
          max-width: calc(100% - 90px);
          color: #5e6d82;
          display: inline-block;
          overflow:hidden;
          white-space:nowrap;
          text-overflow: ellipsis
        }
      }

      .tip {
        padding: 8px 16px;
        background-color: #ecf8ff;
        border-radius: 4px;
        border-left: 5px solid #50bfff;
        margin: 20px 0;
      }
    }
  }
</style>
