<template>
	<view>
		<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="应急车辆" :autoBack="true">
		
		</u-navbar>
		<u-sticky bgColor="#fff" style="padding: 20rpx;"><u-search placeholder="请输入车队名称" :clearabled="false" v-model="keyword" :showAction="false"></u-search></u-sticky>
		<view style="display: flex; flex-direction: column; align-items: center;">
			<!-- 车队 -->
			<view class="bgimg" style="width: 704rpx;height: 444rpx;margin-top: 20rpx;" v-for="(item, index) in carList" :key="index">
				<view style="margin-top: 20rpx;margin-left: 25rpx;">
					<image style="width: 36rpx; height: 32rpx;" src="../../../static/images/carList/cheduiicon.png"></image>
					<span style="font-size: 36rpx;color: #333333;font-weight: 600;margin-left: 20rpx;">{{ item.teamName }}</span>
				</view>
				<view style="display: flex; justify-content: space-around;margin-top: 10rpx;">
					<view>
						<p style="font-weight: 600;font-size: 50rpx;color: #4996FF;">
							{{ item.allNum }}
							<span style="font-size: 29rpx;margin-left: 6rpx;">/辆</span>
						</p>
						<span style="font-size: 26rpx;color: #999999;">采集二厂车辆总数</span>
					</view>
					<image style="width: 283rpx; height: 130rpx;" src="../../../static/images/carList/car.png"></image>
				</view>
				<!-- 总数 -->
				<view style="display: flex;justify-content: space-around;margin-top: 15rpx;">
					<view style="display: flex;align-items: center;margin-right: 20rpx;">
						<image style="width: 60rpx; height: 50rpx;" src="../../../static/images/carList/zhengchang.png"></image>
						<view style="margin-left: 25rpx;">
							<p style="font-weight: 600;font-size: 40rpx;color: #4996FF;">
								{{ item.usedNum }}
								<span style="font-size: 29rpx;margin-left: 6rpx;">/辆</span>
							</p>
							<span style="font-size: 26rpx;color: #999999;">可使用车辆</span>
						</view>
					</view>
					<view style="display: flex;align-items: center;">
						<image style="width: 60rpx; height: 50rpx;" src="../../../static/images/carList/wai.png"></image>
						<view style="margin-left: 25rpx;">
							<p style="font-weight: 600;font-size: 40rpx;color: #4996FF;">
								{{ item.cjzbNum }}
								<span style="font-size: 29rpx;margin-left: 6rpx;">/辆</span>
							</p>
							<span style="font-size: 26rpx;color: #999999;">长期在外车辆</span>
						</view>
					</view>
				</view>
				<!-- 按钮 -->
				<view style="display: flex;justify-content: flex-end;" @click="seeCar(item.teamName)">
					<view
						style="width: 220rpx;height: 60rpx; margin-right: 48rpx;margin-top: 25rpx; background: #4996FF;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;"
					>
						<span style=" font-size: 28rpx;color: #FFFFFF;">查看车队车辆</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { listCountByTeamCha } from '@/api/car/car.js';
export default {
	data() {
		return {
			carList: [],
			timer: '',
			keyword: ''
		};
	},
	watch: {
		keyword(newdata, olddata) {
			let that = this;
			//防抖函数
			clearTimeout(that.timer);
			that.timer = setTimeout(function() {
				if (newdata === '') {
					//发请求 请求全部
					listCountByTeamCha().then(res => {
						that.carList = res.data;
					});
				} else {
					//发请求 请求车队名字
					listCountByTeamCha(newdata).then(res => {
						that.carList = res.data;
					});
				}
			}, 600);
		}
	},
	onLoad() {
		this.getList();
	},
	methods: {
		seeCar(name) {
			this.$tab.navigateTo(`/pages/indexpage/Yjcar/carXiangQing/carXiangQing?name=${name}`);
		},
		getList() {
			listCountByTeamCha().then(res => {
				this.carList = res.data;
			});
		}
	}
};
</script>

<style lang="scss">
page {
	.bgimg {
		border-radius: 60rpx;
		background: url('../../../static/images/carList/bg.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
	}
}
</style>
