<script setup lang="ts">
import { watchEffect } from "vue";
import { useAsync } from "/@/hooks/useAsync";
import { httpList } from "/@/api/components/approvalRecord";

const props = defineProps<{
  orderCode: string;
  type: string;
}>();

const {
  data,
  run: record,
  loading
} = useAsync<Record<string, string>[]>({
  initalData: []
});

//请求审批记录
watchEffect(() => {
  const { orderCode, type } = props;

  if (!orderCode || !type) {
    return;
  }

  record(httpList({ orderCode: props.orderCode, type: props.type }));
});
</script>

<template>
  <ElSteps
    class="ml-[150px] relative"
    direction="vertical"
    finish-status="success"
    :active="data.length"
    v-loading="loading"
    align-center
  >
    <ElStep v-for="item in data" :key="item.id">
      <template #title>
        <h1
          class="absolute w-[142px] left-[-150px] text-right font-bold text-[#000]"
        >
          {{ item.status_name }}
        </h1>
      </template>

      <template #description>
        <div class="pt-[20px] text-[#000]">
          <p>操作 : {{ item.action_name }}</p>
          <p>账号来源 : {{ item.source === "2" ? "供应商端" : "五常稻田" }}</p>
          <p>{{ item.addtime }}</p>
        </div>
      </template>
    </ElStep>
  </ElSteps>
</template>
