<template>
  <el-card shadow="hover" :body-style="{ padding: 0 }">
    <template #header>
      <span>
        <el-icon><LocationFilled /></el-icon>
        <span style="margin-left: 5px">流程跟踪</span>
      </span>
    </template>
    <div>
      <el-skeleton v-if="loading" :rows="5" animated />
      <trace-list v-else :trace="state.trace" @on-trace-child="onTraceChild" />
      <trace-detail :visible="state.trace && state.trace.activities.length > 0 && state.visible" :assign-id="state.assignId" @on-close="state.visible = false" />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { onBeforeMount, reactive } from 'vue'

import { SuccessResultCode, type TraceInfo, useLoading } from '@cacp/ui'

import * as apis from '@/apis/workflow/runtime'
import TraceList from './ProcessTraceList.vue'
import TraceDetail from './ProcessTraceDetail.vue'

const { loading, setLoading } = useLoading()

const props = defineProps<{
  processId: string
}>()

const state = reactive<{
  trace?: TraceInfo
  visible: boolean
  assignId: string
}>({
  visible: false,
  assignId: ''
})

onBeforeMount(async () => {
  setLoading(true)

  const res = await apis.trace(props.processId)
  if (res.code === SuccessResultCode && res.data) {
    state.trace = res.data!
  }

  setLoading(false)
})

function onTraceChild(assignId: string) {
  state.visible = true
  state.assignId = assignId
}
</script>
