<template>
<div style="height:calc(100% - 50px)">
  <div style="background:white;display:flex; justify-content:flex-end">
    <el-dropdown size="medium" style="margin-top:20px;margin-right:20px" v-if="$permission('/workspace/createReport')">
                <el-button type="primary" size="small" >
                    创建报告<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                   <el-dropdown-menu slot="dropdown" style="margin-top:0px">
                    <!-- 遍历按钮 -->
                      <el-dropdown-item  @click.native="handleAnalyse(0)" v-if="$permission('/workspace/createReport/invalid')">无效分析</el-dropdown-item>
                      <el-dropdown-item  @click.native="handleAnalyse(1)" v-if="$permission('/workspace/createReport/invalid')">第三方意见</el-dropdown-item>
                      <el-dropdown-item  @click.native="handleAnalyse(2)" v-if="$permission('/workspace/createReport/invalid')">稳定性分析</el-dropdown-item>
                      <el-dropdown-item  @click.native="handleAnalyse(4)" v-if="$permission('/workspace/createReport/tort')">侵权分析</el-dropdown-item>
                      <el-dropdown-item  @click.native="handleAnalyse(5)" v-if="$permission('/workspace/createReport/avoidDesign')">回避设计</el-dropdown-item>
                      <el-dropdown-item  @click.native="handleAnalyse(7)" v-if="$permission('/workspace/createReport/reInvalid')">无效应对</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
     <el-popover placement="bottom" title="关键词高亮" width="320" trigger="click" style="margin-top:20px">
                <patent-keywords-highlight :project-id="projectId" />
                <el-button :disabled="!$permission('/workspace/common/highlight')" slot="reference" size="small" type="primary" class="margin-right_10">
                  高亮<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
              </el-popover>
    <el-switch
    style="margin-top:25px"
    v-model="value"
    :disabled="!$permission('/workspace/details/comparison')"
    inactive-text="对比"
    active-color="#00BFFF"
    inactive-color="#D3D3D3">
</el-switch>
   <patent-list :patent-id="patentId" :project-id="projectId" @on-change="onChange" :ban='ban'/>
  </div>       
              
  <!-- <el-button @click="two">对比</el-button> -->


  <div class="box" ref="box" v-dragControllerDiv>
    <div class="left" :style="{width:width}"><!--左侧div内容-->
      <div class="patent-articles" >
        <el-container v-loading="loading">
          <!-- <el-aside width="250px" class="patent-articles-menu">
            <el-container>
              <el-header style="height: 180px;">
                <patent-list :patent-id="patentId" :project-id="projectId" @on-change="onChange" />
              </el-header>
              <el-main>
                <patent-image v-if="patent.image" :project-id="projectId" :patent="patent" :patent-id="patentId" @refresh="getPatent(patentId)"></patent-image>
              </el-main>
            </el-container>
          </el-aside> -->
          <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&&value==true" @click="qx" style="position:absolute;top:5px;left:5px"/>
                  <img src="@/assets/visual/unfixed.png" width="20px" height="20px" v-if="fix===false&&value==true"  @click="gd" style="position:absolute;top:5px;left:5px"/>
                <!-- <div style="background-image:url('');width:20px;height:20px"></div> -->
                  <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" :disabled="(item.value === 'PatentExport' ? !$permission('/workspace/details/exportDocument'): false) ||item.value === 'PatentPDF'?!(patent.pdf && patent.pdf.length>0):false" @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>
                  <el-link v-for="item in menuList2" :type="activeMenu === item.value ? 'primary' : undefined" :disabled="item.value === 'PatentExport' ? !$permission('/workspace/details/exportDocument'): false " @click.native="handleSelect(item.value)">{{ item.label }}</el-link>
                  <el-tooltip class="item" effect="dark" :content="(showRight ? '隐藏' : '显示') + '右侧菜单'" placement="top">
                    <i :class="showRight ? 'el-icon-s-unfold' : 'el-icon-s-fold'" style="font-size: 25px;position: absolute; right: 10px; margin-top: 5px;color: #2f2f2f; cursor: pointer" @click="showRight = !showRight"></i>
                  </el-tooltip>
                </div>
              </div>
            </el-header>
            <el-main class="patent-articles-content" style="padding-left:30px">
              <div class="patent-articles-content-left" :style="{ width: showRight ? 'calc(100% - 321px)' : 'calc(100% - 21px)'}">
                <div class="dom box1" v-dragControllerDiv1 style="display:flex;width:100%">
                  <div class="component left1" style="width:100%;overflow-y:auto;overflow-x: hidden;padding-bottom:10px" :style="{height:height}">
                    <component :activeName="activeName" style="width:100%;" :is="componentName" :project-id="projectId" :patent="patent" :patentNo="[patent.patentNo]" :domId="patent.patentNo + '1'" :patent-id="patentId" :pdfType1="getPDFType()" @refresh="getPatent(patentId)"></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;margin:10px;overflow-y: auto;overflow-x: hidden;">
                    <component :is="activeMenu2" :project-id="projectId" :patent="patent" :patent-id="patentId" :pdfType1="(patent.pdf && patent.pdf.length>0)?patent.pdf[0].type:2" :sign="true"></component>
                  </div>
                </div>
              </div>
              <div class="patent-articles-content-right" v-if="showRight">
                <el-container>
                  <el-header>
                    <div class="patent-articles-option">
                      <el-tabs v-model="activeOption" type="card">
                        <el-tab-pane label="标引" name="PatentField"></el-tab-pane>
                        <!-- <el-tab-pane label="高亮" name="PatentKeywordsHighlight"></el-tab-pane> -->
                        <el-tab-pane label="注释" name="PatentAnnotation" :disabled="!($permission('/workspace/details/notes') && $r(projectId,[1,2]))"></el-tab-pane>
                      </el-tabs>
                    </div>
                  </el-header>
                  <el-main>
                    <keep-alive>
                      <component :is="activeOption" :project-id="projectId" :patentNo="patent.patentNo" :patent-id="patentId"></component>
                        <component :is="activeOption" :project-id="projectId" :patentNo="patent.patentNo" :patent-id="patentId"></component>
                    </keep-alive>
                  </el-main>
                </el-container>
              </div>
            </el-main>
          </el-container>
        </el-container>
        <div class="content-main" style="padding-left:40px"></div>
      </div>
    </div>
    <div class="resize" title="收缩侧边栏"   v-show="width!='100%'">⋮</div>
    <div class="mid" v-show="width!='100%'" :style="{width:width}"><!--右侧div内容-->
        <contrast-index :patentMessage="message" :patentNo="pNo" @on-change='changefix' />
    </div>
  </div>


    <CreateReport ref="ReportForm"></CreateReport>
