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


            <!-- 查询条件区域 -->
            <template v-slot:search-form="{formData}">
                <el-form-item label="服务器IP">
                    <el-input v-model="formData.svrIp" @keyup.native.enter="$refs.curdPanelRef.pageTable.handleLoad()"></el-input>
                </el-form-item>
                <el-form-item label="登录账号">
                    <el-input v-model="formData.userId" @keyup.native.enter="$refs.curdPanelRef.pageTable.handleLoad()"></el-input>
                </el-form-item>
                <el-form-item label="处理结果">
                    <el-select placeholder="请选择" v-model="formData.respcode" clearable>
                        <el-option label="成功" value="1"/>
                        <el-option label="失败" value="2"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="登录开始时间">
                    <el-date-picker type="date" v-model="formData.actSta" value-format="timestamp"></el-date-picker>
                </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="svrip" label="登录服务器" width="100px" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ `${scope.row.svrip} - ${scope.row.svrname}` }}
                    </template>
                </el-table-column>
                <el-table-column prop="logtype" dict='logtype' label="登录类型" width="70px">
                    <template slot-scope="scope">
                        <SysCode :type="'logtype'" :value="scope.row.logtype"></SysCode>
                    </template>
                </el-table-column>
                <el-table-column prop="reqip" label="请求者地址" width="100px" show-overflow-tooltip></el-table-column>
                <el-table-column prop="acttype" dict='acttype' label="协议类型" width="80px">
                    <template slot-scope="scope">
                        <SysCode :type="'acttype'" :value="scope.row.acttype"></SysCode>
                    </template>
                </el-table-column>
                <el-table-column prop="sesid" label="会话标识" width="100px" show-overflow-tooltip></el-table-column>
                <el-table-column prop="actsta" label="操作时间" :formatter="formatterDateTime" width="150px"></el-table-column>
                <el-table-column prop="respcode" label="处理结果" show-overflow-tooltip
                                 :formatter="LogsConstants.respCodeFmt"></el-table-column>
                <el-table-column label="操作" width='220' align='center'>
                    <template slot-scope="{row}">
                        <el-button title="查看" icon="el-icon-fa-eye" class="blue" @click="showInfo(row)">查看</el-button>
                        <el-button title="会话服务" icon="el-icon-fa-bookmark-o" class="blue" :disabled="!row.servcount || row.servcount === 0"
                                   @click="showService(row.sesid)">会话服务
                        </el-button>
                        <el-button title="会话操作" icon="el-icon-fa-exchange" class="blue" :disabled="!row.opercount || row.opercount === 0"
                                   @click="showSession(row.sesid)">会话操作
                        </el-button>
                    </template>
                </el-table-column>
            </template>


        </CurdPanel>

        <el-dialog close-on-press-escape append-to-body v-draggable title="查看详情" :visible.sync="info.visible" width="600px">
            <div v-if="info.visible" v-loading="info.loading">
                <SignInfo v-model="info.data"></SignInfo>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import SignInfo from "./LogsSignInfo";

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

export default {
    components: {SignInfo},
    data() {
        return {
            LogsConstants,
            LogsSignLogApi: BaseApi('/logs/LogsSignLog'),
            info: {
                visible: false,
                loading: false,
                data: {}
            }
        };
    },
    methods: {
        async showInfo(row) {
            this.info.data = row;
            this.info.visible = true;
        },
        async showSession(sesId) {
            await this.confirm(null, "是否跳转至交互日志页面?");
            await this.removeView("交互日志");
            await this.addView("交互日志", "/logs/LogsOper", {sesId: sesId});
        },
        async showService(sesId) {
            await this.confirm(null, "是否跳转至服务日志页面?");
            await this.removeView("服务日志");
            await this.addView("服务日志", "/logs/LogsServ", {sesId: sesId});
        }
    }
};
</script>
