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

<script>
import { addContrast } from './mixins'
import { commonMixins } from "./mixins"
import { patentKeywordsHighlight } from "@/views/components/common/mixins";
export default {
  mixins: [addContrast,commonMixins,patentKeywordsHighlight],
  data() {
    return {
      height: 0,
      fullHeight: document.documentElement.clientHeight,
    }
  },
  watch: {
    fullHeight() {
      this.refresh()
    },
  },
  created() {
    window.addEventListener('resize', this.handleResize)
  },
  mounted() {
    this.handleResize()
  },
  methods: {
    handleResize(event) {
      this.fullHeight = document.documentElement.clientHeight
      this.height = this.fullHeight - 250
    },
  }
}
</script>

<style lang="scss">
.patent-instruction {
  margin-bottom: 20px;
  .common {
    white-space: pre-line;
    font-size: 14px;
    margin-top: 0;
    padding-right: 5px;
    word-break: break-all;
  }
}
</style>