<template>
  <div class="change-patent" style="background:white;display:flex; justify-content:flex-end" key="1"> 
    <el-button type="" size="small" :disabled="prev==0||ban==1" @click="handleLink(records[index-1],'prev')" >
      <span class="p"><i class="el-icon-arrow-up"></i>
        <span>上一篇</span>
      </span>
      <span class="n" v-if="prev">
        <span>{{ records[index-1].patentNo }}</span>
      </span>
      <span class="n" v-else>无数据</span>
    </el-button>
    <div style="width:120px;height:50px;border-radius:5px ;border:1px solid #DCDCDC;display:flex; justify-content:flex-start;margin:0 10px">
      <div class="t" style="min-width:50px;text-align:center;line-height:50px;border-right:1px solid #DCDCDC;" v-if="prev>0">{{ prev }}</div>
      <div class="t" style="min-width:50px;text-align:center;line-height:50px" v-if="next">{{ next }}</div>
      </div>
    <el-button type="" size="small" :disabled="next==0||ban==1" @click="handleLink(records[index+1],'next')" >
      <span class="p">
        <i class="el-icon-arrow-down"></i>
        <span>下一篇</span>
      </span>
      <span class="n" v-if="next">
        <span>{{ records[index+1].patentNo }}</span>
      </span>
      <span class="n" v-else>无数据</span>
    </el-button>
  </div>
</template>

<script>

export default {
  mixins: [],
  props: ['ban'],
  data() {
    return {
      queryParams: {},
      records: [],
      total: 0,
      loading: false,
      index:0,
      prev:0,
      next:0,
      isNext:false,
      isPrev:false
    }
  },
  watch: {
  },
  async mounted() {
      var index = this.$s.getSession('params').index
      this.index = index%10
      this.queryParams = this.$s.getSession('params').params
      this.queryParams.PageNum = Math.floor(index/10)+1
      this.queryParams.RowCount = 10
      
      if(this.index == 9){
        this.isNext = true
        this.queryParams.RowCount = 20
      }
      if(this.index == 0 && this.queryParams.PageNum != 1){
        this.isPrev = true
        this.queryParams.PageNum -= 1
        this.queryParams.RowCount = 20
        this.index = 10
      }
     await this.getPatentList()
  },
  methods: {
   async getPatentList(val) {
      // this.loading = true
     await this.$api.patentSelectImport(this.queryParams).then(response=>{
        if(response.code == 200){
          var params = this.$s.getSession('params')
          var prev = ''
          if(this.index == 9){
            this.queryParams.RowCount = 10
            prev = ((this.queryParams.PageNum-1)*this.queryParams.RowCount + this.index)
          }else{
            prev = this.queryParams.PageNum>1?((this.queryParams.PageNum-2)*this.queryParams.RowCount + this.index):((this.queryParams.PageNum-1)*this.queryParams.RowCount + this.index)
          }
          if(!val){
            if(this.index == 10){
              // this.queryParams.PageNum += 1
              this.queryParams.RowCount = 10
            }
          }
          
          this.total =response.data.total
          // this.$set(this,'prev',this.queryParams.PageNum>1?((this.queryParams.PageNum-2)*this.queryParams.RowCount + this.index):((this.queryParams.PageNum-1)*this.queryParams.RowCount + this.index))
          this.$set(this,'prev',prev)
          this.$set(this,'next',this.total>2?((this.total - this.prev - 1)<0?0:(this.total - this.prev - 1)):0)
          // this.prev = (this.queryParams.PageNum-1)*this.queryParams.RowCount + this.index
          // this.next = this.total>2?((this.total - this.prev - 1)<0?0:(this.total - this.prev - 1)):0
          if(val == 'prev'){
            this.$set(this,'records',response.data.records.concat(this.records))
          }else{
            this.$set(this,'records',this.records.concat(response.data.records))
          }
          // this.records = this.records.concat(response.data.records)
          params.index = this.prev
          this.$s.setSession('params',params)
          // this.loading = false
          
        }
      }).catch(error=>{
        this.loading = false
      })
    },
  handleLink(item,type) {
      this.$emit('on-change', item)
      
      if(type == 'prev'){
          this.index =this.index - 1
          this.prev -=1
          this.next +=1
          if(this.index <= 1){
              if(this.queryParams.PageNum>1){
                  this.index += 10
                  if(this.isNext){
                    this.queryParams.PageNum -= 2
                  }else{
                    this.queryParams.PageNum -= 1
                  }
                  this.isPrev = true
                  this.isNext = false
                  this.getPatentList(type)
                  this.$nextTick(()=>{
                      this.records.splice(10,10)
                  })
              }
          }
      }else{
        if(this.prev>=9999){
          this.$message.warning('系统不能查看10000条以后的数据!!!')
          return false
        }
          this.index =this.index + 1
          this.prev +=1
          this.next-=1
          
          if(this.records.length==20 && this.index == 18){
              this.index -= 10
              if(this.isPrev){
                    this.queryParams.PageNum += 2
                  }else{
                    this.queryParams.PageNum += 1
                  }
                  this.isPrev = false
                  this.isNext = true
              this.getPatentList(type)
              this.$nextTick(this.records.splice(0,10))
          }else if(this.records.length<=10 && this.index == 8){
            this.queryParams.PageNum += 1
              this.getPatentList(type)
          }
      }
      var params = this.$s.getSession('params')
      params.index = this.prev
      this.$s.setSession('params',params)
    },
  }
}
</script>

<style lang="scss">
.change-patent {
  padding: 10px;
  .el-button {
    height: 50px;
    width: 100%;
    margin-left: 0 !important;
  
    // margin-top: 10px;
    text-align: left;
    font-size: 12px;
    .p {
      display: block;
      margin-bottom: 5px;
      color: black;
      .t {
        height: 50px;
        width: 100px;
        border: 1px solid #797979;
        padding-left: 10px;
        color: #1e9fff;
        font-size: 14px;
        font-weight: bold;
      }
    }
    .n {
      margin-left: 18px;
      font-size: 12px;
      color: #797979;
    }
  }
}
</style>