</div>
   

</template>

<script>
import { changeTranslation, patentKeywordsHighlight } from '../components/mixins'
import PatentList from './components/PatentList'
import PatentField from './components/PatentField'
import PatentAnnotation from './components/PatentAnnotation'
import PatentBasic from "./components/PatentBasic"
import PatentPDF from "./components/PatentPDF"
import PatentImage from "./components/PatentImage"
import PatentRight from "./components/PatentRight"
import PatentInstruction from "./components/PatentInstruction"
import PatentFamily from "./components/PatentFamily"
import PatentStatus from "./components/PatentStatus"
// import PatentKeywordsHighlight from '../components/PatentKeywordsHighlight'
import ContrastIndex from './ContrastIndex'
import PatentKeywordsHighlight from "../../folder/components/PatentKeywordsHighlight"
import { getPatentCountry } from "@/utils";
// import Import from '../../import/index.vue'

import CreateReport from './components/CreateReport.vue'
import Permit from './components/history/permit.vue'
import Examination from './components/history/examination.vue'
import File from './components/history/file.vue'
import Invalid from './components/history/invalid.vue'
import Litigation from './components/history/litigation.vue'
import Other from './components/history/other.vue'


import ProductManage from '@/views/product/components/product.vue'
import PatentWorth from './components/history/components/echarts/components/echarts.vue'

import { changeWidth } from '../../components/common/editDiv'

import PatentMark from './components/PatentMark.vue'

import HistoryOfInvalidEvidence from './components/history/HistoryOfInvalidEvidence.vue'
import InvalidEvidencePush from './components/history/InvalidEvidencePush.vue'

