<template>
    <div style="height:calc(100% - 50px)">
        <div style="background:white;display:flex; justify-content:flex-end;align-items: center;">
            <el-button type="primary" class="margin-right_10" @click="importToProject">导入到报告</el-button>
            <el-switch
                v-model="value"
                inactive-text="对比"
                active-color="#00BFFF"
                inactive-color="#D3D3D3">
            </el-switch>
            <PatentList @on-change="onChange" :ban='ban'/>
        </div> 
        <div class="box" ref="box" v-dragControllerDiv>
            <div class="left" :style="{width:width}"><!--左侧div内容-->
                <PatentDetail :applicationNo="applicationNo" @on-change='changefix' />
            </div>
            <div class="resize" title="收缩侧边栏"   v-show="width!='100%'">⋮</div>
            <div class="mid" v-show="width!='100%'" :style="{width:width}"><!--右侧div内容-->
                <PatentDetail :applicationNo="applicationNo" @on-change='changefix' />
            </div>
        </div> 

        <Project-List-Dialog ref="projectListDialog"></Project-List-Dialog>
  </div>
</template>

<script>
import PatentDetail from './patentDetail.vue';
import PatentList from './PatentList.vue'
import ProjectListDialog from '../components/projectListDialog.vue'
export default {
  components: {
    PatentDetail,
    PatentList,
    ProjectListDialog
  },
  props: {},
  data() {
    return {
        ban:0,
        value: false,
        width:'100%',
        applicationNo:this.$route.query.applicationNo || null,
        patentNo:this.$route.query.patentNo || null,
    };
  },
  watch: {
    value(val){
      if(val==true){
        this.width='50%'
      }else{
        this.width='100%'
      }
    },
  },
  computed: {
    contrastList() {
      return this.$store.state.report.contrastList
    }
  },
  created() {},
  mounted() {
    this.getContrastList(this.patentNo)
  },
  methods: {
    //导入到专题库
    importToProject(){
      var params =this.$s.getSession('params').params
      var form = {
        conditions:"AN="+ this.applicationNo ,
        DBType:params.DBType,
        orderBy:params.OrderBy,
        orderByType:params.OrderByType,
        startNumber:1,
        endNumber:0,
        isAddPatentNos:[this.applicationNo],
        isDeletePatentNos:[],
        reportId:this.$s.getSession('params').reportId,
        asCompare:this.$s.getSession('params').asCompare
      }
      this.$refs.projectListDialog.open(form)
    },
    //修改定住
    changefix(){

    },
    //切换专利
    async onChange(val){
        this.applicationNo = val.applicationNo
        this.patentNo = val.patentNo
       
        this.changePageTitle(val.patentNo,val.name)
        this.getContrastList(val.patentNo)
        await this.$router.push({
          path: '/search/patentDetail',
          query: {
            applicationNo: val.applicationNo,
            patentNo: val.patentNo,
          }
        })
    },
    // 查询批注
    getContrastList(val) {
      if (val) {
        var index = this.contrastList.findIndex(item => {
          item.patentNo == val
        })
        if (index != -1) {
          return false;
        }
      }
      let params = {
        patentNo: val?val:this.patentNo,
        id: this.reportId,
        createFrom:this.reportId?2:0
      }
      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)
        }
      })
    },
    //修改title
    changePageTitle(patentNo,name) {
      document.title = `${patentNo} ${name || ''}`
    },
  },
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/activeDiv.scss';

</style>