<template>
    <ap-container>
        <ap-header margin="1111">
            <el-form ref="tSysTaskLogSearchForm" :model="tSysTaskLogSearchForm" :rules="tSysTaskLogSearchFormRules"
                     :inline="true" class="layout-header-form" @submit.native.prevent="searchEvent">
                <el-form-item label="搜索:" class="layout-header-form-item" prop="likeStr">
                    <el-input v-model="tSysTaskLogSearchForm.likeStr" placeholder="计划名/任务名/备注"></el-input>
                </el-form-item>
                <el-form-item label="状态:" class="layout-header-form-item" prop="fdStatus">
                    <el-select v-model="tSysTaskLogSearchForm.fdStatus" style="width: 100px">
                        <el-option key="" label="全部" value=""></el-option>
                        <el-option key="1" label="进行中" value="1"></el-option>
                        <el-option key="2" label="成功" value="2"></el-option>
                        <el-option key="3" label="条件终止" value="3"></el-option>
                        <el-option key="4" label="异常" value="4"></el-option>
                        <el-option key="9" label="未执行" value="9"></el-option>
                    </el-select>
                </el-form-item>
                <el-date-picker v-model="testDate" format="yyyy-MM-dd HH:mm:ss" value-format="timestamp" type="datetimerange" style="margin-left: 10px;width:350px"></el-date-picker>
                <el-button type="primary" @click="searchEvent" style="margin-left: 10px;" native-type="submit">查询</el-button>
            </el-form>
            <el-button type="primary" @click="refreshLogSchedule" icon="el-icon-refresh" style="margin-left: 10px;">
                刷新计划时间
            </el-button>
        </ap-header>
        <ap-main margin="0111">
            <ap-table ref="tSysTaskLogRef" :options.sync="tSysTaskLogOpt">
                <template #fdMessage="slotProps">
                    <div class="ap-ellipse" @click="showMsg(slotProps.rowData.fdMessage)"
                         style="color: #0000EE;cursor: pointer;">
                        {{ slotProps.rowData.fdMessage }}
                    </div>
                </template>
                <template #fdCallback="slotProps">
                    <div class="ap-ellipse" @click="showMsg(slotProps.rowData.fdCallback)"
                         style="color: #0000EE;cursor: pointer;">
                        {{ slotProps.rowData.fdCallback }}
                    </div>
                </template>
            </ap-table>
        </ap-main>
        <el-dialog title="Log详情" :visible.sync="logDialogVisible" width="70%">
            <div style="white-space:pre;overflow: scroll;min-height: 100px">
                {{ logMsg }}
            </div>
        </el-dialog>
    </ap-container>
</template>

<script>
import {formatDate} from "ap-util/util/DateUtil";

