<template>
  <div>
    技术特征4 （可做公共组件）
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>



<!-- <template> -->
  <!-- 技术特征4 （可做公共组件） -->
  <!-- <div>
    <div style="background:white;display:flex; justify-content:flex-end">
      <el-dropdown size="medium" v-if="show == true" style="margin-top:20px;margin-right:20px">
        <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:-10px">
          <el-dropdown-item @click.native="handleAnalyse(0)">无效分析</el-dropdown-item>
          <el-dropdown-item @click.native="handleAnalyse(1)">稳定性分析</el-dropdown-item>
          <el-dropdown-item @click.native="handleAnalyse(2)">第三方意见</el-dropdown-item>
          <el-dropdown-item @click.native="handleAnalyse(3)">侵权分析</el-dropdown-item>
          <el-dropdown-item @click.native="handleAnalyse(4)">回避设计</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" :patentList="PList" :ban='ban'/>
    </div>        -->
                
    <!-- <el-button @click="two">对比</el-button> -->
    <!-- <el-container style=" border: 1px solid #eee">
    <el-aside :style="{width:width}">
  <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.publicNo)"></span>
                <el-tag type="primary" effect="dark" size="mini" class="margin-left_10">{{ 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 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>
             
              <div style="  position: relative;">
                <el-link v-for="item in menuList" :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-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)' }">
              <component :is="componentName" :project-id="projectId" :patent="patent" :patent-id="patentId" @refresh="getPatent(patentId)"></component>
            </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" :patent-id="patentId"></component>
                      <component :is="activeOption" :project-id="projectId" :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>
      </el-aside>
  
       <el-container v-if="width!='100%'">
      <el-aside style="margin:0;" width="100%" >
    <contrast-index :patentMessage="message" :publicNo="pNo" @on-change='changefix' />
      </el-aside>
    </el-container>
      </el-container>
      <el-dialog title="报告" :visible.sync="reportFormVisible" width="500px">
    <el-form :model="reportForm" :rules="reportRule" ref="reportForm" label-width="120px">
      <el-form-item label="卷号" prop="volumeNo">
        <el-input v-model="reportForm.volumeNo" autocomplete="off" placeholder="请输入卷号"> </el-input>
      </el-form-item>
      <el-form-item label="标的专利号" prop="patentNo">
        <el-input v-model="reportForm.patentNo" autocomplete="off" placeholder="请输入标的专利号"> </el-input>
      </el-form-item>
      <el-form-item label="报告名称" prop="name">
        <el-input v-model="reportForm.name" autocomplete="off" placeholder="请输入报告名称"> </el-input>
      </el-form-item>
      <el-form-item label="负责人" prop="curator">
        <el-select v-model="reportForm.curator" placeholder="请选择负责人" style="width:100%">
          <el-option
            v-for="item in personnelList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="委托方" prop="client">
        <el-select v-model="reportForm.client" placeholder="请选择委托方" style="width:100%">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="承办部门" prop="department">
        <treeselect
                v-model="reportForm.department"
                :options="departmentList"
                :disable-branch-nodes="false"
                :show-count="true"
                placeholder="请选择"
                :normalizer="normalizer"  
            />
      </el-form-item>
      <el-form-item label="产品/技术" prop="technicalTheme">
        <el-input v-model="reportForm.technicalTheme" autocomplete="off" placeholder="请输入产品/技术"></el-input>
      </el-form-item>
      <el-form-item label="应用场景" prop="scene">
        <el-input v-model="reportForm.scene" autocomplete="off" placeholder="请输入产品/技术"></el-input>
      </el-form-item>
      <el-form-item label="关联报告" prop="relationReport">
        <el-input v-model="reportForm.relationReport" autocomplete="off" placeholder="请输入关联报告"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reportFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitReport">确 定</el-button>
    </div>
  </el-dialog>
  </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 jsCookie from 'js-cookie'
    // import History from './components/history'
  // import Treeselect from '@riophae/vue-treeselect'
  // import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    // import { mapGetters } from 'vuex'
    
    // import Litigation from './components/history/litigation.vue'
    // import Examination from './components/history/examination.vue'
    // import File from './components/history/file.vue'
    // import Invalid from './components/history/invalid.vue'
    // import Other from './components/history/other.vue'
  
  export default {
    props:['patentList','showbtn','pId'],
    mixins: [patentKeywordsHighlight, changeTranslation],
    components: {
      ContrastIndex,
      PatentList,
      PatentField,
      PatentAnnotation,
      PatentKeywordsHighlight,
      PatentBasic,
      PatentPDF,
      PatentImage,
      PatentRight,
      PatentFamily,
      PatentStatus,
      PatentInstruction,
      Import,
      History,
      Treeselect,
      Litigation,
      Examination,
      File,
      Invalid,
      Other
  },
    data() {
      return {
        handleAnalyseId:null,
        reportFormVisible:false,
        reportForm:{
          patentNo:'US7316752B2',
        },
        departmentList:[],
        personnelList:[],
        clientList:[],
        show:true,
        PList:localStorage.PatentList?JSON.parse(localStorage.PatentList) :[],
        ban:0,
        pNo:'',
        message:1,
        fix:false,
        fix2:false,
        cfix:false,
        value: false,
        width:'100%',
        showRight: false,
        patentId:localStorage.PatentList?JSON.parse(localStorage.PatentList)[0].id : parseInt(this.$route.params.id || 0),
        projectId: parseInt(this.$route.query.id || 0),
        patent: {},
        activeMenu: 'PatentBasic',
        componentName: 'PatentBasic',
        activeOption: 'PatentField',
        loading: false,
        menuList2:[
          {
            value: 'Examination',
            label: '审查历史'
          },
          {
            value: 'File',
            label: '申请案卷'
          },
          {
            value: 'Invalid' ,
            label:'无效记录'
          },
          {
            value: 'Litigation',
            label: '诉讼历史'
          },
          {
            value: 'Other',
            label: '其他参考资料'
          },
        ],
        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: '导出文档'
          },
         
        ],
        reportRule:{
          name: [{ required: true, message: '请输入报告名称', trigger: 'blur' },],
          patentNo: [{ required: true, message: '请输入标的专利', trigger: 'blur' },],
          curator: [{ required: true, message: '请选择负责人', trigger: 'change' },],
          client: [{ required: true, message: '请选择委托方', trigger: 'change' },],
          department: [{ required: true, message: '请选择部门', trigger: 'change' },],
        }
      }
    },
    created() {
    },
    computed: {
      ...mapGetters(['userinfo'])
    },
    mounted() {
        this.getPatent(this.patentId)
        this.getDepartment()
        this.getPersonnelList()
        // this.getClientList()
        this.show = this.showbtn == false?this.showbtn:true
        this.projectId = this.pId?this.pId:this.projectId
       console.log(this.show)
    },
    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
        }
      },
   
    },
    methods: {
     handleAnalyse(id){
        this.reportFormVisible = true
      this.handleAnalyseId = id
      // console.log(this.patent)
        this.reportForm={
          patentNo:'US7316752B2',
          curator:this.userinfo.id,
          department:this.userinfo.dpList[0].departmentId,
          technicalTheme: "LED",
          client: "安徽省瀚海新材料股份有限公司"
        }
      },
       getDepartment() {
          this.$api.getPermissionDepartmentList().then((response) => {
            this.departmentList = response.data;
          });
        },
      getPersonnelList(){
        this.$api.getPermissionPersonnelList().then((response)=>{
          this.personnelList=response.data
        })
      },
      // getClientList(){
      //    this.$api.getAdminClientList().then(response => {
      //     this.clientList = response.data.records
      //   }).catch(error => {
      //     this.loading = false
      //   })
      // },
     
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children
        };
      },
      submitReport(){
        this.$refs.reportForm.validate((valid) => {
          if(valid){
            localStorage.step = 0
        switch(this.handleAnalyseId){
          case 0:
            var router = this.$router.resolve({
              path:'/report_analyse',
              query: {
                projectId: this.projectId,
                patentId:this.patentId,
                patentNo:this.patent.patentNo
              }
            })
            break;
          case 1:
            var router = this.$router.resolve({
              path:'/report_analyse',
              query: {
                projectId: this.projectId,
                patentId:this.patentId,
                patentNo:this.patent.patentNo
              }
            })
            break;
          case 2:
            var router = this.$router.resolve({
              path:'/report_analyse',
              query: {
                projectId: this.projectId,
                patentId:this.patentId,
                patentNo:this.patent.patentNo
              }
            })
            break;
          case 3:
          // localStorage.PatentLists=[]
          var a = []
          a.push(this.patent)
          localStorage.PatentLists=JSON.stringify(a)
            var router = this.$router.resolve({
              path:'/tort',
              query: {
                projectId: this.projectId,
                patentId:this.patentId,
                patentNo:this.patent.patentNo
              }
            })
            break;
          case 4:
            var router = this.$router.resolve({
              path:'/tort',
              query: {
                projectId: this.projectId,
                patentId:this.patentId,
                patentNo:this.patent.patentNo
              }
            })
            break;
        }
        window.open(router.href, '_blank');
          }
        })
       
      },
      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.publicNo} ${this.patent.name || ''}`
      },
      async onChange(data) {
        // console.log(this.projectId,data)
        this.message=data.id
        if(this.fix!=true){
          await this.getPatent(data.id)
        }
        if(this.patentList){
  
        }else{
          await this.$router.push({
          path: '/workspace/folder/' + data.id,
          query: {
            id: this.projectId,
          }
        })
        }
        
        this.patentId = data.id
        this.changePageTitle()
      },
      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.publicNo
        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
        }
        this.activeMenu = index
        this.componentName = index
      }
    }
  }
  </script> -->
  
  <!-- <style lang="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: 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> -->