<script setup lang="ts">
import { onMounted, shallowRef, watch } from 'vue';

import { ElEmpty, ElMessage, ElTimeline } from 'element-plus';

import { requestClient } from '#/api/request';

import ApprovalTimelineItem from './approval-timeline-item.vue';

interface Props {
  id?: string | number; // 修改为同时接受字符串和数字类型
}

const props = defineProps<Props>();
const list = shallowRef([]);

// 提取数据加载逻辑为单独函数
async function loadData() {
  // 使用更严格的检查，确保id为有效字符串或数字时才执行请求
  if (!props.id || props.id === 'undefined' || props.id === 0) {
    list.value = [];
    return;
  }

  try {
    // 将id转换为字符串类型，确保API请求参数类型正确
    const orderId = String(props.id);
    const resp = await requestClient.get('/workOrderRecord/record/list', {
      params: { orderId },
    });
    list.value = resp.rows || [];
  } catch {
    ElMessage.error('获取工单记录失败');
  }
}

// 组件挂载时加载数据
onMounted(() => {
  console.log(props.id);
  loadData();
});

// 监听id属性变化，当id变化时重新加载数据
watch(() => props.id, () => {
  console.log(props.id);
  loadData();
});
</script>

<template>
  <ElTimeline v-if="id" style="padding-top: 20px; margin-top: 20px; border-top: 1px solid #e5e5e5;">
    <ApprovalTimelineItem v-for="item in list" :key="item.id" :item="item"  style="padding-left: 15px;"/>
  </ElTimeline>
  <ElEmpty v-else />
</template>





