<template>
    <div>
        <div class="patent-articles" >
            <el-container v-loading="loading">
                <el-container >
                    <el-header class="patent-articles-title">
                        <div class="patent-articles-title-box">
                            <div style="position:relative">
                                <img src="@/assets/visual/fixed.png" width="20px" height="20px" v-if="fix===true" @click="qx" style="position:absolute;top:5px;left:5px"/>
                                <img src="@/assets/visual/unfixed.png" width="20px" height="20px" v-if="fix===false"  @click="gd" style="position:absolute;top:5px;left:5px"/>
                                <div>
                                    <span v-html="getViewDom(patent.patentNo)"></span>
                                    <el-tag type="primary" effect="dark" size="mini" class="margin-left_10" v-if=" patent.simpleStatus">{{ patent.simpleStatus }}</el-tag>
                                </div>
                                <div style="color: #6b6868; font-size: 15px;border-bottom: 1px solid #e6e6e6;padding-bottom: 5px;">
                                    <span v-html="getViewDom2(patent, 'name')"></span>
                                    <el-link v-if="projectId" type="primary" @click.native="handleChange(patent, 'name')" style="margin-left: 10px;margin-top: -3px;">
                                        <span v-if="!patent.change">切换译文</span>
                                        <span v-else>切换原文</span>
                                    </el-link>
                                </div>
                                <div style="position: absolute;right: 0;top:0;">
                                  <PatentMark :patentNo="patent.patentNo" @biaozhu="getBiaoZhu"></PatentMark>
                                </div>
                            </div>
                            <div  style="  position: relative;">
                                <el-link v-for="item in menuList" :type="activeMenu === item.value ? 'primary' : undefined" v-if="!item.show" @click.native="handleSelect(item.value)">
                                {{ item.label }}
                                <!-- <span v-if="item.value == 'PatentImage'|| item.value=='PatentPDF'" @click.stop="ending(item.value)">
                                    <el-popover
                                        placement="right"
                                        width="400"
                                        trigger="click">
                                        <el-radio v-for="(item, index) in positionList" :key="index" v-model="radio" @input="changePosition"  :label="item.value">{{item.label}}</el-radio>
                                        <i class="el-icon-setting" slot="reference"></i>
                                    </el-popover>
                                    </span> -->
                                </el-link>
                            </div>
                            
                        </div>
                    </el-header>
                    <el-main class="patent-articles-content" style="padding-left:30px">
                        <div class="patent-articles-content-left">
                            <!-- <div class="dom1 box1" v-dragControllerDiv1 style="display:flex;width:100%">
                                <div class="component left1" style="width:100%;overflow-y:auto;overflow-x: hidden;" :style="{height:height}"> -->
                                    <component style="width:100%;overflow-y:auto;overflow-x: hidden;" :style="{height:height}" :is="componentName" :patent="patent" :patentNo="[patent.patentNo]" :domId="patent.patentNo + '1'"  :pdfType1="(patent.pdf && patent.pdf.length>0)?patent.pdf[0].type:2" @refresh="getPatent(applicationNo)"></component>
                                <!-- </div> -->
                                <!-- <div class="resize2" title="收缩侧边栏" v-show="(radio == 2 || radio == 3) && activeMenu != activeMenu2"><p><span>˙</span><span>˙</span><span>˙</span></p></div>
                                <div class="resize1" title="收缩侧边栏" v-show="(radio == 4 || radio == 5) && activeMenu != activeMenu2"><span>⋮</span></div>
                                <div v-show="radio != 1 && activeMenu != activeMenu2" class="mid1" :style="{height:(radio == 4 || radio == 5)?height:'280px'}" style="width:450px;height:280px;border:1px solid #E4E7ED;overflow-y:auto;overflow-x: hidden;">
                                    <component :is="activeMenu2" :patent="patent" :patent-id="patentId" :pdfType1="(patent.pdf && patent.pdf.length>0)?patent.pdf[0].type:2" :sign="true"></component>
                                </div> -->
                            <!-- </div> -->
                        </div>
                    </el-main>
                </el-container>
            </el-container>
            <div class="content-main" style="padding-left:40px"></div>
        </div>
    </div>
</template>

<script>
import { changeTranslation, patentKeywordsHighlight } from '@/views/workspace/folder/components/mixins'

import PatentField from '@/views/workspace/folder/articles/components/PatentField'
import PatentAnnotation from '@/views/workspace/folder/articles/components/PatentAnnotation'
import PatentBasic from "@/views/workspace/folder/articles/components/PatentBasic"
import PatentPDF from "@/views/workspace/folder/articles/components/PatentPDF"
import PatentImage from "@/views/workspace/folder/articles/components/PatentImage"
import PatentRight from "@/views/workspace/folder/articles/components/PatentRight"
import PatentInstruction from "@/views/workspace/folder/articles/components/PatentInstruction"
import PatentFamily from "@/views/workspace/folder/articles/components/PatentFamily"
import PatentStatus from "@/views/workspace/folder/articles/components/PatentStatus"

import PatentMark from '@/views/workspace/folder/articles/components/PatentMark.vue'

