<!-- 历史订单列表-->

<template>
	<view class="content">
		<view class="top-icon">
			<view class="h-text" @click="getback()">返回</view>
			<view class="s-input">
				<uni-icons type="search" color=" #999999" size="16"></uni-icons>
				<input type="text" v-model="licenseNum" placeholder="车牌号搜索">
			</view>
			<view class="h-text" @click="getlist()">搜索</view>
		</view>
		<view class="top-tap">
			<!-- 	<view class="tap-box" :class="{'cc' : gindex == item.id }" v-for="(item,index) in arrtap" :key="index"
				@click="getindex(item.id)">
				<view style="margin-bottom: 4px;">{{item.text}}</view>
				<view class="gang" v-if="item.id == gindex"></view>
			</view> -->
			<view class="tap-box" :class="{'cc' : gindex == 9 }" @click="getindex(9)">
				<view style="margin-bottom: 4px;">扣车中 ({{one}}) </view>
				<view class="gang" v-if="9 == gindex"></view>
			</view>
			<view class="tap-box" :class="{'cc' : gindex == 3 }" @click="getindex(3)">
				<view style="margin-bottom: 4px;">已解扣 ({{two}}) </view>
				<view class="gang" v-if="3 == gindex"></view>
			</view>
			<view class="tap-box" :class="{'cc' : gindex == 8 }" @click="getindex(8)">
				<view style="margin-bottom: 4px;">已还车 ({{three}}) </view>
				<view class="gang" v-if="8 == gindex"></view>
			</view>
		</view>
		<view class="dil">
			<view class="ques" v-if="orderList.length== 0 ">
				<image src="../../static/quesheng.png" mode=""></image>
			</view>
			<view class="boxa" v-for="(item,index) in orderList" :key="index">
				<view class="hei-title">{{item.licenseNum || ''}}</view>
				<view class="box-bs">
					<view class="zc">车主：{{item.connectionName || ''}}</view>
					<view class="zc">联系电话：{{item.connectionPhone || ''}}</view>
				</view>
				<view class="yihang">扣车时间：{{item.createTime || ''}}</view>
				<view class="yihang">扣车地点：{{item.rescuePosition || ''}}</view>

				<view class="yihang">取车地点：{{item.kcPosition || ''}}</view>
				<view class="right-box">
					<view class="janniu" v-if="gindex == 3" @click="getjiji(item.id)">
						<text>还车</text>
					</view>
				</view>
			</view>

			<!-- 		<view class="boxt" v-for="(item,index) in orderList" :key="index" @click="godetail(item.id)">
				<view class="boxt-left">
					<view class="left-lan">
						<view class="">{{item.rescueTypeStr}}</view>
					</view>
					<view class="text1">{{item.kcPosition}}</view>
					<view class="text1">
						<text>姓名：</text>
						<text style="font-weight: 400;">{{item.connectionName}}</text>
					</view>
					<view class="text1">
						<text>手机号：</text>
						<text style="font-weight: 400;">{{item.connectionPhone}}</text>
					</view>
					<view class="text1">
						<text>车牌号：</text>
						<text style="color: #207efe;"> {{item.licenseNum}}</text>
					</view>
					<view class="text1">
						<text>时间：</text>
						<text style="font-weight: 400;"> {{item.rescueTime}}</text>
					</view>

				
				</view>
				<view class="boxt-right">

					<view class="aniiu" v-if="gindex == 3">
						还车
					</view>
				</view>
			</view> -->


			<view style="width: 100%; height: 60px;"></view>
		</view>

		<!-- <tabBar></tabBar> -->
	</view>
</template>

