<template>
  <div>
    <div class="m-t-7">
    </div>
    <div class="text-left p-6 toolbarStyle">
        <div class="formStyle">
            <el-form inline>
                <el-form-item>
                    <el-text class="mx-1">所属爬虫:</el-text>
                </el-form-item>
                <el-form-item>
                    <div>
                        <el-select v-model="taskValue" placeholder="请选择" style="width: 220px">
                            <el-option v-for="item in taskOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-text class="mx-1">任务名称:</el-text>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="taskValue" placeholder="请输入" style="width: 220px" />
                </el-form-item>
                <el-form-item>
                    <el-space>
                        <el-button type="primary">查询</el-button>
                    </el-space>
                </el-form-item>
                <el-form-item>
                    <el-space>
                        <el-button type="primary" @click="openTaskDialog">新建任务</el-button>
                    </el-space>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="cardStyle">
        <taskCard successTask="100" 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>
    <!-- 添加任务对话框组件 -->
    <addTaskDialog v-model:dialogVisible="showDialog" @confirm="handleDeleteConfirm" :mode="editMode" />
  </div>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import taskCard from './components/taskCard.vue'
import addTaskDialog from './components/addTaskDialog.vue'

const editMode = ref('1')
const taskValue = ref('')
const taskOptions = [
    {
        value: 'task1',
        label: 'sk网',
    },
    {
        value: 'task2',
        label: 'nasa网',
    },
    {
        value: 'task3',
        label: '网',
    },
]
const pageObj = ref({
    total: 10,
    pageSize: 10,
    pageNo: 1
})
const getData = () => {
    console.log('getData');
}
// 控制对话框显示/隐藏的状态变量
const showDialog = ref(false)

// 处理删除确认
const handleDeleteConfirm = () => {
    console.log('用户确认删除')
    // 在这里执行实际的删除操作
}

const openTaskDialog = () => {
    showDialog.value = true
}
</script>

<style scoped>
/* 卡片样式 */
.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: 1%;
    padding: 3px;
}
</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>