<template>
  <div class="page-container systemLogsInfoPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">详情</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
    </div>
    <div class="content-box scrollbar-box">
      <div>
        <p>日志标题：</p>
        <p>{{pageData.title}}</p>
      </div>
      <div>
        <p>操作类型：</p>
        <p>{{pageData.businessType}}</p>
      </div>
      <div>
        <p>操作人：</p>
        <p>{{pageData.operator}}</p>
      </div>
      <div>
        <p>请求IP：</p>
        <p>{{pageData.ipAddr}}</p>
      </div>
      <div>
        <p>用户代理：</p>
        <p>{{pageData.userAgent}}</p>
      </div>
      <div>
        <p>请求方式：</p>
        <p>{{pageData.reqMethod}}</p>
      </div>
      <div>
        <p>请求接口：</p>
        <p>{{pageData.reqUri}}</p>
      </div>
      <div>
        <p>请求时间：</p>
        <p>{{pageData.reqTime}}</p>
      </div>
      <div>
        <p>响应时间：</p>
        <p>{{pageData.respTime}}</p>
      </div>
      <div>
        <p>接口耗时：</p>
        <p>{{pageData.logType}}ms</p>
      </div>
      <div>
        <p>请求状态： </p>
        <p>{{pageData.state?'成功':'失败'}}</p>
      </div>
      <div class="copy-box"
           v-if="pageData.reqBody">
        <p>请求参数：</p>
        <el-input
          style="width:700px;"
          type="textarea"
          disabled
          resize="none"
          :autosize="{ minRows: 10, maxRows: 10}"
          placeholder="请输入内容"
          v-model="pageData.reqBody">
        </el-input>
        <p class="el-icon-document-copy copy-p clickCopy"
           @click="clickCopy(pageData.reqBody,'请求参数')"></p>
      </div>
      <div class="copy-box"
           v-if="pageData.exception">
        <p>异常信息：</p>
        <el-input
          style="width:700px;"
          type="textarea"
          disabled
          resize="none"
          :autosize="{ minRows: 10, maxRows: 10}"
          placeholder="请输入内容"
          v-model="pageData.exception">
        </el-input>
        <p class="el-icon-document-copy copy-p clickCopy"
           @click="clickCopy(pageData.exception,'异常信息')"></p>
      </div>
    </div>
  </div>
</template>

<script>
  //js&css&html美化
  import beautify from "js-beautify";
  export default {
    name: 'systemLogsInfoPage',
    props:{
      propsData:{},
    },
    data(){
      return{
        pageData:{},
      }
    },
    created(){},
    mounted(){
      this.initialize();
    },
    methods:{
      initialize(){
        let obj = JSON.parse(JSON.stringify(this.propsData))
        let reqBody = obj.reqBody//此变量为要转换的代码片段
        reqBody = beautify(reqBody, {
          indent_size: 2,//缩进两个空格
          space_in_empty_paren: true,
        });
        let exception = obj.exception//此变量为要转换的代码片段
        exception = beautify(exception, {
          indent_size: 2,//缩进两个空格
          space_in_empty_paren: true,
        });
        this.$set(obj,'reqBody',reqBody);
        this.$set(obj,'exception',exception);
        this.$set(this,'pageData',obj);
      },
      backPage(){
        this.$parent.goPage(1);
      },
    },
  }
</script>

<style scoped lang="scss">
  .systemLogsInfoPage{
    .content-box{
      padding:20px;
      div{
        display: flex;
        p{
          font-size:16px;
          line-height:20px;
          padding:10px 0;
        }
        p:nth-child(1){
          width:140px;
          text-align: right;
        }
        p:nth-child(2){
          display: block;
          word-wrap: break-word;
        }
      }
      .copy-box{
        margin-bottom:20px;
        position:relative;
        .copy-p{
          position: absolute;
          top:20px;
          left:800px;
          color:#999;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          padding:0;
          font-size:20px;
        }
      }
      ::v-deep .el-textarea.is-disabled .el-textarea__inner{
        padding:10px;
        color:#333;
        background-color: #fff;
        cursor: auto;
      }
    }
  }
</style>
