<template>
  <view class="p-base">
    <CuNavbar title="审核流程"></CuNavbar>
    <view class="card-shadow bg-white p-base">
      <uv-steps direction="column">
        <uv-steps-item v-for="item in list" :key="item.id">
          <template #icon>
            <view class="w-31rpx h-31rpx rounded-full mt-4rpx" :class="[item.check_status == 2 || item.check_status == 3? 'bg-blue': 'bg-gray-300']"></view>
          </template>
          <template #title>
            <view class="space-y-6rpx">
              <view class="flex items-center space-x-14rpx">
                <view> {{ item.check_user ? item.check_user.name : item.check_name }}</view>
              </view>
              <view v-if="item.check_status > 1" class="text-26rpx" :style="{ color: statusFun(item.check_status, 'statusExpense', 'color')}">
                {{ statusFun(item.check_status, 'statusExpense', 'name') }}
              </view>
              <view class="text-26rpx text-red" v-if="item.check_status == 4">{{item.remarks}}</view>
            </view>
          </template>
          <template #desc>
            <view v-if="item.checked_at" class="text-26rpx text-hex-999">{{ item.checked_format }}</view>
          </template>
        </uv-steps-item>
      </uv-steps>
    </view>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import { http } from '@/utils/request'
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import { timeFormat } from '@climblee/uv-ui/libs/function'
import statusFun from '@/utils/status'
const list = ref([])
onLoad((options) => {
  http.get(`/workflow/${options.id}/logs`).then((res) => {
    list.value = res
  })
})
</script>
