<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-wrap: wrap;justify-content: space-between; align-items: center;padding: 10rpx 30rpx;">
			<!-- 车队 -->
			<view class="bgimg" style="width: 329rpx;height: 410rpx;padding:10rpx 10rpx;margin-top: 15rpx;font-size: 26rpx;" v-for="(item, index) in car">
				<view style="display: flex;align-items: center;">
					<p style="font-size: 26rpx;font-weight: 600;">{{ index + 1 }}.</p>
					<image style="width: 104rpx; height: 68rpx;" src="../../../../static/images/carList/morencar.png"></image>
					<view style="margin-left: 7rpx;">
						<p style="font-size: 28rpx;font-weight: 600;">{{ item.clph }}</p>
						<span style="font-size: 22rpx;color: #999999;">{{ item.cp }}</span>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 10rpx;color: #7D858E;">
					<span>驾驶员</span>
					<p style="font-weight: 600;color: #000;">{{ item.xm }}</p>
				</view>

				<view style="display: flex;justify-content: space-between;margin-top: 10rpx;color: #7D858E;">
					<span>派出状态</span>
					<p style="color: #2ACC45;font-weight: 600;">{{ item.pczt }}</p>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 10rpx;color: #2ACC45;">
					<span style="color: #7D858E;">长期在外值班</span>
					<p style="font-weight: 600;color: #000;">{{ item.sfzwzb }}</p>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 10rpx;color: #7D858E;">
					<span>车辆状态</span>
					<p style="font-weight: 600;color: #000;">{{ item.clzt }}</p>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 10rpx;color: #7D858E;">
					<span>所在分站</span>
					<p>{{ item.szfz }}</p>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 10rpx;color: #7D858E;">
					<span>单位</span>
					<span>{{ item.departmentName }}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { listVehicleInfo } from '@/api/car/car.js';
export default {
	data() {
		return {
			car: [],
			keyword: '',
			name: ''
		};
	},
	onLoad(options) {
		let name = options.name;
		this.name = name;
		this.getlistcar();
	},
	methods: {
		getlistcar() {
			listVehicleInfo({ szfz: this.name }).then(res => {
				this.car = res.rows;
			});
		}
	},
	watch: {
		keyword(newdata, olddata) {
			let that = this;
			//防抖函数
			clearTimeout(that.timer);
			that.timer = setTimeout(function() {
				if (newdata === '') {
					//发请求 请求全部
					listVehicleInfo({ szfz: that.name }).then(res => {
						that.car = res.rows;
					});
				} else {
					//发请求 请求车队名字
					listVehicleInfo({ clph: newdata }).then(res => {
						that.car = res.rows;
					});
				}
			}, 600);
		}
	}
};
</script>

<style lang="scss">
page {
	.bgimg {
		border-radius: 30rpx;
		background-color: #ffffff;
	}
}
</style>