export default {
  components: {
    PatentField,
    PatentAnnotation,
    PatentBasic,
    PatentPDF,
    PatentImage,
    PatentRight,
    PatentFamily,
    PatentStatus,
    PatentInstruction,
    PatentMark
  },
  props: ['applicationNo','projectId'],
  mixins: [patentKeywordsHighlight, changeTranslation],
  data() {
    return {
        radio:1,
        height:null,
        loading:false,
        fix:false,
        activeMenu: 'PatentBasic',
        activeMenu2:'',
        componentName: 'PatentBasic',
        menuList: [
            {
                value: 'PatentBasic',
                label: '基础信息'
            },
            {
                value: 'PatentRight',
                label: '权利要求',
                show:this.$s.getSession('params').params.DBType == 'WD'?true:false
            },
            {
                value: 'PatentImage' ,
                label:'附图'
            },
            {
                value: 'PatentInstruction',
                label: '说明书文本',
                show:this.$s.getSession('params').params.DBType == 'WD'?true:false
            },
            {
                value: 'PatentFamily',
                label: '同族专利'
            },
            {
                value: 'PatentStatus',
                label: '事务数据',
                show:this.$s.getSession('params').params.DBType == 'WD'?true:false
            },
            {
                value: 'PatentPDF',
                label: '说明书'
            },
        ],
        positionList:[
            {
                label:'tab展示',
                value:1
            },
            {
                label:'上边展示',
                value:2
            },
            {
                label:'下边展示',
                value:3
            },
            {
                label:'左边展示',
                value:4
            },
            {
                label:'右边展示',
                value:5
            },
        ],
        patent:{},
    };
  },
  watch: {
    applicationNo(val){
        if(this.fix!=true){
          this.getPatent(val)
        }
    },
    fix(val){
        this.$emit('on-change',val)
    },
  },
  computed: {},
  created() {},
  async mounted() {
   await this.getPatent(this.applicationNo)
   this.changePageTitle()
   this.$nextTick(()=>{
        this.$set(this,'height',document.getElementsByClassName('el-main')[0].offsetHeight-200  + 'px')
     })
  },
  methods: {
     //修改title
     changePageTitle() {
      document.title = `${this.patent.patentNo} ${this.patent.name || ''}`
    },
    //获取需要跳转的批注
    getBiaoZhu(val) {
      if (val.scratchField.indexOf('摘要')!=-1) {
        this.activeMenu = 'PatentBasic'
      } else { 
        this.activeMenu = this.menuList.find(item => {
          return val.scratchField.indexOf(item.label)!=-1
        }).value
          if (val.scratchField.indexOf('译文') !=-1) {
          this.activeName = '1'
          } else {
            this.activeName='0'
          }
      }
      this.handleSelect(this.activeMenu)
      
        this.tiaozhuan(val.id,val)
    },
    //跳转到指定位置
    tiaozhuan(id) {
      const href = `#${id}`
      const anchor = document.createElement('a');
      anchor.href = href;
      anchor.style.display = "none";
      document.body.appendChild(anchor);
      // 找不到此节点就每隔一段时间再去找，直到找到该节点
      var timer = setInterval(() => {
        var dom = document.getElementById(`${id}`)
        if (dom) {
          clearInterval(timer)
          anchor.click();
          document.body.removeChild(anchor);
        }
      }, 66)
      return true;
    },
    //解除定住，可以切换
    qx(){
      this.fix=false
    },
    //定住不能切换
    gd(){
      this.fix=true
    },
    //切换显示内容
    handleSelect(index) {
    //   if(index == this.activeMenu2){
    //     this.activeMenu2 = ''
    //     this.radio = 1
    //     this.changePosition(this.radio)
    //   }
      this.activeMenu = index
      this.componentName = index
    },
    //获取专利信息
    async getPatent(applicationNo){
        var params =this.$s.getSession('params').params
        params.CurrentQuery = "(AN="+ applicationNo +")"
        params.PageNum = 1
        // params.retrieveRecordId = null
        this.loading = true
       await this.$api.patentSelectImport(params).then(response=>{
          if(response.code == 200){
            this.patent = response.data.records[0]
            this.loading = false
          }
        }).catch(error=>{
          this.loading = false
        })
    },
  },
};
</script>
<style lang="scss" scoped>
.patent-articles {
  width: 100%;
  height: 100% !important;
  padding: 0 !important;
  .patent-articles-menu {

  }
  .el-menu-item.is-active {
    background: #ecf5ff !important;
    color: #409EFF!important;
  }
  .patent-articles-title {
    padding: 0 !important;
    height: 100px !important;
    .el-link {
      margin-right: 20px;
    }
    .patent-articles-title-box {
      font-size: 20px;
      width: 100%;
      text-align: center;
    }
  }
  .patent-articles-content {
    background: #fff;
    padding: 0;
    height: 100%;
    overflow: hidden;
    .patent-articles-content-left {
        width:100%;
      float: left;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 10px;
    }
    .patent-articles-content-right {
      width: 300px;
      border-left: 1px solid #e6e6e6;
      float: right;
      height: 100%;
      .el-header {
        height: 50px !important;
        position: relative !important;
      }
      .el-main {
        padding: 0 12px !important;
      }
      .el-container, .el-main {
        height: 100%;
      }
      .patent-articles-option {
        position: absolute;
        bottom: 0;
        height: 100%;
        left: 50px;
        .el-tabs {
          margin-top: 9px;
        }
        .el-tabs__header {
          margin-bottom: 0 !important;
        }
      }
    }
  }
}
</style>