<template>
  <div class="height_100 article_menu">
     <!-- 展开后 -->
     <div v-if="!isContract" style="width: 350px;height: 100%;">
        <el-container>
          <el-header
            style="width: 100%;display: flex;justify-content: space-evenly; align-items: center; height: 50px;line-height: 50px;">
            <el-popover ref="heightPopover" placement="bottom" title="高亮" width="320" trigger="click">
              <patent-keywords-highlight :project-id="projectId" />
            </el-popover>
            <el-tooltip content="返回" placement="top">
              <el-button size="small" @click="other('goBack')"><i class="iconfont icon-fanhui"></i></el-button>
            </el-tooltip>
            <el-tooltip :content="isRight ? '设置菜单栏为左侧' : '设置菜单栏为右侧'" placement="top">
              <el-button size="small" class="articles-Loop" @click="other('setting')">
                <i class="iconfont icon-shezhi2"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip content="设定高亮关键词" placement="top">
              <el-button v-popover:heightPopover size="small"><i class="iconfont icon-wodegaoliang"></i></el-button>
            </el-tooltip>
            <el-tooltip content="对比" placement="top">
              <el-button size="small" @click="other('contrast')">
                <i v-if="!value" class="iconfont icon-duibi"></i>
                <i v-else class="iconfont icon-duibi1"></i>
              </el-button>
            </el-tooltip>
            <template v-for="(item,index) in menu" >
              <el-tooltip :content="item.content" placement="top" :key="index">
                <el-button size="small" @click="other(item.event)">
                  <i :class="item.icon || 'el-icon-warning-outline'"></i>
                </el-button>
              </el-tooltip>
            </template>
            <el-tooltip content="收缩" placement="top">
              <el-button size="small" @click="isContract = !isContract">
                <i class="iconfont icon-shousuo"></i></el-button>
            </el-tooltip>
          </el-header>
          <el-main style="background: #FFFFFF;">
            <PatentLeft :patentList="patentList" :reportType="reportType" :patentNo="patentNo" :total="total" @getPatentLeft="getPatentLeft"></PatentLeft>
          </el-main>
          <el-footer style="text-align: center;" v-if="[1,2,7].findIndex(item=>{return item == reportType}) == -1">
            <el-pagination background layout=" prev, pager, next" :current-page.sync="queryParams.current" :pager-count="5"
              :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="total">
            </el-pagination>
          </el-footer>
        </el-container>
      </div>
      <!-- 收缩后 -->
      <div v-else class="articles-Loop-div">
        <el-tooltip content="返回" placement="right">
          <div class="articles-Loop">
            <i class="iconfont icon-fanhui" @click="other('goBack')"></i>
          </div>
        </el-tooltip>
        <el-tooltip :content="isRight ? '设置菜单栏为左侧' : '设置菜单栏为右侧'" placement="right-end">
          <div class="articles-Loop" @click="other('setting')">
            <i class="iconfont icon-shezhi2"></i>
          </div>
        </el-tooltip>
        <el-tooltip content="展开" placement="right">
          <div class="articles-Loop" @click="isContract = !isContract">
            <i class="iconfont icon-zhankai"></i>
          </div>
        </el-tooltip>
        <div v-for="(item,index) in menu" :key="index">
              <el-tooltip :content="item.content" placement="top">
                <div class="articles-Loop" @click="other(item.event)">
                  <i :class="item.icon || 'el-icon-warning-outline'"></i>
                </div>
              </el-tooltip>
            </div>
        <el-tooltip content="设定高亮关键词" placement="right-end">
          <el-popover placement="right" title="关键词高亮" width="320" trigger="click" style="margin-top:20px">
            <patent-keywords-highlight :project-id="projectId" />
            <div class="articles-Loop" slot="reference" style="">
              <i class="iconfont icon-wodegaoliang"></i>
            </div>
          </el-popover>
        </el-tooltip>
        <el-tooltip content="对比" placement="right-end">
          <div class="articles-Loop" @click="other('contrast')" :style="{ background: value ? '#9cb2e5' : 'white' }">
            <i v-if="!value" class="iconfont icon-duibi"></i>
            <i v-else class="iconfont icon-duibi1"></i>
          </div>
        </el-tooltip>
        <template v-if="patentList.length>1">
          <el-tooltip placement="right-end">
          <template slot="content">
            <div>点击查看上一篇文献</div>
            <div v-if="[1,2,7].findIndex(item=>{return item == reportType}) == -1">专利：{{index!=0? patentList[index-1].patentNo:''}}</div>
            <div v-else>文献：{{index!=0? patentList[index-1].name:''}}</div>
            <div>数量：{{currentLocation - 1}}</div>
          </template>
          <div class="articles-Loop">
            <div  @click="prev" v-disabled="currentLocation - 1 == 0 || loading">
              <i class="el-icon-arrow-up" ></i>
            </div>
          </div>
        </el-tooltip>
        <el-tooltip placement="right-end">
          <template slot="content">
            <div>点击查看下一篇文献</div>
            <div v-if="[1,2,7].findIndex(item=>{return item == reportType}) == -1">专利：{{(total - currentLocation!=0 && total!=0)? patentList[index+1].patentNo:''}}</div>
            <div v-else>文献：{{(total - currentLocation!=0 && total!=0)? patentList[index+1].name:''}}</div>
            <div>数量：{{total - currentLocation}}</div>
          </template>
          <div class="articles-Loop" >
            <div  @click="next" v-disabled="total - currentLocation == 0 || loading">
              <i class="el-icon-arrow-down"></i>
            </div>
          </div>
        </el-tooltip>
        </template>
        
      </div>
  </div>
