<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="{sesId:sesId,actsta:defaultDate}"
               :queryFormLabelPosition="'top'"
               :allowAdd="false"
               :allowEdit="false"
               :allowDelete="false"
               :allowRefresh="false"
               fullHeight
               autoLoad>


      <!-- 查询条件区域 -->
      <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>
      </template>

      <!-- 表格列区域 -->
      <template slot="table-columns">
        <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="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.actend - row.actsta}}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='200' align='center' fixed='right'>
          <template slot-scope="scope">
            <el-button class="blue" @click="showInfo(scope.row)" icon="el-icon-fa-eye">查看</el-button>
            <!-- <el-button class="blue" @click="showServ(scope.row.uuid)" icon="el-icon-fa-bookmark-o" title="查看服务"></el-button> -->
            <el-button class="blue" v-if="scope.row.dataflag" @click="showData(scope.row.uuid)" icon="el-icon-fa-search">数据
            </el-button>
            <el-button class="blue" v-if='scope.row.stakinfo' @click="showStak(scope.row.stakinfo)" icon="el-icon-fa-book">堆栈信息
            </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">
      <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 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
        },
        defaultDate:[(new Date().valueOf() - 60 * 60 * 1000),(new Date())]
      };
    },
    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);
        }
      },
      //查看详情
      showInfo(row) {
        this.currentInfo.uuid = row.uuid;
        this.currentInfo.visible = true;
      },
    }
  };
</script>
