<!-- 任务执行记录页面 -->
<template>
  <div>
    <!-- 页面标题 -->
    <MenuTitle title="任务执行记录" subtitle="Task Record" />
    <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
    <div class="m-t-8" />
    <!-- 搜索工具栏 -->
    <table-search>
      <div class="form-content">
        <div class="timer">
          <span style="color: white">采集日期：</span>
          <el-config-provider :locale="zhCn">
            <el-date-picker v-model="timeValue" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
              format="YYYY-MM-DD" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" value-format="YYYY-MM-DD"
              style="width: 250px" />
          </el-config-provider>
        </div>
        <div class="spider w-[300px] flex items-center">
          <span style="color: white" class="w-[100px]">任务名称：</span>
          <el-select v-model="jobname" placeholder="请选择任务名称">
            <el-option v-for="item in jobNameOptions" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="spider w-[300px] flex items-center">
          <span style="color: white" class="w-[100px]">所属爬虫：</span>
          <el-select v-model="spidername" placeholder="请选择爬虫">
            <el-option v-for="item in spideOptions" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="btns">
          <el-button plain type="primary" @click="searchData">查询</el-button>
          <el-button plain @click="resetQuery">重置</el-button>
        </div>
      </div>
    </table-search>
    <!-- 任务执行记录表格数据 -->
    <div class="table-content">
      <div>
        <el-table v-loading="tableLoading" element-loading-background="rgba(48, 65, 86, 0.7)" :data="tableData"
          style="width: 100%" border :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
          <el-table-column property="number" label="序号" width="55" type="index" />
          <el-table-column label="任务名称" show-overflow-tooltip>
            <template #default="scope">
              {{ JSON.parse(scope.row.options).jobName }}
            </template>
          </el-table-column>
          <el-table-column property="spider" label="所属爬虫" show-overflow-tooltip />
          <el-table-column property="schedule_mode" label="调度模式" show-overflow-tooltip />
          <el-table-column property="run_status" label="调度状态" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.status ? '已完成' : '未完成' }}
            </template>
          </el-table-column>
          <el-table-column label="错误消息" show-overflow-tooltip>
            <!-- 当错误消息为空时默认值为'-' -->
            <template #default="scope">
              {{ scope.row.message || '-' }}
            </template>
          </el-table-column>
          <el-table-column property="run_status" label="运行状态" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.run_status === 'unknown' ? '已结束' : scope.row.run_status }}
            </template>
          </el-table-column>
          <el-table-column label="运行耗时/ms">
            <template #default="scope">
              {{ scope.row.duration == 0 ? '-' : scope.row.duration }}
            </template>
          </el-table-column>
          <el-table-column property="create_time" label="采集时间" width="200" show-overflow-tooltip />
        </el-table>
      </div>
      <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
        <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
          @pagination="searchData" v-model:pagerCount="pageObj.pagerCount" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { getSpiderTaskList, getSpiderTaskRecord } from '@/api/spiderTask.ts'
import MenuTitle from '@/components/MenuTitle.vue'
import TableSearch from '@/components/TableSearch.vue'
//时间处理库
import dayjs from 'dayjs'
// ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus'
// 引入中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
defineOptions({ name: 'Pagination' })
// 更改分页文字
zhCn.el.pagination.total = '共 `{total} 条`'
zhCn.el.pagination.goto = '跳至'
zhCn.el.pagination.pagesize = '条/页'
zhCn.el.pagination.pageClassifier = '页'
const route = useRoute()
const router = useRouter()
//初始数据为近七天
const timeValue = ref<string[]>([])
// 表格数据
const tableData = ref([])
// 分页参数
const pageObj = ref({
  total: 10,
  pageSize: 10,
  pageNo: 1,
  pagerCount: 5
})
// 跳转至状态监控页面的方法
const goToStatus = () => {
  if (route.query.mode === '状态监控') {
    router.push({
      path: '/osStatus/list'
    })
  } else {
    router.push({
      path: '/osTaskInformation/list'
    })
  }
}
// 爬虫名称下拉框选项
const spideOptions = [
  {
    label: 'dsn_now',
    value: 'dsn_now'
  },
  {
    label: 'itu_space_expolorer',
    value: 'itu_space_expolorer'
  },
  {
    label: 'space_track',
    value: 'space_track'
  },
  {
    label: 'es_track_transmission',
    value: 'es_track_transmission'
  }
]