export default {
  mixins: [patentKeywordsHighlight, changeTranslation,changeWidth],
  components: {
    ContrastIndex,
    PatentList,
    PatentField,
    PatentAnnotation,
    PatentKeywordsHighlight,
    PatentBasic,
    PatentPDF,
    PatentImage,
    PatentRight,
    PatentFamily,
    PatentStatus,
    PatentInstruction,
    // Import,
    CreateReport,
    Permit,
    Examination,
    File,
    Invalid,
    Litigation,
    Other,
    ProductManage,
    PatentWorth,
    PatentMark,
    HistoryOfInvalidEvidence,
    InvalidEvidencePush
},
  data() {
    return {
      radio:1,
      height:null,
      positionList:[
        {
          label:'tab展示',
          value:1
        },
        {
          label:'上边展示',
          value:2
        },
        {
          label:'下边展示',
          value:3
        },
        {
          label:'左边展示',
          value:4
        },
        {
          label:'右边展示',
          value:5
        },
      ],
      ban:0,
      pNo:'',
      message:1,
      fix:false,
      fix2:false,
      cfix:false,
      value: false,
      width:'100%',
      showRight: false,
      patentId: parseInt(this.$route.params.id || 0),
      projectId: parseInt(this.$route.query.id || 0),
      patent: {},
      activeMenu: 'PatentBasic',
      activeMenu2: '',
      componentName: 'PatentBasic',
      activeOption: 'PatentField',
      loading: false,
      menuList: [
        {
          value: 'PatentBasic',
          label: '基础信息'
        },
        {
          value: 'PatentRight',
          label: '权利要求'
        },
        {
          value: 'PatentImage' ,
          label:'附图'
        },
        {
          value: 'PatentInstruction',
          label: '说明书文本'
        },
        {
          value: 'PatentFamily',
          label: '同族专利'
        },
        {
          value: 'PatentStatus',
          label: '法律状态'
        },
        {
          value: 'PatentPDF',
          label: '说明书'
        },
        {
          value: 'PatentExport',
          label: '导出文档'
        },
        {
          value:'Permit',
          show:this.$permission('/workspace/patent/worth')?false:true,
          label:'许可历史'
        },
        {
          value:'ProductManage',
          show:this.$permission('/workspace/product')?false:true,
          label:'商品化'
        },
        {
          value:'patentWorth',
          show:this.$permission('/workspace/patent/worth')?false:true,
          label:'价值曲线'
        }
      ],
      menuList2: [
        {
          value: 'Examination',
          label: '审查历史'
        },
        {
          value: 'Invalid',
          label: '被无效历史'
        },
        {
          value: 'HistoryOfInvalidEvidence',
          label: '作为无效证据使用历史'
        },
        {
          value: 'InvalidEvidencePush',
          label: '无效证据推荐'
        },
        {
          value: 'Litigation',
          label: '诉讼历史'
        },
        {
          value: 'Other',
          label: '其他参考资料'
        },
      ],
      activeName:'0',
    }
  },
  created() {
  },
  async mounted() {
     await this.getPatent(this.patentId)
     this.$nextTick(()=>{
        this.$set(this,'height',document.getElementsByClassName('el-main')[0].offsetHeight-200  + 'px')
     })
      // 请求查询批注
      this.getContrastList()
     
  },
  computed: {
    contrastList() {
      return this.$store.state.report.contrastList
    }
  },
  watch:{
    value(val){
      if(val==true){
        this.width='50%'
      }else{
        this.width='100%'
      }
    },
    fix2(val){
       if(this.fix==true&&val==true){
        this.ban=1
      }else{
        this.ban=0
      }
    },
    fix(val){
        if(this.fix2==true&&val==true){
        this.ban=1
      }else{
        this.ban=0
      }
    },
    activeMenu2(){
      this.radio = 1
      this.changePosition(this.radio)
    },
  },
  methods: {
    //获取pdf类型
    getPDFType() {
      if (this.patent.pdf && this.patent.pdf.length > 0) {
        var index = this.patent.pdf.findIndex(item => {
            return item.type == 2
          })
          if (index != -1) {
            return 2
          } else {
            return 1
          }
      }
    },
    //获取需要跳转的批注
    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);
        setTimeout(function () {
          anchor.click();
          document.body.removeChild(anchor);
        }, 66);
        return true;
    },
    // 查询批注
    getContrastList(val) {
      if (val) {
        var index = this.contrastList.findIndex(item => {
          item.patentNo == val
        })
        if (index != -1) {
          return false;
        }
      }
      let params = {
        patentNo: val?val:this.patent.patentNo,
        id: this.projectId,
        createFrom:1
      }
      this.$api.scratchWordsQuery(params).then(response => {
        if (response.code==200) {
          if (this.contrastList.length > 0) {
             var a = this.contrastList.filter(item => {
              return item.patentNo != params.patentNo
             }).concat(response.data)
          } else {
             var a = response.data
          }
           this.$store.commit('SET_PATENT_PIZHU_CONTRAST', a)
        }
      })
    },
     
    ending(val){
      this.activeMenu2 = val
      return false
    },
    //修改附图展示方式
    changePosition(val){
      var dom = document.getElementsByClassName('dom')
      var height = document.getElementsByClassName('patent-articles-content-left')[0].offsetHeight
      var left1 = document.getElementsByClassName('left1')
      var mid1 = document.getElementsByClassName('mid1')
      switch(val){
        case 1://tab展示
          dom[0].style.flexDirection = ''
          this.height = document.getElementsByClassName('el-main')[0].offsetHeight-200 + 'px'
          this.$nextTick(()=>{
            left1[0].style.width = '100%'
          })
          break;
        case 2://上边展示
          dom[0].style.flexDirection = 'column-reverse'
          this.height = (height - 300) + 'px'
          this.$nextTick(()=>{
            mid1[0].style.width = '100%'
            left1[0].style.width = '100%'
          })
          break;
        case 3://下边展示
          dom[0].style.flexDirection = 'column'
          this.height = (height - 400) + 'px'
          this.$nextTick(()=>{
            mid1[0].style.width = '100%'
            left1[0].style.width = '100%'
          })
          break;
        case 4://左边展示
          dom[0].style.flexDirection = 'row-reverse'
          this.height = (height) + 'px'
          // this.$nextTick(()=>{
          //   mid1[0].style.height = this.height
          // })
          break;
        case 5://右边展示
          dom[0].style.flexDirection = 'row'
          this.height = (height) + 'px'
          // this.$nextTick(()=>{
          //   mid1[0].style.height = this.height
          // })
          break;    
      }
    },
    // 创建报告：无效分析等点击事件
    handleAnalyse(id) {
      this.$api.getProject({id:this.projectId}).then(response=>{
        var form = {
          type:id,
          signPatentNo:this.pNo,
          projectId:this.projectId,
          departmentId:response.data[0].departmentId,
          personId:response.data[0].personnelId,
          clientId:response.data[0].clientId,
          proTec:response.data[0].technicalTheme,
          scenarioList:response.data[0].scenarioList
      }
      this.$refs.ReportForm.open(form)
      })
      
    },
    changefix(val){
      // console.log(val)
      this.fix2=val
     
    },
    qx(){
      this.fix=false
      // this.message.fix=false
      // console.log(1)
    },
    gd(){
      this.fix=true
      // this.message.fix=true
    },
    changePageTitle() {
      document.title = `${this.patent.patentNo} ${this.patent.name || ''}`
    },
    async onChange(data) {
      // this.getContrastList(this.projectId,data.patentNo)
      // console.log(this.projectId,data)
      this.message = data.id
      if(this.fix!=true){
        await this.getPatent(data.id)
      }
      
      await this.$router.push({
        path: '/workspace/folder/' + data.id,
        query: {
          id: this.projectId,
        }
      })
      this.patentId = data.id
      this.changePageTitle()
      this.getContrastList(data.patentNo)
    },
    async getPatent(id) {
      this.loading = true
      const response = await this.$api.getPatentById(id, { projectId: this.projectId })
      this.patent = response.data
      // console.log(this.patent)
      this.pNo=this.patent.patentNo
      const country = getPatentCountry(this.patent.patentNo)
      let change = false
      if (country !== 'CN') {
        change = true
      }
      this.$set(this.patent, 'change', change)
      this.$set(this.patent, 'change2', change)
      this.loading = false
      this.changePageTitle()
    },
    handleSelect2(index, path) {

    },
    handleSelect(index) {
      if (index === 'PatentExport') {
        const router = this.$router.resolve({
          path: '/workspace/folder/export/patent',
          query: {
            id: this.projectId,
            patent: this.patent.id
          }
        })
        window.open(router.href, '_blank');
        return false
      }
      // if((index == 'PatentImage' && this.activeMenu2 == 'PatentImage') ||(index == 'PatentPDF' && this.activeMenu2 == 'PatentPDF')){
      //   this.radio = 1
      //   this.changePosition(this.radio)
      // }
      if(index == this.activeMenu2){
        this.activeMenu2 = ''
        this.radio = 1
        this.changePosition(this.radio)
      }
      this.activeMenu = index
      this.componentName = index
     
      
    }
  }
}
</script>

<style lang="scss">
@import '@/assets/css/activeDiv.scss';
.content-main{
  width:80% !important ;
  background-color: skyblue !important;
}
.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 {
      float: left;
      height: 100%;
      overflow-y: hidden;
      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>