export default {
    name: 'SysTaskLog',
    data() {
        let columns = [
            {
                prop: 'fdTime',
                label: '计划开始时间',
                type: 'datePicker',
                datePickerFormat: 'MM-dd HH:mm:ss',
                width: 110,
                html: function (value, row) {
                    if (row.fdLogLevel == 2) {
                        return `<span class="ap-color-red">只显示错误日志</span>`;
                    }
                    if (value == null) {
                        if (row.fdComment != null && row.fdComment.indexOf("手动") > -1) {
                            return `<span class="ap-color-blue">手动</span>`;
                        }
                        if (row.fdComment != null && row.fdComment.indexOf("回调请求") > -1) {
                            return `<span class="ap-color-blue">回调请求</span>`;
                        } else {
                            return `<span class="ap-color-red">无计划</span>`;
                        }
                    }
                    let diff = "";
                    if (row.fdStartTime != null) {
                        let diffTime = Math.floor((row.fdStartTime - value) / 1000);
                        diff = diffTime == 0 ? "" : " <span class='ap-color-red'>\+" + Math.floor((row.fdStartTime - value) / 1000) + "</span>";
                    }
                    return formatDate(new Date(value), 'MM-dd hh:mm:ss') + diff;
                }
            }, {
                prop: 'fdStatus',
                label: '状态',
                width: 80,
                type: 'select',
                align: 'center',
                selectOptions: [{label: "进行中", value: "1"}, {label: "成功", value: "2"},
                    {label: "条件终止", value: "3"}, {label: "异常", value: "4"}],
                html: function (value, row) {
                    if (value == null) {
                        return `<div class="ap-tag-danger">未执行</div>`
                    }
                    switch (value) {
                        case 1:
                            return `<div class="ap-tag">进行中</div>`;
                        case 2:
                            return `<div class="ap-tag-success">成功</div>`
                        case 3:
                            return `<div class="ap-tag-warning">条件终止</div>`
                        case 4:
                            return `<div class="ap-tag-danger">异常</div>`
                    }
                    return value;
                }
            }, {
                prop: 'fdPlanName',
                label: '计划名/任务名',
                type: 'input',
                width: 250,
                showOverflowTooltip: true,
                html: function (value, row) {
                    switch (value) {
                        case 1:
                            return `<div class="ap-tag">进行中</div>`;
                        case 2:
                            return `<div class="ap-tag-success">成功</div>`
                        case 3:
                            return `<div class="ap-tag-warning">条件终止</div>`
                        case 4:
                            return `<div class="ap-tag-danger">异常</div>`
                    }
                    return `<span>${value}</span><span class="ap-color-gray">(${row.fdTaskName})</span>`;
                }
            }, {
                prop: 'fdPath',
                label: '路径',
                type: 'input',
                width: 150,
                showOverflowTooltip: true,
            }, {
                prop: 'fdCount',
                label: '次/天',
                type: 'input',
                width: 40,
            }, {
                prop: 'fdStartTime',
                label: '实际开始时间',
                type: 'datePicker',
                datePickerFormat: 'MM-dd HH:mm:ss',
                width: 100
            }, {
                prop: 'fdEndTime',
                label: '结束时间',
                type: 'datePicker',
                datePickerFormat: 'MM-dd HH:mm:ss',
                width: 100
            }, {
                prop: 'cc',
                label: '用时/s',
                type: 'input',
                width: 50,
                html: function (value, row) {
                    return (row.fdEndTime - row.fdStartTime) / 1000;
                }
            }, {
                prop: 'fdMacAddress',
                label: 'MAC地址',
                type: 'input',
                width: 80,
                showOverflowTooltip: true,
            }, {
                prop: 'fdParameter',
                label: '参数',
                type: 'input',
                width: 80,
                showOverflowTooltip: true,
            }, {
                prop: 'fdComment',
                label: '备注',
                type: 'input',
                width: 120,
                showOverflowTooltip: true,
            }, {
                prop: 'fdMessage',
                label: '调度计划结果',
                type: "slot",
                slot: "fdMessage",
                minWidth: 100
            }, {
                prop: 'fdCallback',
                label: '回调请求结果',
                type: "slot",
                slot: "fdCallback",
                width: 120
            }
        ];
        let tableOpt = {
            title: "调度执行日志",
            columns: columns,
            dataUrl: "/apt/sys/TSysTaskLog/getTSysTaskLogGridList",
            toolbarBtn: [
                {btnType: "warning", text: "条件终止", icon: "el-icon-close2", onClick: this.closeLog},
                {btnType: "primary ", text: "重新执行", icon: "el-icon-guide", onClick: this.doTask},
                "refresh"],
            initData: true, // 默认false
            params: () => {
                return {
                    likeStr: this.tSysTaskLogSearchForm.likeStr,
                    fdStatus: this.tSysTaskLogSearchForm.fdStatus,
                    startDate: this.testDate[0],
                    endDate: this.testDate[1],
                }
            }
        };

        let startDate = new Date();
        startDate.setHours(0, 0, 0, 0);
        let endDate = new Date();

        return {
            tSysTaskLogOpt: tableOpt,
            tSysTaskLogSearchForm: {
                likeStr: "",
                fdStatus: ""
            },
            tSysTaskLogSearchFormRules: {
                likeStr: [{min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}]
            },
            logDialogVisible: false,
            logMsg: "",
            testDate: [startDate.getTime(), endDate.getTime()]
        }
    },
    methods: {
        // 查询
        searchEvent() {
            if (this.testDate == null || this.testDate.length < 2) {
                this.$message.error('请选择日期！');
                return;
            }
            // 表单rules认证
            this.$refs.tSysTaskLogSearchForm.validate((valid) => {
                if (!valid) {
                    this.$message.error('搜索条件格式不正确！');
                    return false;
                }
                this.$refs.tSysTaskLogRef.refresh();
            });
        },
        showMsg(msg) {
            this.logDialogVisible = true;
            this.logMsg = msg;
        },
        closeLog() {
            const selection = this.$refs.tSysTaskLogRef.getSelection()
            if (selection.length == 0) {
                this.$message.error(`请选择需要操作的行！`)
                return;
            } else if (selection.length > 1) {
                this.$message.error(`只能选择一行！`)
                return;
            }
            this.$request({
                url: '/apt/sys/TSysTaskLog/closeLog',
                method: 'post',
                data: {
                    id: selection[0].fdId
                }
            }).then(response => {
                this.$message.success(`日志状态已变更为手动终止(条件终止)`)
            })
        },
        doTask() {
            let selects = this.$refs.tSysTaskLogRef.getSelection();
            if (selects == null || selects.length < 1) {
                this.$message.error("请选择需要操作的行")
                return;
            }
            if (selects.length != 1) {
                this.$message.error("只能选择单行操作！")
                return;
            }
            this.$message.warning("调度计划开始执行...");
            this.$request({
                url: '/apt/sys/TSysTaskPlan/doTask',
                method: 'post',
                data: {
                    planId: selects[0].fdPlanId,
                    comment: "手动【调度日志】"
                }
            }).then(response => {
                this.$message.success(response.data);
            })

        },
        refreshLogSchedule() {
            this.$request({
                url: '/apt/sys/TSysTaskLogSchedule/refreshLogSchedule',
                method: 'post',
                data: {}
            }).then(response => {
                this.$message.success("操作成功！");
                this.$refs.tSysTaskPlanScheduleTableRef.refresh();
            })
        },
    }
}
</script>

<style scoped>
</style>
