<template>
  <div>
    <el-card style="margin-bottom: 0">
      <div class="title">任务执行记录</div>
      <div class="low-titme">Task Record</div>
      <el-divider class="divider" style="margin-bottom: 0" />
    </el-card>
    <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
    <div class="m-t-7" />
    <div class="text-left toolbarStyle">
      <div class="formStyle">
        <div class="form-content">
          <el-form inline>
            <el-row>
              <el-col :span="12">
                <el-form-item label="时间:">
                  <el-config-provider :locale="zhCn">
                    <el-date-picker
                      v-model="timeValue"
                      type="datetimerange"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      format="YYYY-MM-DD HH:mm:ss"
                      date-format="YYYY/MM/DD ddd"
                      time-format="A hh:mm:ss"
                      value-format="YYYY-MM-DD HH:mm:ss"
                    />
                  </el-config-provider>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="display: flex; justify-content: end">
                <el-form-item>
                  <el-button plain type="primary" @click="searchData">查询</el-button>
                  <el-button plain @click="getData">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <div class="m-t-10" />
    <div class="table-content">
      <div>
        <el-table
          v-loading="tableData.length == 0"
          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 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">
              {{ "已完成" }}
            </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 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="getData"
          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 { getSpiderTaskRecord } from "@/api/spiderTask.ts";
import { ElMessage } from "element-plus";
// 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("");
const taskOptions = [
  {
    value: "task1",
    label: "sk网",
  },
  {
    value: "task2",
    label: "nasa网",
  },
  {
    value: "task3",
    label: "网",
  },
];
const tableData = ref([]);
const pageObj = ref({
  total: 10,
  pageSize: 10,
  pageNo: 1,
  pagerCount: 5,
});
// 前往运行日志，暂时不要
// const handleDetails = (row: any) => {
// 	console.log(row);
// 	router.push({
// 		path: '/os-log/list',
// 		query: {
// 			id: row.id
// 		}
// 	})
// }
const goToStatus = () => {
  if (route.query.mode === "状态监控") {
    router.push({
      path: "/osStatus/list",
    });
  } else {
    router.push({
      path: "/osTaskInformation/list",
    });
  }
};
// 获取任务执行记录列表
const getData = async () => {
  const res = await getSpiderTaskRecord({ page: pageObj.value.pageNo, size: pageObj.value.pageSize, status: "total" });
  pageObj.value.total = res.data.total;
  tableData.value = res.data.list;
};
//  数据的方法
const searchData = async () => {
  if (!timeValue.value) {
    ElMessage.warning("请先选择时间段");
    return;
  }
  let resTime = [];
  const startTime = timeValue.value[0];
  const endTime = timeValue.value[1];
  resTime.push(startTime);
  resTime.push(endTime);
  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;
};

onMounted(() => {
  getData();
});
</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 {
  padding: 0 10px;
}

.form-content {
  margin-top: 20px;
  padding-left: 50px;
}

.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;
}
</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>
