<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="static/js/vue.js"></script>
    <script src="static/js/axios.js"></script>
    <script src="static/js/dayjs.js"></script>
    <script src="static/js/element-ui/index.js"></script>
    <link rel="stylesheet" href="static/js/element-ui/index.css">
    <link href="static/assets/index.css" rel="stylesheet"/>
</head>
<style type="text/css">
    html,
    body,
    #app {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;

    }

    #app {
        background: #f5f7fa;
        width: calc(100% - 32px);
        padding: 16px;
    }

    .main {
        height: 100%;
        background: #fff;
        padding: 16px;
    }

    .pagination-container {
        background: #fff;
        padding: 16px;
    }

</style>

<body>
<div id="app">
    <a :href="url">详情</a>
    <div class="main">
        <el-form :model="form" inline>
            <el-form-item label="任务类型">
                <el-select v-model="form.taskType">
                    <el-option value="0" label="考勤同步"></el-option>
                    <el-option value="1" label="OA部门同步"></el-option>
                    <el-option value="2" label="OA岗位同步"></el-option>
                    <el-option value="3" label="OA员工同步"></el-option>
                    <el-option value="4" label="AD用户同步"></el-option>
                    <el-option value="5" label="备份员工信息"></el-option>
                    <el-option value="6" label="备份员工历史"></el-option>
                    <el-option value="7" label="备份部门信息"></el-option>
                    <el-option value="8" label="备份职务信息"></el-option>
                    <el-option value="9" label="备份职位信息"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否成功" >
                <el-select v-model="form.isSucess">
                    <el-option value="是" label="是"></el-option>
                    <el-option value="否" label="否"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="执行类型">
                <el-select v-model="form.type">
                    <el-option value="1" label="手动"></el-option>
                    <el-option value="2" label="自动"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="执行时间" required>
                <div>
                    <el-date-picker v-model="form.startDate" type="date" placeholder="请选择">
                    </el-date-picker>
                    -
                    <el-date-picker v-model="form.endDate" type="date" placeholder="请选择">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button @click="reset" icon="el-icon-refresh">重置</el-button>
                <el-button type="primary" @click="search()" icon="el-icon-search">搜索
                </el-button>
            </el-form-item>
        </el-form>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%;overflow-y: auto;height: calc(100% - 260px);"
                v-loading="loading">
            </el-table-column>
            <el-table-column
                    prop="taskType"
                    label="任务类型" width="100">
            </el-table-column>
            <el-table-column
                    prop="taskName"
                    label="任务名称" width="150">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="执行类型" width="70">
                <template slot-scope="scope">{{ scope.row.type === '2' ? '自动' : '手动' }}</template>
            </el-table-column>
            <el-table-column
                    prop="excuteDate"
                    label="执行时间" width="150">
            </el-table-column>
            <el-table-column
                    prop="isSucess"
                    label="是否成功" width="50">
            </el-table-column>
            <el-table-column
                    prop="requestParam"
                    label="请求报文" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="responeParam"
                    label="响应报文" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="errorReason"
                    label="异常原因"  :show-overflow-tooltip="true">
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.page"
                    :page-sizes="[10, 20, 30, 50,100]"
                    :page-size="pagination.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total" v-if="pagination.total>0"></el-pagination>
        </div>
    </div>

</div>

</body>
<script>
    const apiUrl = `http://localhost:8081`
    var app = new Vue({
        el: '#app',
        data() {
            return {
                url: apiUrl + '/detail',
                pagination: {
                    total: 100,
                    page: 1,
                    size: 10,
                },
                form: {
                    taskName: '',
                    type: '',
                    startDate: dayjs().add(-6, 'day'),
                    endDate: dayjs().add(1, 'day'),
                },
                loading: false,
                tableData: [],
                multipleSelection: []
            }
        },
        methods: {
            handleSizeChange(val) {
                this.pagination.size = val
                this.handleQuery()
            },
            handleCurrentChange(val) {
                this.pagination.page = val
                this.handleQuery()
            },
            async handleQuery() {
                this.loading = true
                this.form.currentPage = this.pagination.page
                this.form.pageSize = this.pagination.size
                this.form.startDate = dayjs(this.form.startDate).format("YYYY-MM-DD HH:mm:ss")
                this.form.endDate = dayjs(this.form.endDate).format("YYYY-MM-DD HH:mm:ss")
                const res = await axios({
                    url: `/exception/findPage`,
                    method: 'post',
                    data: this.form,
                    headers: {
                        // Authorization: this.token,
                        'Content-Type': 'application/json;charset=utf-8'
                    }
                })
                console.log('table', res)
                res.data.data?.list?.forEach(ele => {
                    ele.time = dayjs(parseInt(ele.created)).format('YYYY-MM-DD HH:mm:ss')
                })
                this.tableData = res.data?.data?.list
                this.pagination.total = parseFloat(res.data?.data?.total)
                this.loading = false
                if (parseInt(res.data?.data?.total) > 0 && res.data?.data?.list?.length == 0) {
                    this.form.page = 0
                    this.handleQuery()
                }
            },
            // 搜索
            search() {
                this.pagination = {
                    page: 1,
                    size: 10,
                    total: 0
                }
                this.handleQuery()
            },
            // 重置
            reset() {
                this.pagination = {
                    page: 1,
                    size: 10,
                    total: 0
                }
                this.form = {
                    startDate: dayjs().add(-6, 'day'),
                    endDate: dayjs().add(0, 'day'),
                }
                this.pagination.total = 0
                this.handleQuery()
            }
        },
        mounted() {
            this.handleQuery()
        }
    })
</script>
</html>
