<template>
  <div class="wrap">
    <div class="navBar">
      <van-nav-bar
          title="报销批次"
          left-arrow
          left-arrow-color="#FFFFFF"
          :border="false"
          :fixed="true"
          :safe-area-inset-top="true"
          @click-left="h5GoBack"
      />
    </div>
    <div class="tab_wrap">
      <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
           @click="changeTab(index)">
        {{ item.name }}
      </div>
    </div>
    <div class="listWrap">
      <div class="listItem" @click="goPageDetail">
        <div class="item">
          <div><span>审核批次</span><span>PC1234123443243232131</span></div>
          <div><span>报销金额</span><span>300</span></div>
          <div><span>案件数量</span><span>30</span></div>
          <div><span>提交人员</span><span>张三</span></div>
          <div><span>提交时间</span><span>2023-11-22 12:12:00</span></div>
          <img  src="@/assets/arrow_rht.png">
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {myMixins} from "@/utils/myMixins";

export default {
  name: "caseList",
  mixins: [myMixins],
  data(){
    return{
      tabArr: [{name: '待审核', status: 1}, {name: '已审核', status: 2},],
      activeIndex: 0,
      pageList:[],
      pageNum:1,
      pageSize:10,
    }
  },
  methods:{
    async changeTab(index) {
      this.activeIndex = index
      console.log(' this.activeIndex', this.activeIndex)
      this.pageNum = 1
      this.pageList = [];
      if(this.activeIndex === 0){
        // this.trainingType =1
      }else{
        // this.trainingType=2
      }
      // await this.getList()
    },
    goPageDetail(){
      console.log("去查看详情")
      this.$router.push({
        name: 'caseDetail',  // 目标路由的名称
       /* params: {
          id: item.id,                  // 参数对象的属性
          postfix:item.postfix,
          index:this.activeIndex,
          queryTime: this.time || this.queryTime
        }*/
      });
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap{
  @include wh(100%,100%);
  box-sizing: border-box;
}
.navBar{
  margin-bottom: 46px;
}
.tab_wrap {
  @include fontWeightSize(bolder, 15px);
  display: flex;
  justify-content: space-around;
  padding: 5px 0 5px 0;
  @include colorOpa(#737373,0.7);
  div {
    padding-top: 8px;
  }
  .active {
    color: #3678FF;
    position: relative;
  }
  .active:after {
    content: '';
    display: block;
    @include wh(50px,3px);
    background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
    border-radius: 2px;
    position: absolute;
    margin-top: 3px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.listWrap{
  width: 100%;
  .listItem{
    width: 100%;
    //@include wh(100%,200px);
    padding: 12px 12px;
    box-sizing: border-box;
    .item{
      @include wh(100%,100%);
      box-sizing: border-box;
      padding: 6px 0;
      border-bottom: 1px solid #cccccc;
      border-top: 1px solid #cccccc;
      position: relative;
      div{
        line-height: 22px;
        span:first-child{
          display: inline-block;
          margin-right: 8px;
        }
      }
      img{
        width: 23px;
        height: 31px;
        position: absolute;
        top: 34%;
        right: 0
      }
    }
  }
}
</style>
