<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="handleLink(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'],
  data() {
    return {
      Aban:0,
      queryParams: {},
      records: {},
      total: 0,
      loading: false,
    }
  },
  watch: {
    patentId() {
      this.getPatentList()
    },
    ban(val){
     this.Aban=val
    //  console.log(val)
    }
  },
  mounted() {
   
    this.getPatentList()
  },
  methods: {
    getPatentList() {
      this.queryParams = this.$s.getSession('params')
      this.queryParams.patentId = this.patentId
      this.loading = true
      this.$api.getBetweenPatentList(this.queryParams).then(response => {
        this.records = response.data
        this.loading = false
      })
    },
    handleLink(item) {
      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>