<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div class="full-height">
        <CurdPanel ref="curdPanelRef"
                   title-search-form="服务日志查询"
                   title-data-table="服务日志列表"
                   :doQuery="LogsServLogApi.doQuery"
                   :searchParam="{operuuid:uuid, sesId:sesId,servsta:defaultDate}"
                   :queryFormLabelPosition="'top'"
                   :allowAdd="false"
                   :allowEdit="false"
                   :allowDelete="false"
                   :allowRefresh="false"
                   fullHeight
                   autoLoad>


            <!-- 查询条件区域 -->
            <template v-slot:search-form="{formData}">
                <el-form-item label="记录时间" prop="servsta">
                    <el-date-picker v-model="formData.servsta" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                                    end-placeholder="结束时间" value-format="timestamp">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="交互标识" prop="operuuid">
                    <el-input v-model="formData.operuuid" @keyup.native.enter="$refs.curdPanelRef.pageTable.handleLoad()"></el-input>
                </el-form-item>
                <el-form-item label="服务器地址" prop="svrIp">
                    <el-input v-model="formData.svrIp" @keyup.native.enter="$refs.curdPanelRef.pageTable.handleLoad()"></el-input>
                </el-form-item>
                <el-form-item label="会话标识" prop="sesId">
                    <el-input v-model="formData.sesId" @keyup.native.enter="$refs.curdPanelRef.pageTable.handleLoad()"></el-input>
                </el-form-item>
                <el-form-item label="处理结果" prop="respcode">
                    <el-select placeholder="请选择" v-sys-code="'questionType'" v-model="formData.respcode" clearable>
                        <el-option label="成功" value="1"/>
                        <el-option label="失败" value="2"/>
                    </el-select>
                </el-form-item>
            </template>

            <!-- 表格列区域 -->
            <template slot="table-columns">
                <el-table-column prop="opuuid" label="交互标识" show-overflow-tooltip></el-table-column>
                <el-table-column prop="svrip" label="服务器地址" width="100px" show-overflow-tooltip></el-table-column>
                <el-table-column prop="svrname" label="服务器名称" width="100px" show-overflow-tooltip></el-table-column>
                <el-table-column prop="servdesc" label="服务描述" show-overflow-tooltip>
                    <template slot-scope='scope'>
                        {{ scope.row.servdesc || "系统服务" }}
                    </template>
                </el-table-column>
                <el-table-column prop="sesid" label="会话标识" width="130px" show-overflow-tooltip></el-table-column>
                <el-table-column prop="servsta" label="操作时间" width='140px' :formatter="formatterDateTime"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column label="操作耗时" width="70px" show-overflow-tooltip>
                    <template slot-scope="{row}">
                        {{ row.servend - row.servsta }}ms
                    </template>
                </el-table-column>
                <el-table-column prop="respcode" label="处理结果" :formatter="LogsConstants.respCodeFmt" width="80px"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" fixed='right' width='300' align='center'>
                    <template slot-scope="scope">
                        <el-button class="blue" @click="showInfo(scope.row)" icon="el-icon-fa-eye">查看</el-button>
                        <el-button class="blue" @click="showSQL(scope.row.uuid)" icon="el-icon-fa-info" title="查看SQL">查看SQL</el-button>
                        <el-button class="blue" v-if="scope.row.dataflag" @click="showData(scope.row.uuid)" icon="el-icon-fa-search">查看数据
                        </el-button>
                        <el-button class="red" v-if="scope.row.stakinfo" @click="showStak(scope.row.stakinfo)" icon="el-icon-fa-book">堆栈信息
                        </el-button>
                    </template>
                </el-table-column>
            </template>


        </CurdPanel>

        <el-dialog close-on-press-escape append-to-body v-draggable title="查看详情" :visible.sync="currentInfo.show" width="600px">
            <LogsServInfo v-if="currentInfo.show" :uuid="currentInfo.uuid" :error="currentInfo.error"></LogsServInfo>
        </el-dialog>

        <el-dialog close-on-press-escape append-to-body v-draggable title="查看数据" :visible.sync="editor.datashow" width="600px">
            <div v-if="editor.datashow">
                <LogsOperData :uuid="editor.uuid" :flag="2"></LogsOperData>
            </div>
        </el-dialog>

        <el-dialog close-on-press-escape append-to-body v-draggable title="查看SQL" :visible.sync="editor.sqlshow" width="600px">
            <div v-if="editor.sqlshow">
                <LogsSqlData :seuuid="editor.seuuid"></LogsSqlData>
            </div>
        </el-dialog>

        <el-dialog close-on-press-escape append-to-body v-draggable title="查看堆栈信息" :visible.sync="editor.stakshow" width="600px">
            <template>
                <el-input v-if="stakinfo" type="textarea" :rows="25" v-model="stakinfo" readonly></el-input>
                <h1 v-else style="text-align: center;font-size: 6px;height: 300px;line-height: 300px;">暂无数据</h1>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import LogsServInfo from "./LogsServInfo";
import LogsOperData from "./LogsOperData";
import LogsSqlData from "./LogsSqlData";

import BaseApi from '@/api/base/BaseApi';
import LogsConstants from "@/module/logs/LogsConstants";

export default {
    components: {LogsOperData, LogsSqlData, LogsServInfo},
    props: {
        uuid: {
            type: String
        },
        sesId: {
            type: String
        }
    },
    data() {
        return {
            LogsConstants,
            LogsServLogApi: BaseApi('/logs/LogsServLog'),
            stakinfo: "",
            sql: "",
            //详细信息dialog
            currentInfo: {
                loading: false,
                show: false,
                uuid: "",
                error: {}
            },
            editor: {
                uuid: null,
                seuuid: null,
                datashow: false,
                sqlshow: false,
                stakshow: false,
                visible: false, //  编辑器-显示
                loading: true
            },
            defaultDate:[(new Date().valueOf() - 60 * 60 * 1000),(new Date())]
        };
    },
    methods: {
        //查看详情
        showInfo(row) {
            this.currentInfo.uuid = row.uuid;
            this.currentInfo.show = true;
        },
        showStak(stakinfo) {
            this.editor.stakshow = true;
            this.stakinfo = stakinfo;
        },
        showSQL(seuuid) {
            this.editor.seuuid = seuuid;
            this.editor.sqlshow = true;
        },
        showData(opUuid) {
            this.editor.uuid = opUuid;
            this.editor.datashow = true;
        },
    }
};
</script>
