<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" :key="index" :order="item" @childEvent="onRefresherrefresh" @startWork="startWork"></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';
	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: '已通过'
				  },
				],
				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: '大厦预订奴化时间内丢进爱上牛津阿斯顿你'
					}
				],
			};
		},
		methods:{
			changeTabFun(id) {
			  this.activeKey = id
			  this.onRefresherrefresh()
			},
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh(){
			  this.isTriggered = true
			  this.pageNo = 1
			  this.total = 0
			  //this.orderList = []
			  this.getOrderList()
			},
			getOrderList(){

			}
		}
	}
</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>
