<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>
        <div v-html="getViewDom(patent.publicFullText, '说明书文本' + tabItem.label, tabItem.field)" :style="setStyle()"
          :data-type="'说明书文本' + tabItem.label"></div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { patentDetails } from './mixins';
export default {
  mixins: [patentDetails],
  data() {
    return {
      height: null,
      fullHeight: document.documentElement.clientHeight,
      tabs: [
        {
          label: '原文',
          name: '0',
          field: 'manual'
        },
        {
          label: '译文',
          name: '1',
          field: 'manualOut'
        },
      ],
      tabItem: {
        label: '原文',
        name: '0',
        field: 'manual'
      },
    }
  },
  watch: {
    // fullHeight() {
    //   this.refresh()
    // },
    patentNo() {
      this.showTabs()
      if (this.outside) {
        this.getData()
      }
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize)
  },
  mounted() {
    this.showTabs()
    this.handleResize()
    if (this.outside) {
      this.getData()
    }
  },
  methods: {
    showTabs(){
      if(!this.haveTranslatedText(this.patent,'publicFullText') || this.outside){
        this.tabs = [
          {
            label:'原文',
            name:'0',
            field:'manual',
            icon:'el-icon-refresh',
            value:'2'
          },
        ]
      }else{
        this.tabs = [
          {
            label:'原文',
            name:'0',
            field:'manual',
            icon:'el-icon-refresh',
            value:'2'
          },
          {
            label:'译文',
            name:'1',
            field:'manualOut'
          },
        ]
      }
    },
    handleClick() {
      this.tabItem = this.tabs.find(item => {
        return item.name == this.name
      })
    },
    getData() {
      if(this.patent.publicFullText && this.patent.publicFullText.length>0){
        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)
          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;
  }
}
</style>