xiaoshi_system/src/views/project/patentDetails/components/patentMessage/mixins/translate.js

export const translate = {
    data() {
        return {
            tabs:[
                {
                  label:'原文',
                  name:'0',
                  field:'content'
                },
                {
                  label:'译文',
                  name:'1',
                  field:'contentOut'
                },
                {
                  label:'双语',
                  name:'2',
                  field:'content'
                },
            ],
            tabItem:{
                label:'原文',
                name:'0',
                field:'content'
            },
            getDataSign:true
        }
    },
    mounted() {
        this.showTabs()
    },
    methods: {
        showTabs(){
            if(this.outside || this.patent.appCountry == 'CN' || (this.patent.appNo && this.patent.appNo.substring(0,2)== 'CN')){
              this.tabs = [
                {
                  label:'原文',
                  name:'0',
                  field:'content',
                  icon:'el-icon-refresh',
                  value:'3'
                },
              ]
              this.$set(this,'name','0')
              this.tabItem={
                label:'原文',
                name:'0',
                field:'content'
              }
            }
            else{
              this.tabs = [
                {
                  label:'原文',
                  name:'0',
                  field:'content',
                  icon:'el-icon-refresh',
                  value:'3'
                },
                {
                  label:'译文',
                  name:'1',
                  field:'contentOut'
                },
                {
                  label:'双语',
                  name:'2',
                  field:'content'
                },
              ]
            }
          },
        to(scrollTop,ref='yiwen',activeIndex){
            var dom2 = this.$refs[ref]
            dom2.scrollTo(
              {
                behavior: "smooth",
                top:scrollTop
              }
            )
            //方案三
            // dom2.children[activeIndex].scrollIntoView(
            //   {
            //     behavior: "smooth",
            //     block:'center'
            //     // block:'nearest'
            //   }
            // )
            if(activeIndex || activeIndex == 0){
              this.heightLight(activeIndex)
            }
             
          },
          heightLight(activeIndex){
            var dom2 = this.$refs.yiwen
            var dom1 = this.$refs.yuanwen
            for (let i = 0; i < dom1.children.length; i++) {  
                if (i == activeIndex) {  
                  dom1.children[i].classList.add('highlightText');  
                  dom2.children[i].classList.add('highlightText');  
                } else {  
                  // 清除之前的高亮  
                  dom1.children[i].classList.remove('highlightText');  
                  dom2.children[i].classList.remove('highlightText');  
                }  
              }
              
          },
          clickDom(e,ref){
            var index = e.target.dataset.index
            // var ref1 = 'yiwen'
            // if(ref=='yiwen'){
            //   ref1 = 'yuanwen'
            // }
            // var scrollTop = this.$refs[ref].scrollTop
            // this.to(scrollTop,ref1,index) 
            this.heightLight(index)
          },
          handleClick(tab, event) {
            this.tabItem  = this.tabs.find(item=>{
              return item.name == this.name
            })
            
            if(this.name == 2 ){
                if((this.patentField == 3 && !this.checkedRightTree) || this.patentField == 4){
                    this.$nextTick(()=>{
                        var dom1 = this.$refs.yuanwen
                        var dom2 = this.$refs.yiwen
                        dom1.addEventListener('click',(e)=>this.clickDom(e,'yuanwen'))
                        dom2.addEventListener('click',(e)=>this.clickDom(e,'yiwen'))
                    })
                }
            }else{
              var dom1 = this.$refs.yuanwen
              var dom2 = this.$refs.yiwen
              if(dom2){
                dom2.removeEventListener('click',(e)=>this.clickDom(e,'yiwen'))
              }
              if(dom1){
                dom1.removeEventListener('click',(e)=>this.clickDom(e,'yuanwen'))
              }
            }
          },
          //获取内容
          getContentOrContentOut(data,field,type){
            if(data){
                if(data[field]){
                    return this.getViewDom(data[field],type)
                }else{
                    if(field == 'content'){
                        var {text,sign} = this.dataToDom(data.data,field)
                        if(sign){
                            this.$set(data,'content',text)
                            return this.getViewDom(text,type)  
                        }
                        return text
                    }
                    if(field == 'contentOut'){
                        var contentData = data.data
                        if(contentData && contentData.length>0){
                            // var obj = contentData[0]
                            // if(obj.language && obj.language == 'CN'){
                            //     return this.getContentOrContentOut(data,'content')
                            // }
                            var {text,sign} = this.dataToDom(data.data,field)
                            if(sign){
                                this.$set(data,'contentOut',text)
                                return this.getViewDom(text,type)  
                            }
                            return text
                        }
                    }
                }
            }
          },
        //装载DOM
        dataToDom(data,field){
            var fieldKey = {
                content:'originalContent',
                contentOut:'translationContent'
            }
            field = fieldKey[field]
            var content = ''
            var sign = true
            var noTranslateData = []
            data.forEach((item,index)=>{
                content += `<div id="${field}${item.order}" data-index=${index}>`
                if(item[field]){
                    content += item[field]
                }else{
                    content += '加载中...'
                    noTranslateData.push(
                        {
                            order:item.order,
                            index:index
                        }
                    )
                    
                }
                content += '</div>'
            })
            if(noTranslateData.length>0){
                sign = false
                if(this.getDataSign){
                    this.getDataSign = false
                    noTranslateData.forEach(item=>{
                        this.getTranslateOrder(item.order,item.index,data)
                    })
                }
            }
            return {text:content,sign:sign}
        },
        //获取译文
        getTranslateOrder(order,index,data){
            var params = {
                patentNo:this.patent.patentNo,
                patentField:this.patentField,
                order:order
            }
            this.$api.getTranslateOrder(params).then(res=>{
                if(res.code == 200){
                    var translate = res.data
                    var obj = {
                        translationContent:'无译文'
                    }
                    if(translate.length>0){
                        var obj = translate[0]
                    }
                    this.$set(data[index],'translationContent',obj.translationContent)
                }
            })
        },
    },
}