<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="LogsOperLogApi.doQuery"
                   :searchParam="{}"
                   :queryFormLabelPosition="'top'"
                   :allowAdd="false"
                   :allowEdit="false"
                   :allowDelete="false"
                   :allowRefresh="false"
                   fullHeight
                   :autoLoad="false">


            <!-- 查询条件区域 -->
            <template v-slot:search-form="{formData}">
                <el-form-item label="记录时间" prop="actsta">
                    <el-date-picker v-model="formData.actsta" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                                    end-placeholder="结束时间" value-format="timestamp">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="登陆账号" prop="userId">
                    <el-input v-model="formData.userId" @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="reqIp">
                    <el-input v-model="formData.reqIp" @keyup.native.enter="$refs.curdPanelRef.pageTable.handleLoad()"></el-input>
                </el-form-item>
                <el-form-item label="操作描述" prop="actDesc">
                    <el-input v-model="formData.actDesc" @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>
                <el-form-item label="操作耗时(大于)" prop="actTime">
                    <el-input v-model="formData.actTime" @keyup.native.enter="$refs.curdPanelRef.pageTable.handleLoad()"></el-input>
                </el-form-item>
            </template>

            <!-- 表格列区域 -->
            <template slot="table-columns">
                <el-table-column prop="opuserid" label="登录账号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="opusername" label="用户名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="uuid" label="交互标识" width="130px" show-overflow-tooltip></el-table-column>
                <el-table-column prop="svrip" label="服务器地址" width="100px" show-overflow-tooltip></el-table-column>
                <el-table-column prop="reqip" label="访问者地址" width="100px" show-overflow-tooltip></el-table-column>
                <el-table-column prop="actdesc" label="操作描述" show-overflow-tooltip>
                    <template slot-scope='scope'>
                        {{ scope.row.actdesc || "系统操作" }}
                    </template>
                </el-table-column>
                <el-table-column prop="sesid" label="会话标识" width="130px" show-overflow-tooltip></el-table-column>
                <el-table-column prop="actsta" label="操作时间" :formatter="formatterDateTime" width='140px'
                                 show-overflow-tooltip></el-table-column>
                <el-table-column label="操作耗时" width="70px" show-overflow-tooltip>
                    <template slot-scope="{row}">
                        {{ row.acttime ? row.acttime + 'ms' : '' }}
                    </template>
                </el-table-column>
                <el-table-column prop="respcode" label="处理结果" show-overflow-tooltip
                                 :formatter="LogsConstants.respCodeFmt"></el-table-column>
                <el-table-column label="操作" width='270' align='center' fixed='right'>
                    <template slot-scope="scope">
                        <el-button title="查看" icon="el-icon-fa-eye" class="blue" @click="showInfo(scope.row)">查看</el-button>
                        <!--             <el-button class="blue" @click="showServ(scope.row.uuid)" icon="el-icon-fa-bookmark-o" title="查看服务"></el-button> -->
                        <el-button title="数据" icon="el-icon-fa-search" class="blue" v-if="scope.row.dataflag"
                                   @click="showData(scope.row.uuid)">数据
                        </el-button>
                        <el-button title="堆栈信息" icon="el-icon-fa-book" class="red" @click="showStak(scope.row.uuid)">堆栈</el-button>
                        <el-button title="交互服务" icon="el-icon-fa-bookmark-o" class="blue" @click="showServ(scope.row.uuid)">交互服务
                        </el-button>
                    </template>
                </el-table-column>
            </template>


        </CurdPanel>

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


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


        <el-dialog close-on-press-escape append-to-body v-draggable title="堆栈信息" :visible.sync="editor.stakshow" width="600px">
            <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>
        </el-dialog>
    </div>
</template>

<script>
import LogsOperInfo from "./LogsOperInfo";
import LogsOperData from "./LogsOperData";
import LogsConstants from "./LogsConstants";

import BaseApi from '@/api/base/BaseApi';

export default {
    components: {LogsOperData, LogsOperInfo},
    props: {
        sesId: {
            type: String
        }
    },
    data() {
        return {
            LogsConstants,
            LogsOperLogApi: BaseApi('/logs/LogsOperLog'),
            stakinfo: "",
            //详细信息dialog
            currentInfo: {
                loading: false,
                visible: false,
                uuid: "",
                error: {}
            },
            editor: {
                uuid: null,
                datashow: false,
                stakshow: false,
                visible: false, //  编辑器-显示
                loading: false
            },
        };
    },
    mounted(){
        if(this.sesId) {
            this.$set(this.$refs.curdPanelRef.pageTable.param, 'sesId', this.sesId);
        }
        this.$refs.curdPanelRef.pageTable.handleLoad();
    },
    methods: {
        //  打开画面
        async showStak(uuid) {
            let data = await this.LogsOperLogApi.doGet(uuid);
            this.stakinfo = data.stakInfo;
            this.editor.stakshow = true;
        },
        showData(uuid) {
            this.editor.uuid = uuid;
            this.editor.datashow = true;
        },
        async showServ(uuid) {
            await this.confirm(null, "是否跳转至服务日志页面?");
            await this.removeView("服务日志");
            await this.addView("服务日志", "/logs/LogsServ", {uuid: uuid});
        },
        addView(name, path, propsData) {
            let idx = this.$tabView.viewList.findIndex(item => item.name === name);
            if (idx === -1) this.$tabView.viewList.push({name, path, propsData});
            this.$tabView.active = name;
        },
        removeView(name) {
            let idx = this.$tabView.viewList.findIndex(item => item.name === name);
            if (idx > -1) {
                this.$tabView.active = this.$tabView.viewList[idx - 1].name;
                this.$tabView.viewList.splice(idx, 1);
            }
        },
        //查看详情
        showInfo(row) {
            this.currentInfo.uuid = row.uuid;
            this.currentInfo.visible = true;
        },
    }
};
</script>
