<template>
	<view class="car-class">
		<view class="page-top" :style='{ justifyContent: "center" }'>

			<!-- 返回上一级页面信息 -->
			<view class='go-back-page' @click='pageBack'>返回</view>

			<!-- 人员/车辆/我的组件显示的表头信息 -->
			<view class="other-title-class">
				车辆管理
			</view>
		</view>
		<!-- <view @click="goadd('add')"
			style="width: 100%; display: flex;color: white;background: #327dfb; justify-content: center; margin: 10px 0px; box-sizing: border-box; padding: 10px;font-weight: bold;border-radius: 8px;">
			<text> + 新增车辆</text>
		</view> -->

		<!-- 搜索框-tab切换代码信息 -->
		<view class="search-input-tab-class">

			<!-- 搜索框代码信息 -->
			<view class="input-class">

				<!-- 搜索 icon -->
				<view class="search-icon">
					<image src="../../indexCom/img/sousuo.svg" mode=""></image>
				</view>

				<!-- 搜索框 -->
				<view class="search-input">
					<input type="text" placeholder="请输入车牌号" v-model='searchValue' />
				</view>
			</view>

			<!-- tab 信息 -->
			<view class="tab-choose-class">

				<view class="tab-content" @click="tabChoose(item, index)" v-for='(item, index) in tabList' :key='index'>

					<!-- tab 名称信息 -->
					<view class='tab-name-class' :style='{ color: index + 1 == tabValue ? "#101A3E" : "#8D90A6" }'>
						{{ item }}

						<view class="icon-tab" v-if='index == 1'>
							<image src="../../indexCom/img/xialajiantou.svg" mode=""></image>
						</view>
					</view>

					<!-- 名称下 icon -->
					<view class="tab-icon"
						:style='{ background: index + 1 == tabValue ? "linear-gradient( 180deg, #054DF3 0%, #55A3FF 100%)" : "" }'>
					</view>
				</view>
			</view>
		</view>

		<!-- list 列表信息（车辆列表） -->
		<view class='car-list-class'>

			<!-- 滚动 view -->
			<scroll-view :refresher-triggered="trigger" @scrolltolower="loadMore" @refresherrefresh="refreshList"
				:scroll-top="scrollTop" refresher-enabled="true" refresher-background="transparent" scroll-y="true"
				class="scroll-view-class">

				<!-- 列表信息 -->
				<car-info-com v-if="listData.length>0" @goCarDetails='goCarDetails' :buttonTabValue='buttonTabValue'
					:listData="listData" ref='carInfoCom'></car-info-com>
				<view style="text-align: center" v-if="listData.length==0">
					<image class="" src="../../../static/images/nothing.png"></image>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 车辆信息卡片组件
	import carInfoCom from './carInfoCard.vue';
	import request from '@/utils/request'
	export default {
		components: {
			// 车辆信息卡片组件
			carInfoCom
		},
		data() {
			return {
				//是否是从首页数据统计跳过来的
				fromIndex: false,
				// 距离顶部的位置信息
				scrollTop: 0,
				// 输入框搜索内容信息
				searchValue: '',
				// tab 当前值
				tabValue: 1,
				// 按钮类型 tab 值
				buttonTabValue: 1,
				// 控制刷新启动
				trigger: false,
				//车辆所属课程类型
				courseType: null,
				tabList: ["全部", "类型"],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				courseList: ["C1", "C2"],
				total: 0,
				listData: [],
			}
		},
		watch: {
			searchValue(newval) {
				this.refreshList()
			},
			courseType(newval) {
				this.refreshList()
			}
		},
		onLoad(data) {
			if (data.fromIndex) {
				this.fromIndex = data.fromIndex
				this.queryParams.type = "car"
				this.queryParams.timeType = data.timeType
				if (data.coachId) {
					this.queryParams.coachId = data.coachId
				}
				if (data.startTime) {
					this.queryParams.startTime = data.startTime
					this.queryParams.endTime = data.endTime
				}
			}
		},
		mounted() {
			this.getCarList()
		},
		created() {},
		methods: {
			/**
			 * @description 跳转车辆详情页面信息
			 */
			goCarDetails(record, index) {
				// 跳转
				uni.navigateTo({
					url: '/pages/internalManagement/carManagement/carDetails?id=' + record.id
				})
			},

			/**
			 * @description 获取车辆列表
			 */
			getCarList() {
				let url = "/admin-api/drivingSchool/system/car/list"
				this.queryParams.courseType = this.courseType
				if (this.fromIndex) {
					//来源首页
					url = "/admin-api/train/indexGetTrainList"
					this.queryParams.searchValue = this.searchValue
				} else {
					this.queryParams.carNo = this.searchValue
				}
				request({
					url: url,
					method: 'get',
					params: this.queryParams
				}).then((res) => {
					this.trigger = false
					this.total = res.data.total
					if (res.code == 200) {
						res.data.records.map(item => {
							item.showMore = false
						})
						if (this.queryParams.pageNum != 1) {
							this.listData = this.listData.concat(res.data.records)
						} else {
							this.listData = res.data.records
						}
					}
				})
			},

			/**
			 * @description 触底触发刷新事件
			 */
			loadMore() {
				//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
				if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
					uni.$u.toast('没有更多数据了')
					return
				}
				//页码+1,调用获取数据的方法获取第二页数据
				this.queryParams.pageNum++
				this.getCarList()
			},

			/**
			 * @description 刷新list列表信息
			 */
			refreshList() {
				this.trigger = true
				this.queryParams.pageNum = 1
				this.total = 0
				this.getCarList()
			},

			/**
			 * @description 点击 tab 进行切换页面信息
			 * @param {String, Number}
			 */
			tabChoose(item, index) {
				this.tabValue = index + 1
				if (2 == this.tabValue) {
					//弹出选择课程科目
					uni.showActionSheet({
						itemList: this.courseList,
						success: ({
							tapIndex
						}) => {
							this.courseType = this.courseList[tapIndex]
							this.tabList[1] = this.courseType
							this.$forceUpdate()
						}
					})
				} else {
					this.courseType = ""
					this.tabList[1] = "类型"
					this.$forceUpdate()
				}
			},
			getback() {
				uni.navigateBack({
					delta: 1,
				})
			},
			goadd(type, id) {
				uni.navigateTo({
					url: '/pages/internalManagement/carManagement/informationAdd?type=' + type + '&id=' + id
				})
			},
			pageBack() {
				uni.navigateBack({
					delta: 1 // delta值为1时表示返回的页面层数
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.car-class {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F1F3F6;
		width: 100%;
		height: 100%;
	}

	.car-list-class {
		width: 96%;
		flex-grow: 1;
		padding: 20rpx 0 0 0;
		overflow-y: scroll;

		.scroll-view-class {
			height: 100%;
			width: 100%;
		}
	}

	.search-input-tab-class {
		width: 100%;
		height: 194rpx;
		background: white;
		flex-shrink: 0;

		.tab-choose-class {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 12rpx 20rpx 0 20rpx;
			border-top: 1rpx solid #F5F5F5;

			.tab-content {
				font-size: 28rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.tab-name-class {
					display: flex;
					align-items: center;

					.icon-tab {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 32rpx;
						height: 32rpx;

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

			.tab-icon {
				width: 66rpx;
				height: 8rpx;
				margin-top: 8rpx;
			}
		}

		.input-class {
			width: 86%;
			margin: 24rpx 0 12rpx 7%;
			height: 66rpx;
			background: #F5F6F9;
			border: 2rpx solid #F0F0F0;
			border-radius: 40rpx;
			display: flex;
			align-items: center;

			.search-icon {
				margin: 0 18rpx 0 30rpx;
				height: 28rpx;
				width: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;

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

			.search-input {
				height: 100%;
				flex: 1;
				display: flex;
				align-items: center;

				input {
					width: 98%;
				}
			}
		}
	}

	.page-top {
		flex-shrink: 0;
		width: 100%;
		height: 160rpx;
		display: flex;
		align-items: center;
		color: white;
		flex-shrink: 0;
		background: linear-gradient(180deg, #054DF3 0%, #55A3FF 100%);

		.go-back-page {
			position: absolute;
			left: 20rpx;
		}
	}
</style>