<script>
	import tabBar from '../../components/tabBar/tabBar.vue'
	import request from '../../utils/request';
	export default {
		data() {
			return {
				one: 0,
				two: 0,
				three: 0,
				gindex: 9,
				orderList: [],
				licenseNum: '',
				rescueStatus: '',
				total: 0,
				pageNum: 1, //第几页
				pageSize: 10, //一页多少张
				totalPages: 0, //总数
				arrtap: [{
						text: '扣车中',
						id: 9
					},
					{
						text: '已解扣',
						id: 3
					},
					{
						text: '已还车',
						id: 8
					},

				],
				arrbox: []
			}
		},
		components: {
			tabBar,
		},
		onLoad() {
			this.getthree()
			this.getlist()
		},
		onReachBottom() {
			console.log('执行了');
			if (this.orderList.length >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})

			} else {
				this.pageNum++

				this.getlist()
			}
		},
		methods: {
			getthree() {

				request({
					url: '/app/rescueInfo/getRescueList',
					method: 'get',
					params: {
						licenseNum: '',
						rescueStatus: 9,
						pageSize: 10,
						pageNum: 1,
					}
				}).then((res) => {

					if (res.code == 200) {
						this.one = res.total
					}

				})
				request({
					url: '/app/rescueInfo/getRescueList',
					method: 'get',
					params: {
						licenseNum: '',
						rescueStatus: 3,
						pageSize: 10,
						pageNum: 1,
					}
				}).then((res) => {

					if (res.code == 200) {
						this.two = res.total
					}

				})
				request({
					url: '/app/rescueInfo/getRescueList',
					method: 'get',
					params: {
						licenseNum: '',
						rescueStatus: 8,
						pageSize: 10,
						pageNum: 1,
					}
				}).then((res) => {

					if (res.code == 200) {
						this.three = res.total
					}

				})
			},
			godetail(id) {

			},
			getjiji(id) {
				request({
					url: '/app/rescueInfo/hcOpen',
					method: 'post',
					params: {
						rescueId: id
					}
				}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: "操作成功"
						})
						this.orderList = []
						this.getlist()
						this.getthree()
					}
				})
			},
			getlist() {
				let data = {
					licenseNum: this.licenseNum,
					rescueStatus: this.gindex,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
				}
				request({
					url: '/app/rescueInfo/getRescueList',
					method: 'get',
					params: data
				}).then((res) => {

					if (res.code == 200) {
						if (this.pageNum != 1) {
							this.orderList = this.orderList.concat(res.rows)
						} else {
							this.orderList = res.rows
						}
						this.totalPages = res.total


					}

				})
			},
			getback() {
				uni.navigateBack({
					delta: 1,
				})
			},
			getindex(index) {
				this.orderList = []
				this.gindex = index
				this.getlist()
			},
		}

	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding-top: 45px;
	}

	.top-icon {
		box-sizing: border-box;
		width: 100%;

		padding: 5px 14px;
		background: white;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.dil {
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding: 15px 12px;
	}

	.h-text {
		font-size: 14px;
		font-weight: 400;
		color: #999999;
	}

	.s-input {
		width: 78%;
		height: 30px;
		background: #F3F3F3;
		border-radius: 50px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0px 10px;

		input {
			margin-left: 5px;
			width: 80%;
			font-size: 14px;
			color: #999999;
		}
	}

	.top-tap {
		width: 100%;
		background: white;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-top: 5px;
	}

	.tap-box {
		width: 33%;
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		text-align: center;
	}

	.gang {
		width: 80%;
		height: 5px;
		margin: 0 auto;
		border-radius: 12px;
		background: linear-gradient(87deg, #B6E1FF 0%, #339DFF 100%);
	}

	.d-box {
		width: 100%;
		// height: 100px;
		background: white;
		border-radius: 10px;
		margin-bottom: 15px;
		box-sizing: border-box;
		padding: 8px;
		position: relative;
		overflow: hidden;
		padding-top: 30px;
	}

	.d-y-top {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 40px;
		height: 20px;
		border-radius: 0px 0px 6px 0px;
		background-color: #339DFF;
		color: white;
		font-size: 12px;
		text-align: center;
	}

	.t-right {
		width: 100%;
		display: flex;
		justify-content: flex-end;

		.bq {
			width: 55px;
			height: 20px;
			background: #FFD7D7;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 400;
			color: #FF4C4C;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.bq2 {
			width: 55px;
			height: 20px;
			background: #CDE2FF;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 400;
			color: #3289FF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.d-left {
		margin-left: 10px;
		display: flex;
		font-size: 16px;
		font-weight: bold;
		color: #666666;
		margin-bottom: 10px;
	}

	.t-left {
		margin-left: 10px;
		display: flex;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-bottom: 5px;
	}

	.x-left {
		margin-left: 10px;
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
	}

	.cc {
		font-weight: bold;
	}

	.hong {
		font-size: 16px;
		font-weight: 400;
		color: #F85021;
	}

	.ques {
		margin: 0px auto;
		margin-top: 40px;
		width: 80%;

		image {
			width: 100%;
		}
	}

	.boxt {
		// height: 110px;
		width: 100%;
		background-color: white;
		border-radius: 6px;
		margin-top: 14px;
		overflow: hidden;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-bottom: 15px;
	}

	.boxt-left {
		width: 80%;
		height: 100%;
	}

	.left-lan {
		width: 50px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #207EFE;
		font-size: 14px;
		color: white;
		border-radius: 0px 0px 6px 0px;
	}

	.text1 {
		margin-left: 24px;
		margin-top: 5px;
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.lanzi {
		font-weight: bold;
		color: #4C98FF;
	}

	.text2 {
		margin-left: 24px;
		margin-top: 5px;
		color: #333333;
		font-size: 16px;
		font-weight: 400;
		color: #333333;
	}

	.boxt-right {
		width: 20%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zhtai {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 60px;
		height: 25px;
		box-sizing: border-box;
		background: #FFD7D7;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FF4C4C;
		font-size: 14px;

	}

	.dianhua {
		position: absolute;
		bottom: -110px;
		right: 10px;
		display: flex;
		font-size: 14px;
		font-weight: 400;
		color: #3289FF;

	}

	.ticon {


		width: 12px;
		height: 13px;
		margin-right: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.aniiu {
		width: 55px;
		height: 55px;
		border-radius: 50%;
		background: #3289FF;
		color: white;
		display: flex;
		align-items: center;
		font-style: 18px;
		font-weight: bold;
		justify-content: center;
	}

	.boxa {
		background: #FFFFFF;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 15px;
		width: 95%;
		border-radius: 10px;
		margin: 10px auto;
	}

	.box-bs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10px auto;
	}

	.zc {
		font-size: 14px;
		font-weight: 400;
		color: #363636
	}

	.hei-title {
		font-size: 16px;
		font-weight: 600;
		color: #363636;
	}

	.yihang {
		font-size: 14px;
		font-weight: 400;
		color: #363636;
		margin-top: 10px;
	}

	.right-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.janniu {
		width: 120px;
		height: 30px;
		background: #FF4D4F;
		border-radius: 26px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 14px;
	}

	.ques {
		width: 90%;
		margin: 100px auto;

	}
</style>