<template>
  <div class="job-table">
    <el-table 
      v-loading="loading" 
      :data="jobList"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="60">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="Spider" align="center">
        <template #default="scope">
          {{ scope.row.spider }}
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center" width="80">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="持续时间" align="center" width="100">
        <template #default="scope">
          {{ scope.row.duration_str || '-' }}
        </template>
      </el-table-column>

      <el-table-column label="开始时间" align="center" width="170">
        <template #default="scope">
          {{ scope.row.start_time || '-' }}
        </template>
      </el-table-column>

      <el-table-column label="结束时间" align="center" width="170">
        <template #default="scope">
          {{ scope.row.end_time || '-' }}
        </template>
      </el-table-column>

      <el-table-column label="PID" align="center" width="80">
        <template #default="scope">
          {{ scope.row.pid || '-' }}
        </template>
      </el-table-column>

      <el-table-column label="查看日志" align="center" width="100">
        <template #default="scope">
          <router-link :to="{
            path: '/project/logs',
            query: {
              scrapydServerId: scrapydServerId,
              project: project,
              spider: scope.row.spider,
              job: scope.row.id
            }
          }" target="_blank">
            <el-button text type="primary" size="small">
              <el-icon><Document /></el-icon>
              查看
            </el-button>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column label="取消运行" align="center" width="100">
        <template #default="scope">
          <JobCancel 
            :job="scope.row.id" 
            :project="project" 
            :scrapyd-server-id="scrapydServerId" 
            :disabled="scope.row.status === 'finished'"
            @success="$emit('success')" 
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from 'vue';
import { Document } from '@element-plus/icons-vue';
import JobCancel from '@/views/job/components/JobCancel.vue';

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  scrapydServerId: {
    type: String,
    default: ''
  },
  project: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['success']);

const jobList = ref(props.data);

// 监听props.data的变化
watch(() => props.data, (newVal) => {
  jobList.value = newVal;
}, { deep: true });

// 根据状态返回不同的类型
const getStatusType = (status: string) => {
  switch (status) {
    case 'running':
      return 'primary';
    case 'finished':
      return 'success';
    case 'pending':
      return 'warning';
    default:
      return 'info';
  }
};
</script>

<style lang="scss" scoped>
.job-table {
  margin-top: 20px;
}
</style>
