<template>
  <div class="patent-instruction"  @mouseup="mouseup" @mousemove="mousemove">
    <el-tabs v-model="name" >
      <el-tab-pane label="原文" name="0" :style="{height: height + 'px',overflowY: 'auto'}">
        <p class="common"  v-html="getViewDom(patent.instruction.manual,'说明书文本原文')" data-type="说明书文本原文" :style="setStyle()"></p>
      </el-tab-pane>
      <el-tab-pane label="译文" name="1" :style="{height: height + 'px',overflowY: 'auto'}" v-if="projectId">
        <p class="common" v-html="getViewDom(patent.instruction.manualOut,'说明书文本译文')" data-type="说明书文本译文" :style="setStyle()"></p>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { commonMixins,addContrast } from "./mixins"
import { patentKeywordsHighlight,changeTranslation } from "@/views/workspace/folder/components/mixins";
export default {
  mixins: [commonMixins, patentKeywordsHighlight, changeTranslation, addContrast],
  data() {
    return {
      height: null,
      fullHeight: document.documentElement.clientHeight,
    }
  },
  watch: {
    fullHeight() {
      this.refresh()
    },
    patentNo(){
      if(!this.projectId){
        this.getData()
      }
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize)
  },
  mounted() {
    this.handleResize()
    if(!this.projectId){
      this.getData()
    }
  },
  methods: {
    getData(){
      var params = {
            patentCell:2,
            patentNo:this.patent.publicNo,
            appNo:this.patent.applicationNo,
          }
        this.$api.getPatentPart(params).then(response=>{
            if(response.code == 200){
              this.$set(this.patent,'instruction',response.data.instruction)
            }
        })
    },
    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;
  }
}
</style>