<template>
  <div class="app-container">
    <AutoRefresh
      @refresh="getData"
    />

    <el-divider />

    <div
      class="log-content"
      v-loading="listLoading"
    >
      <pre v-if="content">{{ content }}</pre>
      <div v-else>暂无数据</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import AutoRefresh from '@/components/AutoRefresh.vue';
import { getJobLog } from '@/api/log';

const route = useRoute();
const scrapydServerId = ref('');
const project = ref('');
const spider = ref('');
const job = ref('');
const listLoading = ref(true);
const content = ref('');

const getData = async () => {
  listLoading.value = true;

  try {
    const res = await getJobLog({
      scrapydServerId: scrapydServerId.value,
      project: project.value,
      spider: spider.value,
      job: job.value,
    });
    content.value = res as unknown as string || '';
  } catch (error) {
    console.error('获取任务日志失败:', error);
  } finally {
    listLoading.value = false;
  }
}

onMounted(() => {
  project.value = route.query.project as string;
  spider.value = route.query.spider as string;
  job.value = route.query.job as string;
  scrapydServerId.value = route.query.scrapydServerId as string;

  getData();
});
</script>

<style lang="scss" scoped>
.log-content {
  overflow: auto;
  text-align: left;

  pre {
    margin: 0;
  }
}
</style>
