<template>
  <div class="page">
      <div class="page_layout" >
        <p class="title">配件供应商列表</p>
        <div style="flex: 1;overflow: auto">
        <van-pull-refresh v-model="isLoading"  @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished"  :immediate-check="false"  finished-text="没有更多了" @load="onLoad">
          <supplier-item v-for="(item,index) in datas" :key="index" :item="item" @toScore="toScorePage" @toScorePage="toScorePageClick" @onItemClick="onItemClick(item)"></supplier-item>
          </van-list>
        </van-pull-refresh>
        </div>
      </div>
  </div>
</template>

<script>
  import supplierItem from "./component/supplierItem";
  import {getSupplierList} from "./service/getData";

  export default {
        name: "supplierList",
        components:{
            supplierItem
        },
        data(){
            return{
                pageIndex:1,
                pageSize:15,
                totalPage:1,
                isLoading:false,
                loading:false,
                finished:false,
                datas:[]
            }
        },
      created(){
          try {
              EbeiPlugins.setNavigationItemTitle("供应商");
          }catch (e) {

          }
        this.getData()
      },
        methods:{
            toScorePageClick(id,name){
                this.$router.push({
                    path:'/scoreDetail',
                    query:{
                        id:id,
                        name:name
                    }
                })
            },
            onItemClick(item){
                this.$router.push({
                    path:'/supplierDetailPage',
                    query:{
                        id:item.fbId
                    }
                })
            },
            toScorePage(id,name){
                console.log(id+'   '+name)
                this.$router.push({
                    path:'/scorePage',
                    query:{
                        id:id,
                        name:name
                    }
                })
            },
            onRefresh(){
                this.pageIndex = 1
                this.totalPage = 1
                this.loading = true
                this.finished = false
                this.isLoading = true
                this.getData()
            },
            onLoad(){
                if (this.pageIndex>this.totalPage){
                    this.finished = true
                    this.isLoading = false
                    this.loading = false
                }else {
                    this.loading = true
                    this.finished = false
                    this.isLoading = true
                    this.getData()
                }
            },
            getData(){
              let self = this
                let params = {
                    userId:localStorage.getItem('memberId')?localStorage.getItem('memberId'):'',
                    typeId:'',
                    infoState:'',
                    level:'',
                    fbWarehousingTimeStart:'',
                    fbWarehousingTimeEnd:'',
                    areaId:'',
                    fbName:'',
                    year:'',
                    fbId:'',
                    companyId:localStorage.getItem('companyId')?localStorage.getItem('companyId'):'',
                    pageNum:self.pageIndex,
                    pageSize:self.pageSize
                }

                self.$Spin.show()
                getSupplierList(params).then(res=>{
                    console.log(res)
                    self.$Spin.hide()
                    self.isLoading = false;
                    self.loading = false;
                    if (res.status==200){
                        self.totalPage = res.data.pages
                        if (res.data.records){
                            if (self.pageIndex==1){
                                self.datas = res.data.records
                            }else {
                                self.datas = self.datas.concat(res.data.records)
                            }
                        }
                        self.pageIndex++
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
  .page{
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 100vh;
    padding-bottom: 10px;
    background: linear-gradient(#68B4FF 0, #68B4FF 135px,#F5F5F5 135px);
  }

  .page_layout{
    overflow: auto;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 30px 15px 15px 15px;
    border-radius: 8px;
    z-index: 2;
    background: white;

    .title{
      margin: 14px 0px 0px 20px;
      color: #888888;
      font-size: 14px;
    }

    .top{
      margin: 10px 16px 10px 16px;
      border-bottom: 1px solid #eeeeee;
    }

    .list_style{
      margin: 0px 10px 10px 10px;
    }

    .flex_row{
      display: flex;flex-direction: row;align-items: center;justify-content: space-between;
    }

    .item_text{
      color: black;
      font-size: 16px;
      font-weight: bold;
    }

    .item_status{
      background: rgb(105,162,244);
      padding: 2px 14px 2px 14px;
      border-radius: 50px;
      color: white;
      font-size: 12px;
    }

    .item_gray_text{
      color: #888888;
      padding: 2px 14px 2px 14px;
      font-size: 12px;
    }

    .item_gray_text_left{
      color: #888888;
      font-size: 12px;
    }

  }
</style>
