<template>
<div class="wrap">
  <div class="navBar">
    <van-nav-bar
        title="车辆维保"
        :left-arrow="isShowBackBtn ? true : false"
        left-arrow-color="#FFFFFF"
        :border="false"
        :fixed="true"
        :safe-area-inset-top="true"
        @click-left="goPrePage"
    />
  </div>
  <div class="tab_wrap">
    <div v-for="(item, index) in tabArr" :key="index"
         @click="changeTab(index)">
      <span :class="{'active' : activeIndex == index , 'alpha' :true}"> {{ item.name }}</span>
      <span class="numTip" style="opacity: 1 !important;" v-if="index===0 && item.num">{{item.num}}</span>
    </div>
  </div>
  <van-pull-refresh class="refresh" v-model="isLoading" @refresh="onRefresh" v-show="!show">
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <div class="listWrap">
        <div class="listItem"  @click="noMultipleClicks(goPageDetail,item)" v-for="(item,index) in pageList" :key="index">
          <div class="line1">
            <div class="title">{{item.stage}}</div>
            <div class="right">
              <img class="commonImg" :src="getStatus(item.states?.code)">
              <div :class="getStatusColor(item.states?.code)">{{ item.states?.label }}</div>
            </div>
          </div>
          <div class="driverInfo">{{ item.vehicleName }} /  {{ item.plateNumber }}</div>
          <div class="time">{{ item.createTime }}</div>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>
  <div class="bgEmptyImg" v-show="show" >
    <img  src="@/assets/empty.png" />
  </div>
</div>
</template>

<script>
import {myMixins} from  "@/utils/myMixins"
import {vehicleMaintenanceList,vehicleMaintenanceCount} from "@/api/maintenance"
export default {
  name: "vehicle-maintenance-list",
  mixins:[myMixins],
  data() {
    return {
      id:'',
      tabArr: [ {name: '待审批', status: 2,num:0 },{name: '已审批', status: 2,num:0 },],
      activeIndex: 0,
      pageList:[],
      pageNum:1,
      pageSize:10,
      total:'',
      noClick:true,
      isShowBackBtn:true,
      inApprovalCount:0,
      status:'',
      isLoading:"",
      loading: false,
      finished: false,
    }
  },
  mounted() {
    const urlParams = new URLSearchParams(window.location.search);
    this.status=urlParams.get('status')
    if(this.status=='crm' || this.$route.params.status == 'crm' ){//后台进入此页面没有返回按钮
      this.isShowBackBtn=false
    }else{
      this.isShowBackBtn=true
    }
    this.activeIndex=this.$route.params?.activeIndex || 0
    this.getList()
  },
  computed:{
    show() {
      return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
    },
  },
  methods: {
    async onLoad(){
      this.pageNum++;
      await this.getList()
      this.loading = false;
      console.log("this.pageList.length",this.pageList.length)
      console.log("this.total",this.total)

      if (this.pageList.length >= this.total) {
        this.finished = true;
      }
    },
    goPrePage(){
      this.$router.push({  name: 'toDoList' });
    },
    // 1申请审批，2申请不通过，3申请通过，4完成审批中，5完成不通过，6完成通过，9维保终止
    getStatusColor(i){
      switch (i){
        case 1://
        case 4://
          return 'yelColor'
        case 2://
        case 5://
          return 'redColor'
        case 3://
        case 6://
          return 'greColor'
        case 9://
          return 'garyColor'
        default:
          return 'yelColor'
      }
    },
    getStatus(i){
      switch (i){
        case 1://
        case 4://
          return require('@/assets/waitSubmit.png')
        case 2://审核通过
        case 5://已打款
          return require('@/assets/unpass.png')
        case 3://
        case 6://
          return require('@/assets/dakuan.png')
        case 9://报销失败
          return require('@/assets/unSubmit.png')
        default:
          return require('@/assets/waitSubmit.png')
      }
    },
/*    onRefresh() {
      vehicleMaintenanceCount();
      // this.getList()
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    },*/
    onRefresh() {
      vehicleMaintenanceCount();
      this.pageNum=1
      // this.getList()
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    },
    async changeTab(index) {
      this.activeIndex = index
      this.pageNum = 1
      this.pageList = [];
      this.total=0
      await this.getList()
    },
    async getList() {
      let result=await vehicleMaintenanceCount();
      if(result.code==200 && result.data){
        this.tabArr[0].num=result.data.inApprovalCount
      }
      let res=await vehicleMaintenanceList ({
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        queryType:this.activeIndex+1,
      })
      // this.pageList=res.data
      // console.log("===",this.pageList)
      this.total=res.total
      if(this.pageNum == 1){// 第一页直接赋值
        this.pageList=res.data
      }else{// 第二页数据拼接
        console.log("第二页数据拼接")
        let preList = this.pageList;
        // console.log("preList",preList)
        let arr = res.data;
        // console.log("arr",arr)
        this.pageList = preList.concat(arr)
        console.log("this.pageList====",this.pageList)
      }
    },
    goPageDetail(item){
      this.$router.push({
        name: 'maintenanceApplication',  // 目标路由的名称
        params: {
          info:item,
          activeIndex:this.activeIndex,
          status:this.status,
        }
      });

    },
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
@import "@/styles/approval.scss";
.wrap{
  @include wh(100%,100%);
  box-sizing: border-box;
  overflow-y: auto;
}
.navBar{
  margin-bottom: 46px;
}
::v-deep .van-list__finished-text{
  background-color: #F4F5F7 !important;
  padding-bottom: 10px;
}
::v-deep .van-pull-refresh{
  height: calc(100% - 86px) ;
  overflow-y: auto;
  background-color: #F4F5F7;
}
.listItem{
  padding: 11px 28px 11px 23px;
  div{
    .title{
      @include fontWeightSize(bold,14px);
      line-height: 20px;
      margin-bottom: 8px;
    }
    .right{
      @include flexCenter();
    }
  }
  .driverInfo{
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 5px;
  }
}
</style>