<template>
    <el-container class="fullheight" style="background-color:#fff;padding:10px">
        <el-container>
            <el-main>
                <ht-table
                    ref="executeJobTable"
                    @load="loadData"
                    @row-dblclick="handleDbClick"
                    :data="data"
                    :pageResult="pageResult"
                    :selection="true"
                    quick-search-props="jobName,trigName"
                    :show-export="false"
                >
                    <template v-slot:toolbar>
                        <el-button
                            size="small"
                            icon="icon-withdraw"
                            @click="back()"
                            >返回</el-button
                        >
                        <ht-delete-button
                            size="small"
                            :url="executeJobDeleteUrl"
                            :htTable="$refs.executeJobTable"
                            >删除</ht-delete-button
                        >
                    </template>
                    <template v-slot:search>
                        <!-- <el-date-picker
              v-model="startTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
              end-placeholder="结束日期">
            </el-date-picker> -->
                        <ht-table-search-panel :divide="3">
                            <ht-table-search-field
                                label="触发名称"
                                prop="trigName"
                            />
                            <ht-table-search-field
                                type="daterange"
                                label="开始时间"
                                prop="startTime"
                                operation="BETWEEN"
                            />
                            <!--  type="daterange" -->
                        </ht-table-search-panel>
                    </template>
                    <template>
                        <ht-table-column
                            type="index"
                            width="50"
                            align="center"
                            label="序号"
                        />
                        <ht-table-column
                            prop="jobName"
                            label="执行名称"
                            width="300"
                            :sortable="true"
                            :show-overflow-tooltip="true"
                        />
                        <ht-table-column
                            prop="trigName"
                            label="触发名称"
                            sortable
                            :show-overflow-tooltip="true"
                        />
                        <ht-table-column
                            prop="startTime"
                            label="开始时间"
                            sortable
                            width="160"
                        />
                        <ht-table-column
                            prop="endTime"
                            label="结束时间"
                            sortable
                            width="160"
                        />
                        <ht-table-column prop="content" label="日志内容">
                            <template v-slot="{row}">
                                <el-tooltip
                                    effect="dark"
                                    content="双击查看日志详情"
                                    placement="top"
                                    v-if="row.content.length"
                                >
                                    <div class="oneLine">{{ row.content }}</div>
                                </el-tooltip>
                            </template>
                        </ht-table-column>
                        <ht-table-column
                            prop="state"
                            label="状态"
                            width="80"
                            :filters="[
                                {text: '失败', value: 0},
                                {text: '正常', value: 1},
                            ]"
                        >
                            <template v-slot="{row}">
                                <el-tag type="success" v-if="row.state == 1"
                                    >正常</el-tag
                                >
                                <el-tag type="danger" v-if="row.state == 0"
                                    >失败</el-tag
                                >
                            </template>
                        </ht-table-column>
                    </template>
                </ht-table>
                <common-dialog
                    width="800px"
                    title="日志详情"
                    class="sp-manager__dialog"
                    :visible="dialogVisible"
                    :before-close="beforeCloseDialog"
                >
                    <el-form
                        v-form
                        data-vv-scope="BizPointInfoForm"
                        class="form-single-row"
                    >
                        <ht-form-item label="状态">
                            <el-tag type="success" v-if="log.state == 1"
                                >正常</el-tag
                            >
                            <el-tag type="danger" v-if="log.state == 0"
                                >失败</el-tag
                            >
                        </ht-form-item>
                        <ht-form-item label="执行名称">
                            <el-input v-model="log.jobName" readonly />
                        </ht-form-item>
                        <ht-form-item label="触发名称">
                            <el-input v-model="log.trigName" readonly />
                        </ht-form-item>
                        <el-row :gutter="10">
                            <el-col :span="12"
                                ><ht-form-item label="开始时间">
                                    <el-input
                                        v-model="log.startTime"
                                        readonly
                                    /> </ht-form-item
                            ></el-col>
                            <el-col :span="12">
                                <ht-form-item label="结束时间">
                                    <el-input v-model="log.endTime" readonly />
                                </ht-form-item>
                            </el-col>
                        </el-row>

                        <ht-form-item label="日志内容">
                            <el-input
                                type="textarea"
                                v-model="log.content"
                                autosize
                                readonly
                            />
                        </ht-form-item>
                    </el-form>
                    <div slot="footer" style="text-align: center">
                        <el-button @click="beforeCloseDialog">关闭</el-button>
                    </div>
                </common-dialog>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import sys from '@/api/portal.js'
import req from "@/request.js";
export default {
    name: 'executeJobList',
    props: {
        jobName: String,
    },
    components: {},
    data() {
        return {
            data: [],
            pageResult: {
                page: 1,
                pageSize: 50,
                total: 0,
            },
            executeJob: {},
            log: {},
            startTime: '',
            dialogVisible: false,
        }
    },
    watch: {
        // startTime: function(newVal, oldVal) {
        //   if (newVal != oldVal) {
        //     this.$refs.executeJobTable.querys.push({property: "startTime", operation: "BETWEEN", value: newVal, relation: "AND"});
        //   }
        // }
    },
    computed: {
        executeJobDeleteUrl: function () {
            return window.context.portal + '/job/scheduler/v1/delJobLog'
        },
    },
    activated: function () {
        this.$refs.executeJobTable.load()
    },
    mounted() {
        // 因为resize事件在整个项目中只能监听一次，所以这里通过全局广播发送这个事件
        window.onresize = () => {
            this.$root.$emit('resize')
        }
    },
    methods: {
        handleDbClick(row) {
            this.log = row
            this.dialogVisible = true
        },
        beforeCloseDialog() {
            this.dialogVisible = false
        },
        back() {
            // if (this.$route.params.trigName) {
            //   this.$router.push({
            //       name: "schedulerTriggerList",
            //       params: { jobName: this.$route.params.jobName, tobName: "触发器列表" }
            //     });
            // }else{
            //   this.$router.push('/sysplat/schedulerManager');
            // }
            this.$router.push('/frontPlat/systemScheduling')
        },
        loadData(param, cb) {
            let trigName = ''
            if (this.$route.params.trigName) {
                trigName = this.$route.params.trigName
            }
             req.post(
                window.context.xqhk +
                    '/job/scheduler/v1/listJson?jobName=' +
                    this.$route.params.jobName +
                    '&trigName=' +
                    trigName,
                param
            )
                .then((response) => {
                    this.data = response.rows
                    this.pageResult = {
                        page: response.page,
                        pageSize: response.pageSize,
                        total: response.total,
                    }
                })
                .finally(() => cb())
        },
    },
}
</script>

<style scoped>
.el-main {
    padding: 0px;
}
.oneLine {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
