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

<script>
import { commonMixins } from "./mixins"

export default {
  mixins: [commonMixins],
  props: ['projectId', 'patentId','ban','location','taskId','state',"taskWorkRemak","coordination"],
  data() {
    return {
      location1:this.location,
      Aban:0,
      queryParams: {},
      records: {},
      total: 0,
      loading: false,
    }
  },
  watch: {
    patentId() {
      this.getPatentList()
    },
    ban(val){
     this.Aban=val
    //  console.log(val)
    },
    location(val){
      this.location1 = val
      // this.getPatentList()
    }
  },
  async mounted() {
   
   await this.getPatentList()
  },
  methods: {
    async getPatentList() {
      this.queryParams = this.$s.getSession('params')
      this.queryParams.locPosition=this.location1
      // this.queryParams.patentId = this.patentId
      // 加上筛选条件
      console.log(this.queryParams);
      var a = {
        state:this.queryParams.taskStatus,//任务状态0/1/3
        taskId:this.queryParams.taskId,//任务id
        location: this.location1,//当前位置
        
      }
      this.loading = true
    // 请求上、下一篇
     await this.$api.getBetweenPatentList(this.queryParams).then(response => {
       if (response.code == 200) {
          // if (response.data.behindNumber == 0) {
          //     console.log("上下一篇");
              this.$emit("behindNumber", response.data.behindNumber)
          // }
          var a = {}
          if(response.data.behindID){
            a.next = {
              id:response.data.behindID,//下一篇id
              patentNo:response.data.behindPatentNo,//下一个专利号
              total:response.data.behindNumber,//篇数
            }
          }
          if(response.data.frontID){
            a.prev = {
              id:response.data.frontID,
              patentNo:response.data.frontPatentNo,
              total:response.data.frontNumber
            }
          }
          a.curr = {
              id:response.data.currentID,
              patentNo:response.data.currentPatentNo,
              total:response.data.totalNumber
          }
        }
        this.records = a
        this.loading = false
      })
    },
    handleLink(item) {
      this.location1 = Number(this.location1)+1
      item.location = this.location1
      item.isKeep=1
      this.getPatentList()
      this.$emit('on-change', item)
    },
    handleLink1(item) {
      this.location1 = Number(this.location1)-1
      item.location = this.location
      item.isKeep=1
      this.getPatentList()
      this.$emit('on-change', item)
    },
  }
}
</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>