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

<template>
	<view class="content">
    <view style="background: #317dfa">
      <VNavigationBar title="扣车管理"></VNavigationBar>
      <view class="search-box">
        <view class="s-input">
          <uni-icons type="search" color=" #999999" size="16"></uni-icons>
          <input type="text" v-model="licenseNum" placeholder="车牌号搜索">
          <uni-icons @click="licenseNum = ''" type="clear" color="#8E8E93"></uni-icons>
        </view>
        <view class="search-button" @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>
		<view class="dil">
			<view class="ques" v-if="orderList.length== 0 ">
				<image src="../../static/quesheng.png" mode=""></image>
			</view>
      <view class="boxa-box" v-for="(item,index) in orderList" :key="index">
        <view class="boxa" :style="{borderRadius: gindex === 3 ? '10px 10px 0 0' : '10px'}">
          <view class="car-card-line">
            <view class="car-card-line">
              <view class="car-card">车牌号</view>
              <view class="hei-title">{{item.licenseNum || ''}}</view>
            </view>
            <view class="car-card-state" :class="8 == gindex ? 'state-blue' : 3 == gindex ? 'state-green' : 'state-red'">{{ 8 == gindex ? '已还车' : 3 == gindex ? '已解扣' : '扣车中' }}</view>
          </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>
        <view class="janniu" v-if="gindex == 3" @click="getjiji(item.id)">
          <text>立即还车</text>
        </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';
  import VNavigationBar from 'components/VNavigationBar.vue'
	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,
      VNavigationBar
		},
		onLoad(option) {
      if(option.id){
        this.gindex = option.id
      }
			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">
.car-card-line{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.car-card{
  font-size: 15px;
  font-weight: bold;
  width: 70px;
  height: 28px;
  line-height: 28px;
  border-radius: 10px 0 10px 0;
  background: #edf3fe;
  color: #4487fa;
  text-align: center;
}
.car-card-state{
  font-size: 15px;
  width: 70px;
  height: 28px;
  line-height: 28px;
  text-align: center;
}
.state-blue{
  background: #edf3fe;
  color: #4487fa;
}
.state-red{
  background: #fbeced;
  color: #d63338;
}
.state-green{
  background: #edf7ec;
  color: #48be3a;
}

	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #f6f7fc;
		box-sizing: border-box;
		//padding-top: 45px;
	}

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

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

	}

	.dil {
		background-color: #f6f7fc;
		box-sizing: border-box;
		padding: 15px 12px;
    height: calc(100% - 155px);
    overflow-y: auto;
	}

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

  .search-box{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-button{
    width: 15%;
    height: 30px;
    font-size: 14px;
    margin: 10px;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 15px;
  }

	.s-input {
    margin-left: 10px;
    width: 78%;
    height: 56rpx;
    background: #fff;
    border-radius: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0px 10px;

    input {
      margin-left: 5px;
      flex: 1;
      width: 0;
      font-size: 14px;
      color: #999999;

    }
	}

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

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

	.gang {
		width: 80%;
		height: 3px;
		margin: 1px auto;
		border-radius: 12px;
		background: white;
	}

	.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-size: 18px;
		font-weight: bold;
		justify-content: center;
	}

  .boxa-box{
    box-sizing: border-box;
    width: 95%;
    margin: 8px auto;
  }
	.boxa {
    background: #FFFFFF;
    padding: 15px;
    box-shadow: 0px 0px 8px -5px #888888;
}

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

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

	.hei-title {
    margin-left: 10px;
		font-size: 18px;
		font-weight: 600;
		color: #363636;
	}

	.yihang {
		font-size: 16px;
		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: 100%;
		height: 45px;
		background: #317cfa;
		border-radius: 0 0 10px 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 16px;
	}

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

	}
</style>
