<template>
  <a-card :class="prefixCls" title="流转记录" :bordered="false">
    <a-steps :current="current" size="small">
      <a-step>
        <template #title>开始</template>
        <template #description>
          <span>admin,2023-10-07 14:40:17</span>
        </template>
      </a-step>
      <a-step title="小猫审批" description="小猫,2023-10-07 14:40:17"/>
      <a-step title="小猫审批" description="小猫,2023-10-07 14:40:17"/>
      <a-step title="小猫审批" description="小猫,2023-10-07 14:40:17"/>
      <a-step title="小猫审批" description="小猫,2023-10-07 14:40:17"/>
      <a-step title="小猫审批" description="小猫,2023-10-07 14:40:17"/>
    </a-steps>
    <BasicTable @register="registerTable"/>
  </a-card>
</template>
<script lang="ts" setup name="WorkflowStep">
  /**
   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
   * 采用vben-动态表格表单封装组件编写,采用 setup 写法
   * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
   * author wangxiang4
   */
  import { PropType, ref } from 'vue';
  import { Workflow } from '/@/api/platform/workflow/entity/workflow';
  import { Steps } from 'ant-design-vue';
  import { formatToDateTime } from '/@/utils/dateUtil';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { BasicTable, useTable } from '/@/components/Table';
  import { columns } from './workflowStep.data';

  const ASteps = Steps;
  const AStep = Steps.Step;
  const { prefixCls } = useDesign('workflow-step');
  const current = ref<number>(0);
  const props = defineProps({
    historyFlowChangeList: {
      type: Array as PropType<Workflow[]>,
      default: () => []
    }
  });

  const [registerTable, { reload }] = useTable({
    title: '流程进度列表',
    //api: listProcessDef,
    rowKey: 'id',
    columns,
    useSearchForm: false,
    showTableSetting: true,
    showIndexColumn: false,
  });


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

  .@{prefix-cls} {
    :deep(.ant-steps) {
      &-item-content {
        margin-top: 0;
      }

      &-item-title {
        min-width: 20px;
      }

      &-item-description {
        min-width: 200px;
      }
    }
  }
</style>
