<template>
  <div>
    <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToTaskInformation" />
    <div class="m-t-8" />
    <div>
      <taskCard  :spiderType="spiderType" failTask="10" unusualTask="1" />
      <!-- <div class="pagination w-full flex flex-row-reverse pr-18 m-t-0">
        <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
          @pagination="getData" />
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import taskCard from './components/taskCard.vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { getSpiderTaskList,getTaskData } from '@/api/spiderTask'
import { AddMode } from './components/enum'

const route = useRoute()
const router = useRouter()
const spiderType = ref<any>(route.query.spiderType)
const taskValue = ref('')
const taskList = ref([])
const taskOptions = [
  {
    value: 'task1',
    label: 'sk网',
  },
  {
    value: 'task2',
    label: 'nasa网',
  },
  {
    value: 'task3',
    label: '网',
  },
]
const pageObj = ref({
  total: 10,
  pageSize: 10,
  pageNo: 1
})

const goToTaskInformation = () => {
  router.push({ path: '/osSpiderManager/list' })
}

onMounted(async () => {  
  // if(route.query.spiderType){
  //   spiderType.value = route.query.spiderType
  // }
})
</script>

<style scoped>
/* 返回样式 */
.backStyle {
  background-image: url("@/assets/picture/back.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 7vh;
  width: 7%;
  display: flex;
  margin-left: 0.8%;
}

/* 卡片样式 */
.cardStyle {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 1.5%;
  padding: 8px;
  height: 26vh;
}

/* 文本样式 */
.el-text {
  color: #FFFFFF;
}

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

/* 表单样式 */
.formStyle {
  display: flex;
  justify-content: space-around;
  margin-top: 0.5%;
  padding: 2px;
}
</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-button:focus {
  outline: none;
}
</style>