<template>
  <div class="page-container algorithmLogsInfoPage">
    <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 class="left-content-box scrollbar-box">
        <div>
          <p>实验室：</p>
          <p>{{pageData.subName}}</p>
        </div>
        <div>
          <p>业务id：</p>
          <p>{{pageData.extraId}}</p>
        </div>
        <div>
          <p>算法ID：</p>
          <p>{{pageData.respCode}}</p>
        </div>
        <div>
          <p>算法名称：</p>
          <p>{{pageData.checkName}}</p>
        </div>
        <div>
          <p>识别类型：</p>
          <p>{{pageData.algorithmType=='image'?'图片':'视频'}}</p>
        </div>
        <div>
          <p>请求时间：</p>
          <p>{{ parseTime(pageData.createTime,"{y}-{m}-{d} {h}:{i}:{s}") }}</p>
        </div>
        <div>
          <p>响应时间：</p>
          <p>{{ parseTime(pageData.updateTime,"{y}-{m}-{d} {h}:{i}:{s}") }}</p>
        </div>
        <div>
          <p>请求耗时：</p>
          <p>{{pageData.costTime}}ms</p>
        </div>
        <div>
          <p>处理状态：</p>
          <p>{{pageData.state?'已处理':'未处理'}}</p>
        </div>
        <div>
          <p>是否通过：</p>
          <p>{{pageData.isPass?'通过':'未通过'}}</p>
        </div>
        <div class="copy-box">
          <p>响应参数：</p>
          <el-input
            style="width:700px;"
            type="textarea"
            disabled
            resize="none"
            :autosize="{ minRows: 10, maxRows: 10}"
            placeholder="请输入内容"
            v-model="pageData.respData">
          </el-input>
          <p class="el-icon-document-copy copy-p clickCopy"
             @click="clickCopy(pageData.respData,'响应参数')"></p>
        </div>
      </div>
      <div class="right-content-box scrollbar-box">
        <div>
          <p>原文件</p>
          <img v-if="pageData.originalFile" :src="pageData.originalFile" @click="fullScreenViewClick(pageData.originalFile)">
        </div>
        <div>
          <p>识别结果</p>
          <img v-if="pageData.checkResult" :src="pageData.checkResult" @click="fullScreenViewClick(pageData.checkResult)">
        </div>
      </div>
    </div>
    <!--全屏图片预览-->
    <fullScreenView :fullScreenViewProps="fullScreenViewProps" ref="fullScreenView"></fullScreenView>
  </div>
</template>

<script>
  //js&css&html美化
  import beautify from "js-beautify";
  import fullScreenView from "@/components/fullScreenView/fullScreenView.vue";

  export default {
    name: 'algorithmLogsInfoPage',
    components: {
      fullScreenView,
    },
    props:{
      propsData:{},
    },
    data(){
      return{
        pageData:{},
        fullScreenViewProps:[],
      }
    },
    created(){},
    mounted(){
      this.initialize();
    },
    methods:{
      initialize(){
        let obj = JSON.parse(JSON.stringify(this.propsData))
        let respData = obj.respData//此变量为要转换的代码片段
        respData = beautify(respData, {
          indent_size: 2,//缩进两个空格
          space_in_empty_paren: true,
        });
        this.$set(obj,'respData',respData);
        this.$set(this,'pageData',obj);
      },
      backPage(){
        this.$parent.goPage(1);
      },
      fullScreenViewClick(url){
        this.$set(this,'fullScreenViewProps',[url]);
        this.$refs['fullScreenView'].initialize();
      },
    },
  }
</script>

<style scoped lang="scss">
  .algorithmLogsInfoPage{
    .content-box{
      flex:1;
      display: flex;
      overflow: hidden;
      padding:20px;
      .left-content-box{
        flex:1;
        margin-top: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;
        }
      }
      .right-content-box{
        width:600px;
        overflow-x: hidden;
        div{
          width:580px;
          height:370px;
          margin:0 0 10px 10px;
          border:1px solid #dedede;
          border-radius:4px;
          box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
          p{
            margin:10px 10px 0;
            border-bottom:1px solid #dedede;
            color:#333;
            line-height:28px;
            font-size:14px;
          }
          img{
            cursor: pointer;
            width:560px;
            height:310px;
            margin:10px;
          }
        }
      }
    }

  }
</style>
