<template>
	<view class="container">
		<VNavigationBar style="position: relative;z-index: 99;" backgroundColor="#fff" title-color="#000" title="申请单处理"></VNavigationBar>
		<view class="body">
		  <view class="tabList">
		    <view v-for="(item, index) in tabList" :key="index" :class="{actived: item.id === activeKey}" class="tabItem"
		          @click.stop="changeTabFun(item.id)">
		      {{ item.title }}
		      <view v-if="activeKey === item.id" class="activeLine"></view>
		    </view>
		  </view>
		  <view class="orderList">
		    <scroll-view scroll-y="true" style="height: 100%" class="itemContent" @scrolltolower="onReachBottomCus"
		                 refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
		      <order-card v-for="(item, index) in orderList" :titleText="(0==activeKey || 1==activeKey)?'配件申请单':(2==activeKey)?'领料单':'退料单'" :key="index" :order="item" @childEvent="viewDetail" ></order-card>
		      <view style="text-align: center" v-if="orderList.length==0">
		        <image class=""  src="@/static/images/nothing.png" ></image>
		      </view>
		    </scroll-view>
		  </view>
		</view>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'
	import tabBarVue from '@/components/tabBar/tabBar.vue'
	import OrderCard from "@/components/applyCard.vue";
	import request from '@/utils/request';
	import {getUserInfo} from '@/utils/auth';
	export default {
		components: {
		  OrderCard,
		  tabBarVue,
		  VNavigationBar
		},
		data() {
			return {
				activeKey: 0,
				pageNo: 1,
				pageSize: 10,
				total: 0,
				//下来刷新状态
				isTriggered:false,
				tabList: [
				  {
				    id: 0,
				    title: '已提交'
				  },
				  {
				    id: 1,
				    title: '未通过'
				  },
				  {
				    id: 2,
				    title: '待领料'
				  },
				  {
				    id: 3,
				    title: '待退料'
				  },
				],
				orderList: [
					// {
					// 	carNo: "川E795C0",
					// 	createTime: '2024-10-20 12:00',
					// 	ticketsStatus: '05',
					// 	remark: '大厦预订奴化时间内丢进爱上牛津阿斯顿你'
					// },
					// {
					// 	carNo: "川E795C1",
					// 	createTime: '2024-10-20 12:00',
					// 	ticketsStatus: '02',
					// 	remark: '大厦预订奴化时间内丢进爱上牛津阿斯顿你'
					// },
					// {
					// 	carNo: "川E795C2",
					// 	createTime: '2024-10-20 12:00',
					// 	ticketsStatus: '01',
					// 	remark: '大厦预订奴化时间内丢进爱上牛津阿斯顿你'
					// }
				],
        userInfo:null,
			};
		},
    onLoad(){
      this.userInfo = getUserInfo()
      console.log(this.userInfo)
    },
    onShow(){
      this.onRefresherrefresh()
    },
		methods:{
			changeTabFun(id) {
			  this.activeKey = id
			  this.onRefresherrefresh()
			},
      /**
       * 上滑加载数据
       */
      onReachBottomCus() {
        //判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
        if (this.pageNo * this.pageSize >= this.total) {
          uni.$u.toast('没有更多数据了')
          return
        }
        //页码+1,调用获取数据的方法获取第二页数据
        this.pageNo++
        //此处调用自己获取数据列表的方法
        this.getOrderList()
      },
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh(){
			  this.isTriggered = true
			  this.pageNo = 1
			  this.total = 0
			  this.orderList = []
			  this.getOrderList()
			},
      /**
       * 查看申请单详情
       */
      viewDetail(item){
			  if(0==this.activeKey || 1==this.activeKey){
			    //配件申请单详情
          uni.navigateTo({
            url: '/pages-repair/applyList/todoDetail?viewType=apply&id='+item.id
          })
        }else if(2==this.activeKey){
			    //领料单详情
          uni.navigateTo({
            url: '/pages-repair/applyList/todoDetail?viewType=receive&canOperate=true&id='+item.id
          })
        }else {
          //退料单详情
          uni.navigateTo({
            url: '/pages-repair/applyList/todoDetail?viewType=back&canOperate=true&id='+item.id
          })
        }
      },
      /**
       * 查数据
       */
			getOrderList(){
        let url=""
        let params = {
          pageNo:this.pageNo,
          pageSize:this.pageSize
        }
        if(0==this.activeKey){
          //已提交的配件申请单
          url = "/admin-api/repair/tw/page"
          params.type="01"
        }else if(1==this.activeKey){
          //未通过的配件申请单
          url = "/admin-api/repair/tw/page"
          params.type="01"
          params.status="05"
        }else if(2==this.activeKey){
          //待确认的领料单
          url = "/admin-api/repair/so/page"
          params.soType = "02"
          params.userId = this.userInfo.id
          params.soStatus = "04"
        }else if(3==this.activeKey){
          //待确认的退料单
          url = "/admin-api/repair/so/page"
          params.soType = "04"
          params.userId = this.userInfo.id
          params.soStatus = "07"
        }
        request({
          url: url,
          method: 'get',
          params:params
        }).then((res) => {
          if (res.code == 200) {
            if(res.data.records.length > 0){
              if (this.pageNo != 1) {
                this.orderList = this.orderList.concat(res.data.records)
              } else {
                this.orderList = res.data.records
              }
            }
            //将获取的总条数赋值
            this.total = res.data.total
            this.isTriggered = false
          }
        })
			}
		}
	}
</script>

<style lang="less">
.container {
  height: 100%;
  background: #F3F5F7;
  display: flex;
  flex-direction: column;
  color: #333333;

  .body {
    flex: 1;
    height: 0;
    padding: 24rpx 32rpx;
    overflow: auto;
  }

  .tabList {
    background: #FFFFFF;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    display: flex;
    align-items: center;
    padding: 0 40rpx;

    .tabItem {
      padding: 30rpx;
      flex: 1;
      //z-index: 9999999;
      text-align: center;
      position: relative;
      font-size: 28rpx;

      &.actived {
        color: #0174F6;
      }

      .activeLine {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 96rpx;
        height: 6rpx;
        background: #0174F6;
        border-radius: 4rpx 4rpx 0rpx 0rpx;
      }
    }
  }

  .orderList {
    //padding: 30rpx 0;
    padding-top: 10rpx;
    height: calc(100% - 90rpx);
    display: flex;
    flex-direction: column;
    row-gap: 20rpx;

    .stateImg {
    }
  }
}
</style>