<!-- 服务日志管理页面 -->
<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="开始时间" prop="servSta">
              <el-date-picker v-model="queryform.servSta" type="datetime" placeholder="选择开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="结束时间" prop="servEnd">
              <el-date-picker v-model="queryform.servEnd" type="datetime" placeholder="选择结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="交互标识" prop="operuuid">
              <el-input v-model="queryform.operuuid"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="服务器地址" 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="servDesc">
              <el-input v-model="queryform.servDesc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="会话标识" prop="sesId">
              <el-input v-model="queryform.sesId"></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 resp" :key="item.key" :label="item.label" :value="item.key" />
              </el-select>
            </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" :page-size="10" @load-data="dataTableLoad" :data="table.data" highlight-current-row stripe border>
        <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="250px" 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 prop="optime" label="操作耗时" placement="top" show-overflow-tooltip></el-table-column>
        <el-table-column prop="respcode" label="处理结果" :formatter="respcodeFormatter" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" fixed='right' width='80' align='center'>
          <template slot-scope="scope">
            <el-button type="primary" @click="showInfo(scope.row)" icon="el-icon-fa-eye" title="查看详情"></el-button>
            <!-- <el-button type="primary" @click="showSQL(scope.row.uuid)" icon="el-icon-fa-info" title="查看SQL"></el-button>
            <el-button type="primary" v-if="scope.row.dataflag" @click="showData(scope.row.uuid)" icon="el-icon-fa-search" title="查看数据"></el-button>
            <el-button type="primary" v-if="scope.row.stakinfo" @click="showStak(scope.row.stakinfo)" icon="el-icon-fa-book" title="查看堆栈信息"></el-button> -->
          </template>
        </el-table-column>
      </PageTable>
      <el-dialog append-to-body v-draggable title="查看详情" :visible.sync="currentInfo.show" width="800px">
        <LogsServInfo v-if="currentInfo.show" :uuid="currentInfo.uuid" :error="currentInfo.error"></LogsServInfo>
      </el-dialog>
      <el-dialog append-to-body v-draggable title="查看数据" :visible.sync="editor.datashow" width="800px">
        <LogsOperData :uuid="editor.uuid" :flag="2"></LogsOperData>
      </el-dialog>
      <el-dialog append-to-body v-draggable title="查看SQL" width="800px" :visible.sync="editor.sqlshow">
        <LogsSqlData :seuuid="editor.seuuid">
        </LogsSqlData>
      </el-dialog>
      <el-dialog append-to-body v-draggable title="查看堆栈信息" :visible.sync="editor.stakshow" width="800px">
        <template>
          <el-input v-if="stakinfo" type="textarea" :rows="25" v-model="stakinfo" readonly></el-input>
          <h1 v-if="!stakinfo" style="text-align: center;font-size: 6px;height: 300px;line-height: 300px;">暂无数据</h1>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import LogsServInfo from "./LogsServInfo";
import LogsOperData from "./LogsOperData";
import LogsSqlData from "./LogsSqlData";
import ServAPI from "@/api/base/logs/LogsServ";
import { debug } from "util";

export default {
  components: { LogsOperData, LogsSqlData, LogsServInfo },
  props: {
    uuid: {
      type: String
    },
    sesId: {
      type: String
    }
  },
  data() {
    return {
      stakinfo: "",
      queryform: {
        svrIp: "",
        respCode: "",
        servSta: "",
        sesId: "",
        operuuid: "",
        respcode: ""
      },
      sql: "",
      table: {
        data: []
      },
      //详细信息dialog
      currentInfo: {
        loading: false,
        show: false,
        uuid: "",
        error: {}
      },
      editor: {
        uuid: null,
        seuuid: null,
        datashow: false,
        sqlshow: false,
        stakshow: false,
        visible: false, //  编辑器-显示
        loading: true
      },
      resp: [
        {
          key: "1",
          label: "成功"
        },
        {
          key: "2",
          label: "失败"
        }
      ],
      respcode: [
        {
          code: "000000",
          label: "请求处理成功"
        },
        {
          code: "000100",
          label: "用户会话超时"
        },
        {
          code: "000200",
          label: "安全服务错误"
        },
        {
          code: "000300",
          label: "校验服务错误"
        },
        {
          code: "000400",
          label: "系统后台错误"
        },
        {
          code: "000500",
          label: "网络服务错误"
        }
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      //加载页面取得opuuid，如果有的话
      this.getOpUuid();
      this.queryData();
    });
  },
  methods: {
    respcodeFormatter(row, column, cellValue) {
      return cellValue
        ? this.respcode.filter(v => v.code === cellValue)[0].label
        : "未知错误";
    },
    //查看详情
    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;
    },
    queryData() {
      if (this.queryform.servEnd < this.queryform.servSta) {
        this.$message.error("开始时间不能大于结束时间");
        return;
      }
      this.$refs.dataTable.load(this.queryform);
    },
    resetquery() {
      this.$refs.queryform.resetFields();
      this.queryform.respcode = "";
    },
    dataTableLoad(params, resolve) {
      ServAPI.queryLogsServ(params)
        .then(resolve) //  让表格解析你提供的数据 (主要解析页码等)
        .then(respData => {
          this.table.data = respData.datarows;
        }); // 本地也记录一下数据 (提供给表示显示的数据)
    },
    //取得交互日志传来的uuid
    getOpUuid() {
      this.queryform.operuuid = this.uuid;
      this.queryform.sesId = this.sesId;
    }
  }
};
</script>