</template>

<script>
import PatentLeft from './PatentLeft.vue';
import PatentKeywordsHighlight from '../../components/PatentKeywordsHighlight.vue';
export default {
  components: {
    PatentLeft,
    PatentKeywordsHighlight
  },
  props: {
    menu:{
      default:()=>{
        return []
      }
    },
    projectId:{
      default:0
    },
    reportType:{
      default:0
    },
    taskId:{
      default:null
    },
    searchOption:{
      default:()=>{
        return {}
      }
    },
    location:{
      default:1
    },
    patentNo:{
      default:''
    },
    //是否在右侧
    isRight:{
      default:false
    },
    //对比
    value:{
      default:false
    },
    outside:{
      default:false
    },
    fromPath:{
      default:''
    }
  },
  data() {
    return {
        isContract:true,//是否收缩
        queryParams:{
            current:1,
            size:10,
        },
        total:0,
        loading:false,
        patentList:[],
        currentLocation:this.location,
        index:0,
        total:0
    };
  },
  watch: {
    isContract(){
      this.getData()
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getData()
  },
  methods: {
    getData(){
      if(this.outside){
        this.getPatentSelect()
      }else{
        this.getPatentList() 
      }
    },
    async getPatentSelect(){
      this.queryParams.current = parseInt((this.currentLocation-1) / this.queryParams.size) + 1
      var prevParams={
        current:(this.queryParams.current-1) * this.queryParams.size,
        size:1
      },
      params={
        current:this.queryParams.current,
        size:this.queryParams.size
      },
      nextParams={
        current:(this.queryParams.current * this.queryParams.size)+1,
        size:1
      }
      this.loading = true
      const [data1,data2,data3] = await Promise.allSettled([this.getList(prevParams),this.getList(params),this.getList(nextParams)])
      this.patentList = []
      var prevData = data1.status =='fulfilled'?data1.value:{}
      var data = data2.status =='fulfilled'?data2.value:[]
      var nextData = data3.status =='fulfilled'?data3.value:{}
      if(Object.keys(prevData).length>0){
        this.patentList.push(prevData.data[0])
      }
      if(Object.keys(data).length>0){
        this.patentList.push(...data.data)
        this.total = data.total>10000?10000:data.total
      }
      if(Object.keys(nextData).length>0){
        this.patentList.push(nextData.data[0])
      }
      var index = this.patentList.findIndex(item=>{
            return item.patentNo == this.patentNo
          })
          if(index!=-1){
            this.index = index
          }
      this.loading = false
    },
    //查询专利
    getList(queryParams) {
      if( queryParams.current == 0 && this.isContract){
        return {}
      }
      if(queryParams.size == 1 && !this.isContract){
        return {}
      }
      var params = {
        CurrentQuery: this.searchOption.searchCondition, //检索式
        DBType: this.searchOption.DBType, //”CN”或”WD”,表示检索中文库或世界库
        PageNum: queryParams.current, //页码（最多 200 页）
        RowCount: queryParams.size, //每页返回条数（最多 50 条）
        OrderBy: this.searchOption.OrderBy, //排序字段：“AD”，“PD”，“GD”, “ID”（检索引擎自生成字段，排序顺序固定）
        OrderByType: this.searchOption.OrderByType, //排序方式：“ASC”，“DESC” 即正序倒序
        retrieveRecordId: this.searchOption.retrieveRecordId
      };
      return this.$api.patentSelect(params).then(response=> response.data)
    },
    getPatentLeft(patentNo,index,sign){
      
      if(sign){
        this.currentLocation = index + 1
        this.updatePatentNo(patentNo,sign)
        return false
      }
      this.currentLocation = (index + 1) + ((this.queryParams.current - 1) * this.queryParams.size)
      this.updatePatentNo(patentNo)
    },
    updatePatentNo(patentNo,sign){
      var search = {
        searchOption:this.searchOption,
        fromPath:this.fromPath,
        location:this.currentLocation
      }
      this.$s.setSession('search',search)
      if(sign){
        this.$emit('getPatentLeft',patentNo,sign)
        return false
      }
      this.$emit('getPatentLeft',patentNo)
    },
    getPatentList(){
      var reportType = [1,2,7]
      var index = reportType.findIndex(item=>{
        return item == this.reportType
      })
      if(index != -1){
        var param = {
          projectId:this.projectId
        }
        this.$api.queryCompareLiterature(param).then(response=>{
            if(response.code == 200){
                this.patentList = response.data.data.sort((a,b)=>{
                    return a.sysOrder - b.sysOrder
                })
                this.total = this.patentList.length
                this.index = this.currentLocation - 1
            }
        }).catch(error=>{
            this.patentList = []
            this.total = 0
        })

        return false
      }
      var api = ''
      var current = 5
      if(this.isContract){
        this.queryParams.current = ((this.currentLocation-1) < current)? 0 : ((this.currentLocation-1) - current)
        
        api = 'getPatentPageMessage'
      }else{
        this.queryParams.current = parseInt((this.currentLocation-1) / this.queryParams.size) + 1
        api = 'QueryPatent'
      }
      let params = {
        ...this.queryParams,//分页信息
        projectId: this.projectId,
        taskId:this.taskId,
        searchQuery: this.$commonJS.objectToString(this.searchOption),//检索条件
        // orderDTOList: this.sort,//排序信息
      }
      this.loading = true
      this.$api[api](params).then(res => {
        if (res.code == 200) {
          this.patentList = res.data.data
          this.total = res.data.total
          var index = this.patentList.findIndex(item=>{
            return item.patentNo == this.patentNo
          })
          if(index!=-1){
            this.index = index
          }
          this.loading = false
        }
      }).catch(error => {
        this.patentList = []
        this.total = 0
        this.loading = false
      })
    },
    //分页
    handleCurrentChange(val){
        this.queryParams.current = val
        this.getData()
    },
    other(event){
      this.$emit('event',event)
    },
    //上一篇
    prev(){
      this.index -=1
      this.currentLocation -=1
      if(this.outside){
        this.updatePatentNo(this.patentList[this.index].patentNo)
        if(this.index==-1 &&  this.currentLocation>0){
          this.getData()
        }
        return 
      }
      var reportType = [1,2,7]
      var index = reportType.findIndex(item=>{
        return item == this.reportType
      })
      if(index !=-1){
        this.updatePatentNo(this.patentList[this.index],true)
        return false
      }
      this.updatePatentNo(this.patentList[this.index].patentNo)
      if(this.index <= 2 && this.currentLocation>2){
        this.getData()
      }
    },
    //下一篇
    next(){
      this.index +=1
      this.currentLocation +=1
      if(this.outside){
        this.updatePatentNo(this.patentList[this.index].patentNo)
        if(this.index==10 &&  this.currentLocation<this.total){
          this.getData()
        }
        return
      }
      var reportType = [1,2,7]
      var index = reportType.findIndex(item=>{
        return item == this.reportType
      })
      if(index !=-1){
        this.updatePatentNo(this.patentList[this.index],true)
        return false
      }
      this.updatePatentNo(this.patentList[this.index].patentNo)
      if(this.index >= 7  &&  this.currentLocation<this.total-2){
        this.getData()
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.article_menu{
  border-right:1px solid #e6e6e6;
  border-left:1px solid #e6e6e6;
  i{
    width:16px;
    height:16px;
    font-size: 16px;
  }
.articles-Loop-div {
    width: 51px;
    height: 100%;
    background: #fff;
    text-align: center;

    .articles-Loop {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ccc;
      background: #fff;
      // border-bottom: none;
      cursor: pointer;
    }

    .articles-Loop:hover {
      background: #cdd7eb !important;
    }

    .articles-Loop-number {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

  }
}

</style>