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

      <el-table-column
        label="项目名"
        header-align="center"
        align="left"
        width="150"
      >
        <template #default="scope">
          {{ scope.row.kwargs.project }}
        </template>
      </el-table-column>

      <el-table-column
        label="Spider"
        header-align="center"
        align="left"
        prop="spider"
        min-width="100"
        sortable
      >
        <template #default="scope">
          {{ scope.row.kwargs.spider }}
        </template>
      </el-table-column>

      <el-table-column
        label="Cron"
        align="center"
        width="120"
      >
        <template #default="scope">
          {{ scope.row.kwargs.cron }}
        </template>
      </el-table-column>

      <el-table-column
        label="调度方式"
        align="center"
        width="120"
      >
        <template #default="scope">
          <span
            :class="{
              'font-medium':
                scope.row.kwargs.schedule_type === ScheduleTypeEnum.RANDOM_SERVER,
            }"
            >{{ scope.row.schedule_type_label || '-' }}</span
          >
        </template>
      </el-table-column>

      <el-table-column
        label="下次执行时间"
        align="center"
        width="170"
      >
        <template #default="scope">
          {{ scope.row.next_run_time || '-' }}
        </template>
      </el-table-column>

      <el-table-column
        label="日志"
        align="center"
        width="120"
      >
        <template #default="scope">
          <!-- 调度日志 -->
          <router-link
            :to="{
              name: 'ScheduleLogs',
              query: {
                project: scope.row.kwargs.project,
                spider: scope.row.kwargs.spider,
                scrapydServerId: scope.row.kwargs.scrapyd_server_id,
                job: scope.row.id,
              },
            }"
            target="_blank"
            >调度</router-link
          >

          <!-- 运行日志 -->
          <router-link
            :to="{
              name: 'SpiderLogs',
              query: {
                project: scope.row.kwargs.project,
                spider: scope.row.kwargs.spider,
                scrapydServerId: scope.row.kwargs.scrapyd_server_id,
              },
            }"
            target="_blank"
            style="margin-left: 5px"
            >运行</router-link
          >

          <!-- 运行统计 -->
          <router-link
            :to="{
              name: 'Stats',
              query: {
                project: scope.row.kwargs.project,
                spider: scope.row.kwargs.spider,
                scrapydServerId: scope.row.kwargs.scrapyd_server_id,
              },
            }"
            target="_blank"
            style="margin-left: 5px"
            >统计</router-link
          >
        </template>
      </el-table-column>

      <el-table-column
        label="状态"
        align="center"
        width="65"
      >
        <template #default="scope">
          <schedule-job-status
            :job_id="scope.row.id"
            v-model="scope.row.status"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="100"
      >
        <template #default="scope">
          <spider-execute
            :project="scope.row.kwargs.project"
            :spider="scope.row.kwargs.spider"
            :scrapyd-server-id="scope.row.kwargs.scrapyd_server_id"
            :options="scope.row.kwargs.options"
            @on-success="handleSuccess"
          />

          <schedule-add
            class="ml-sm"
            :job_id="scope.row.id"
            @on-success="handleSuccess"
          />

          <schedule-remove-job
            class="ml-sm"
            :job_id="scope.row.id"
            @success="handleSuccess"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps } from 'vue'
import { ScheduleTypeEnum } from '@/enums/schedule-type-enum'

defineProps({
  data: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['success', 'sort-change'])

const handleSuccess = () => {
  emit('success')
}

const handleSortChange = (column: any) => {
  emit('sort-change', column)
}
</script>

<style lang="scss" scoped>
.ml-sm {
  margin-left: 5px;
}
.font-medium {
  font-weight: 500;
}
</style>
