<template>
  <div class="patent-instruction height_100" @mouseup="mouseup">
    <el-container>
      <el-header class="basic_header">
        <el-tabs v-model="name" @tab-click="handleClick" style="width:100%">
          <el-tab-pane v-for="item in tabs" :key="item.label" :label="item.label" :name="item.name">
            <span slot="label">
              <span>{{ item.label }}</span>
              <span v-if="item.icon && !outside" class="margin-left_10">
                <i :class="item.icon" @click.stop="exportData(item.value)"></i>
              </span>
            </span>
          </el-tab-pane>
        </el-tabs>
      </el-header>
      <el-main style="overflow: auto;" ref="content">
        <div class="height_100" v-loading="loading"  :style="setStyle()" >
          <template v-if="name != 2">
            <div  class="height_100" v-html="getContentOrContentOut(this.patent.pdfTranslate, tabItem.field,name == 2?'说明书原文':'说明书'+tabItem.label,'instruction')" :data-type="name == 2?'说明书原文':'说明书'+tabItem.label" ></div>
          </template>
          <template v-else>
            <div class="height_100 claim">
              <div v-equal_heights="'yiwen'" class="height_100" v-html="getContentOrContentOut(this.patent.pdfTranslate,  tabItem.field,name == 2?'说明书原文':'说明书'+tabItem.label,'instruction')" :data-type="name == 2?'说明书原文':'说明书'+tabItem.label" ref="yuanwen"></div>
              <div class="height_100" v-html="getContentOrContentOut(this.patent.pdfTranslate,  'contentOut','说明书译文','instruction')" :data-type="'说明书译文'" ref="yiwen"></div> 
            </div>
            
          </template>
          
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { patentDetails } from './mixins';
import {translate} from './mixins/translate'
export default {
  mixins: [patentDetails,translate],
  data() {
    return {
      height: null,
      fullHeight: document.documentElement.clientHeight,
      patentField:4
    }
  },
  watch: {
    // fullHeight() {
    //   this.refresh()
    // },
    patentNo() {
      this.showTabs()
      this.initData()
      this.scrollToTop()
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize)
  },
  mounted() {
    this.handleResize()
    this.initData()
  },
  methods: {
    scrollToTop(){
      this.$nextTick(()=>{
        var dom = this.$refs.content.$el
        dom.scrollTo({
          top:0,
          behavior: "instant"
        })
      })
      
    },
    initData(sign = false){
      if (this.outside) {
        this.getData()
        return
      }
      if(sign){
        this.patent.pdfTranslate = null
      }
      if(!this.patent.pdfTranslate || !this.patent.pdfTranslate.data || this.patent.pdfTranslate.data.length == 0){
            var params = {
              patentNo:this.patent.patentNo,
              patentField:this.patentField
            }
            this.loading = true
            this.$api.getTranslate(params).then(res=>{
              if(res.code == 200){
                this.loading = false
                this.getDataSign = true
                var data = res.data
                this.$set(this.patent, "pdfTranslate", { 
                  data :data
                });
              }
            }).catch(error=>{
              this.loading = false
            })
          }
    },
    getData(sign) {
      if(sign){
        this.patent.pdfTranslate = null
      }
      if(this.patent.pdfTranslate){
        return false
      }
      var params = {
        patentCell: 2,
        patentNo: this.patent.publicNo,
        appNo: this.patent.rowApplicationNo,
      }
      this.loading = true
      this.$api.getCnFullText(params).then(response => {
        if (response.code == 200) {
          // this.$set(this.patent, 'publicFullText', response.data)
          var data = []
              response.data.forEach(item=>{
                var obj = {
                  originalContent:item.text_content.replace(/(\r\n)+/g,'<br/>').replace(/(\t)+/g,'<br/>')
                }    
                data.push(obj)
              })
              this.$set(this.patent, "pdfTranslate", {
                data:data
              });
          this.loading = false
        }
      }).catch(error=>{
        this.loading = false
      })
    },
    handleResize(event) {
      this.fullHeight = document.documentElement.clientHeight
      this.height = this.fullHeight - 300
    },
  }
}
</script>

<style lang="scss">
.patent-instruction {
  margin-bottom: 20px;

  .common {
    overflow-y: auto;
    white-space: pre-line;
    font-size: 14px;
    margin-top: 0;
    padding-right: 5px;
    word-break: break-all;
  }
}
.highlightText{
  background: #c7ebaa !important;
}
</style>
<style lang="scss" scoped>

.claim{
  display: flex;
  &>div{
    width: 100%;
    // overflow: auto;
    padding: 0 5px;
  }
  
}


</style>