<!-- 登录日志管理页面 -->
<template>
  <div>
    <el-card class="flex-1">
      <template slot="header">
        <span>登录日志管理</span>
      </template>
      <el-form :model="queryform" ref="queryform">
        <el-row>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="服务器IP" prop="svrIp">
              <el-input v-model="queryform.svrIp"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="登录账号" prop="userId">
              <el-input v-model="queryform.userId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="处理结果" prop="sesId">
              <el-select placeholder="请选择" v-sys-code="'questionType'" v-model="queryform.respcode" clearable>
                <el-option v-for="item in RESPCODE" :key="item.key" :label="item.label" :value="item.key" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="登录开始时间" prop="actSta">
              <el-date-picker type="date" v-model="queryform.actSta" value-format="timestamp"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="flex-1 margin-top-2">
      <template slot="header">
        <span>登录日志列表</span>
        <div class="pull-right">
          <el-button type="primary" @click="queryData" icon="el-icon-fa-search" title="查询"></el-button>
          <el-button type="primary" @click="resetquery" icon="el-icon-fa-reply-all" title="重置"></el-button>
        </div>
      </template>
      <PageTable hideTitle ref="dataTable" :auto-load="true" :page-size="10" @load-data="dataTableLoad" :data="table.data" highlight-current-row stripe border>
        <el-table-column prop="userid" label="登录账号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="username" 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="logtype" dict='logtype' label="登录类型">
          <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="协议类型">
          <template slot-scope="scope">
            <SysCode :type="'acttype'" :value="scope.row.acttype"></SysCode>
          </template>
        </el-table-column>
        <el-table-column prop="sesid" label="会话标识" width="250px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="actsta" label="操作时间" :formatter="formatterDateTime" width="150px"></el-table-column>
        <el-table-column prop="optime" label="操作耗时" placement="top" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="respcode" label="处理代码" show-overflow-tooltip>
          <template slot-scope='scope'>
            {{scope.row.respcode+':'+(scope.row.respcode=="000000"?"请求处理成功":scope.row.respcode=="000100"?"用户会话超时":scope.row.respcode=="000200"?"安全服务错误":scope.row.respcode=="000300"?"校验服务错误":scope.row.respcode=="000400"?"系统后台错误":scope.row.respcode=="000500"?"网络服务错误":"未知错误")}}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed='right' width='100' align='center'>
          <template slot-scope="scope">
            <el-button type="primary" @click="showInfo(scope.row.uuid)" icon="el-icon-fa-eye" title="查看详情"></el-button>
            <el-button type="primary" v-if="scope.row.servflag" icon="el-icon-fa-bookmark-o" title="查看会话服务" @click="showService(scope.row.sesid)"></el-button>
            <el-button type="primary" v-if="scope.row.operflag" icon="el-icon-fa-exchange" title="查看会话操作" @click="showSession(scope.row.sesid)"></el-button>
          </template>
        </el-table-column>
      </PageTable>
      <el-dialog append-to-body v-draggable title="查看详情" :visible.sync="currentInfo.show" width="600px">
        <SignInfo :uuid="currentInfo.uuid" :error="currentInfo.error" v-if="currentInfo.show"></SignInfo>
      </el-dialog>

    </el-card>
  </div>
</template>
<script>
import SignInfo from "./LogsSignInfo";
import SessionOper from "./SessionOper";
import SessionServ from "./SessionServ";
import LogsSignAPI from "@/api/base/logs/LogsSign";

export default {
  components: { SessionOper, SessionServ, SignInfo },
  data() {
    return {
      queryform: {
        svrIp: "",
        userId: "",
        respCode: "",
        actSta: "",
        respcode: ""
      },
      RESPCODE: [
        {
          key: "1",
          label: "成功"
        },
        {
          key: "2",
          label: "失败"
        }
      ],
      table: {
        data: []
      },
      currentInfo: {
        error: {},
        uuid: "",
        show: false,
        loading: false
      }
    };
  },
  methods: {
    showInfo(uuid) {
      this.currentInfo.uuid = uuid;
      this.currentInfo.show = true;
    },
    queryData() {
      this.$refs.dataTable.load(this.queryform);
    },
    resetquery() {
      this.$refs.queryform.resetFields();
      this.queryform.actSta = "";
      this.queryform.respcode = "";
    },
    dataTableLoad(params, resolve) {
      LogsSignAPI.queryLogsSign(params)
        .then(resolve) //  让表格解析你提供的数据 (主要解析页码等)
        .then(respData => (this.table.data = respData.datarows)); // 本地也记录一下数据 (提供给表示显示的数据)
    },
    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 });
    },
    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);
      }
    }
  }
};
</script>
