<!-- 交互日志管理页面 -->
<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="authappldate">
              <el-date-picker v-model="queryform.actSta" type="datetime" placeholder="选择开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="结束时间" prop="authappldate">
              <el-date-picker v-model="queryform.actEnd" type="datetime" placeholder="选择结束时间">
              </el-date-picker>
            </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="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="reqIp">
              <el-input v-model="queryform.reqIp"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="操作描述" prop="actDesc">
              <el-input v-model="queryform.actDesc"></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="respcode">
              <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-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="userid" label="登录账号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="username" label="用户名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="uuid" label="交互标识" width="250px" 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="250px" 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 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="showServ(scope.row.uuid)" icon="el-icon-fa-bookmark-o" title="查看服务"></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-card>
    <el-dialog append-to-body v-draggable title="查看详情" :visible.sync="currentInfo.visible" width="800px">
      <LogsOperInfo v-loading="currentInfo.loading" v-if="currentInfo.visible" :uuid="currentInfo.uuid" :error="currentInfo.error" />
    </el-dialog>
    <el-dialog append-to-body v-draggable title="查看数据" :visible.sync="editor.datashow" width="800px">
      <LogsOperData v-loading="editor.loading" v-if="editor.datashow" :uuid="editor.uuid" :flag="1"></LogsOperData>
    </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>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import LogsOperInfo from "./LogsOperInfo";
import LogsOperData from "./LogsOperData";
import OperAPI from "@/api/base/logs/LogsOper";

export default {
  components: { LogsOperData, LogsOperInfo },
  props: {
    sesId: {
      type: String
    }
  },
  data() {
    return {
      stakinfo: "",
      queryform: {
        userId: "",
        svrIp: "",
        reqIp: "",
        actDesc: "",
        sesId: "",
        actSta: "",
        actEnd: "",
        respcode: ""
      },
      RESPCODE: [
        {
          key: "1",
          label: "成功"
        },
        {
          key: "2",
          label: "失败"
        }
      ],
      //详细信息dialog
      currentInfo: {
        loading: false,
        visible: false,
        uuid: "",
        error: {}
      },
      table: {
        data: []
      },
      editor: {
        uuid: null,
        datashow: false,
        stakshow: false,
        visible: false, //  编辑器-显示
        loading: false
      },
      respcode: [
        {
          code: "000000",
          label: "请求处理成功"
        },
        {
          code: "000100",
          label: "用户会话超时"
        },
        {
          code: "000200",
          label: "安全服务错误"
        },
        {
          code: "000300",
          label: "校验服务错误"
        },
        {
          code: "000400",
          label: "系统后台错误"
        },
        {
          code: "000500",
          label: "网络服务错误"
        }
      ],
      acttype: [
        {
          code: "1",
          label: "HTTP"
        },
        {
          code: "2",
          label: "MQ"
        }
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      //加载页面取得sesid，如果有的话
      this.createdGetSesId();
      this.queryData();
    });
  },
  methods: {
    //  打开画面
    showStak(stakinfo) {
      this.editor.stakshow = true;
      this.stakinfo = stakinfo;
    },
    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);
      }
    },
    respcodeFormatter(row, column, cellValue) {
      return cellValue
        ? this.respcode.filter(v => v.code === cellValue)[0].label
        : "未知错误";
    },
    acttypeFormatter(data) {
      let cd = this.acttype.filter(v => v.code === data.acttype);
      return cd ? cd[0].label : "无请求类型";
    },
    //查看详情
    showInfo(row) {
      this.currentInfo.uuid = row.uuid;
      this.currentInfo.visible = true;
    },
    //加载form数据
    queryData() {
      if (this.queryform.actEnd < this.queryform.actSta) {
        this.$message.error("开始时间不能大于结束时间");
        return;
      }
      this.$refs.dataTable.load(this.queryform);
    },
    //reset
    resetquery() {
      this.$refs.queryform.resetFields();
      this.queryform.actSta = "";
      this.queryform.actEnd = "";
      this.queryform.respcode = "";
    },
    dataTableLoad(params, resolve) {
      OperAPI.queryLogsOper(params)
        .then(resolve) //  让表格解析你提供的数据 (主要解析页码等)
        .then(respData => (this.table.data = respData.datarows)); // 本地也记录一下数据 (提供给表示显示的数据)
    },
    format: function(row, column) {
      var acttype = row[column.property];
      if (acttype === undefined) {
        return "";
      } else {
        if (acttype === "1") {
          return "HTTP协议";
        } else {
          return "错误数据";
        }
      }
    },
    createdGetSesId() {
      this.queryform.sesId = this.sesId;
    }
  }
};
</script>
