<template>
    <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus">
    </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-date-picker v-model="timeValue" type="datetimerange" start-placeholder="Start date"
                        end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                        time-format="A hh:mm:ss" />
                </el-form-item>
                <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-space>
                        <el-button type="primary">查询</el-button>
                    </el-space>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="m-t-10">

    </div>
    <div>
        <el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column type="selection" width="40" />
            <el-table-column property="number" label="序号" width="55" />
            <el-table-column property="taskName" label="任务名称" show-overflow-tooltip />
            <el-table-column property="scheduleMode" label="调度模式" show-overflow-tooltip />
            <el-table-column property="scheduleStatus" label="调度状态" show-overflow-tooltip />
            <el-table-column property="errorMessage" label="错误消息" show-overflow-tooltip />
            <el-table-column property="runningStatus" label="运行状态" show-overflow-tooltip />
            <el-table-column property="duration" label="持续时间" show-overflow-tooltip />
            <el-table-column property="scheduleTime" label="调度时间" width="200" show-overflow-tooltip />
            <el-table-column label="运行日志" width="120">
                <template #default="scope">
                    <el-button size="small" plain type="primary" @click="handleDetails(scope.row)">
                        日志
                    </el-button>
                </template>
            </el-table-column>
        </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" />
    </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'

const route = useRoute()
const router = useRouter()
const taskValue = ref('')
const timeValue = ref('')
const taskOptions = [
    {
        value: 'task1',
        label: 'sk网',
    },
    {
        value: 'task2',
        label: 'nasa网',
    },
    {
        value: 'task3',
        label: '网',
    },
]
const tableData = ref([
    {
        number: '1',
        taskName: 'dsn爬虫任务',
        scheduleMode: '自动',
        scheduleStatus: '自动',
        errorMessage: '无',
        runningStatus: '完成',
        duration: '10s',
        scheduleTime: '2023-05-13 10:00:00',

    },
    {
        name: '1',
        address: 'sk网',
        address1: '成功',
        address2: '100',
        address3: '0',
        address4: '无',
        address5: '10s',
        address6: '2023-05-13 10:00:00',
        status: 0
    },
    {
        name: '1',
        address: 'sk网',
        address1: '成功',
        address2: '100',
        address3: '0',
        address4: '无',
        address5: '10s',
        address6: '2023-05-13 10:00:00',
        status: 0
    },
    {
        name: '1',
        address: 'sk网',
        address1: '成功',
        address2: '100',
        address3: '0',
        address4: '无',
        address5: '10s',
        address6: '2023-05-13 10:00:00',
        status: 0
    },
    {
        name: '1',
        address: 'sk网',
        address1: '成功',
        address2: '100',
        address3: '0',
        address4: '无',
        address5: '10s',
        address6: '2023-05-13 10:00:00',
        status: 0
    },
    {
        name: '1',
        address: 'sk网',
        address1: '成功',
        address2: '100',
        address3: '0',
        address4: '无',
        address5: '10s',
        address6: '2023-05-13 10:00:00',
        status: 0
    }, {
        name: '1',
        address: 'sk网',
        address1: '成功',
        address2: '100',
        address3: '0',
        address4: '无',
        address5: '10s',
        address6: '2023-05-13 10:00:00',
        status: 0
    }
    , {
        name: '1',
        address: 'sk网',
        address1: '成功',
        address2: '100',
        address3: '0',
        address4: '无',
        address5: '10s',
        address6: '2023-05-13 10:00:00',
        status: 0
    },
    {
        name: '1',
        address: 'sk网',
        address1: '成功',
        address2: '100',
        address3: '0',
        address4: '无',
        address5: '10s',
        address6: '2023-05-13 10:00:00',
        status: 0
    },
    {
        name: '1',
        address: 'sk网',
        address1: '成功',
        address2: '100',
        address3: '0',
        address4: '无',
        address5: '10s',
        address6: '2023-05-13 10:00:00',
        status: 0
    }
])
const pageObj = ref({
    total: 10,
    pageSize: 10,
    pageNo: 1
})
const handleDetails = (row: any) => {
    console.log(row);
    router.push({
        path: '/os-log/list',
        query: {
            id: row.id
        }
    })
}
const goToStatus = () => {
    router.push({
        path: '/osStatus/list',
    })
}
const getData = () => {
    console.log('getData');
}

onMounted(() => {
    console.log('任务执行记录');

})
</script>

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

/* 表格样式 */
.formStyle {
    display: flex;
    justify-content: space-around;
    padding: 3px;
}

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

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