// 任务名称下拉框选项
const jobNameOptions = ref<Array<{ label: string; value: string }>>([])

//表单loading标记
const tableLoading = ref(false)

//重置查询
const resetQuery = () => {
  // 重置查询条件
  timeValue.value = []
  spidername.value = ''
  jobname.value = ''
  pageObj.value.pageNo = 1
  getData()
}

// 任务列表
const taskList = ref([])

// 获取任务列表
const getTaskList = async () => {
  const res = await getSpiderTaskList({})
  taskList.value = res.data
  // 根据任务列表数据构建任务名称下拉框选项
  jobNameOptions.value = taskList.value
    .filter((task: any) => task.id)
    .map((task: any) => ({
      label: JSON.parse(task.kwargs.options).jobName,
      value: task.id
    }))
}

// 获取任务执行记录列表
const getData = async () => {
  let resTime: any[] = []
  // 如果时间范围不为空，则将时间范围转换为字符串格式并添加到请求参数中
  resTime.push(dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'))
  resTime.push(dayjs().format('YYYY-MM-DD HH:mm:ss'))
  // 根据选择的爬虫类型和任务名称获取任务执行记录列表数据，避免因查询条件导致的空数据问题 
  tableLoading.value = true
  const res = await getSpiderTaskRecord({
    page: pageObj.value.pageNo,
    size: pageObj.value.pageSize,
    status: 'total',
    times: resTime
  })
  // 根据接口返回的数据更新表格数据和分页参数
  pageObj.value.total = res.data.total
  tableData.value = res.data.list
  tableLoading.value = false
}

// 爬虫名称和任务名称
const spidername = ref('')
const jobname = ref('')

//查询数据的方法
const searchData = async () => {
  let resTime: any[] = []
  if (timeValue.value.length !== 0) {
    const startTime = timeValue.value[0]
    const endTime = timeValue.value[1]
    resTime.push(dayjs(startTime).format('YYYY-MM-DD HH:mm:ss'))
    resTime.push(dayjs(endTime).format('YYYY-MM-DD HH:mm:ss'))
  }
  // 打开表格加载状态
  tableLoading.value = true
  // 发送请求获取数据
  const res = await getSpiderTaskRecord({
    page: pageObj.value.pageNo,
    size: pageObj.value.pageSize,
    status: 'total',
    spider: spidername.value,
    schedule_job_id: jobname.value,
    times: resTime
  })
  // 根据接口返回的数据更新表格数据和分页参数
  pageObj.value.total = res.data.total
  tableData.value = res.data.list
  tableLoading.value = false
}

// 挂载时获取任务执行记录列表数据
onMounted(() => {
  getData()
  getTaskList()
})
</script>

<style scoped>
:deep(.el-form-item__label) {
  color: white;
}

/* 工具栏样式 */
.toolbarStyle {
  background-image: url('@/assets/picture/box3.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 表格样式 */
.formStyle {
  padding: 3px;
}

/* 文字样式 */
.el-text {
  color: #ffffff;
}

.table-content {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(78, 237, 255, 0.2);
  box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
  border-radius: 8px;
  padding: 10px !important;
  margin-top: 18px;
}

.backStyle {
  background-image: url('@/assets/picture/back.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 5vh;
  width: 5%;
  display: flex;
  margin-left: 0.8%;
}

.title {
  text-align: left;
  font-size: 18px;
  font-weight: 500;
  color: white;
}

.low-titme {
  color: #ccc;
  text-align: left;
  margin-left: 20px;
}

.divider {
  margin-top: 15px;
}

.form-content {
  position: relative;
  height: 80px;
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 0 30px;
}

.btns {
  position: absolute;
  right: 30px;
}
</style>
<style>
/* 修改el选择器的样式 */
.el-select__wrapper {
  background-color: #1d5484;
  box-shadow: none;
}

/* 删除el选择器选中时的边框 */
.is-hovering {
  box-shadow: none !important;
}

/* 修改el输入框的样式 */
.el-input__wrapper {
  background-color: #1d5484;
  box-shadow: none;
}

/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
  background-color: #1d5484;
}

/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
  color: #ffffff;
}

/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
  color: #409eff;
}

/* 修改el按钮的边框为none */
.el-button:focus {
  outline: none;
}

/* 修改el日期选择器的边框为none */
.el-date-editor {
  --el-input-border-color: none;
}
</style>
