<template>
	<view class="page">
		<view class="list_box" v-for="(item,index) in data" :key="index">
			<view class="list_top">
				<view class="unit_tags">管理单位</view>
				<view class="unit_name">{{item.organizationName}}</view>
			</view>
			<view class="report_time">{{item.statDate || ''}}<text style="margin-left:16rpx;">{{item.statPeriod || ''}}</text>
			</view>
			<view @click="item2.show = !item.show" class="list_item_box" v-for="(item2,index2) in item.highwaySubDataList"
				:key="item2.id">
				<view class="list_item">
					<view class="list_item_label">收费站名称：</view>
					<view class="list_item_cnt">{{item2.tollStationName}}{{item2.show}}</view>
				</view>
				<view class="content" :style="!item2.show ? '' : 'display:none;'">
					<view class="list_item">
						<view class="list_item_label">高速公路名称：</view>
						<view class="list_item_cnt">{{item2.highwayName}}</view>
					</view>
					<view class="list_item">
						<view class="list_item_label">收费站入口车辆数：</view>
						<view class="list_item_cnt">{{item2.entranceVehicleCount}}</view>
					</view>
					<view class="list_item">
						<view class="list_item_label">收费站出口车辆数：</view>
						<view class="list_item_cnt">{{item2.exitVehicleCount}}</view>
					</view>
					<view class="list_item">
						<view class="list_item_label">免收通行费车辆数：</view>
						<view class="list_item_cnt">{{item2.tollExemptVehicleCount}}</view>
					</view>
					<view class="list_item">
						<view class="list_item_label">免收通行费金额：</view>
						<view class="list_item_cnt">{{item2.tollExemptAmount}}</view>
					</view>
					<view class="list_item">
						<view class="list_item_label">出口通行费：</view>
						<view class="list_item_cnt">{{item2.exitToll}}</view>
					</view>
					<view class="list_item">
						<view class="list_item_label">报送人员及联系方式：</view>
						<view class="list_item_cnt">{{item2.submitPersonnelContact}}</view>
					</view>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="act_btn_box">
				<view class="act_btn blue">编辑</view>
				<view class="act_btn" style="margin-right: 30rpx;">查看详情</view>
			</view>
		</view>
		<uni-load-more iconType="circle" :status="status" @clickLoadMore="loadMore"
			:contentText="contentText"></uni-load-more>
		<!-- 筛选 -->
		<view class="foot_btn_box">
			<view @click="goPage('/pages/highway/runData/form')" class="act_btn"><uni-icons type="plusempty" size="30"
					color="#fff"></uni-icons>新建</view>
			<view @click="showSearch" class="act_btn btn1"><uni-icons type="search" size="30" color="#2D8CF0"></uni-icons>查询
			</view>
		</view>
		<!-- 筛选 -->
		<view class="pop_box">
			<uni-popup ref="popup" style="width: 100%;" background-color="#fff">
				<view class="pop_title">
					查询
				</view>
				<view class="popup-content">
					<view class="cont_tit">
						统计起止时间
					</view>
					<view class="time_box">
						<uni-datetime-picker v-model="timeRange" type="daterange" @maskClick="maskClick" />
					</view>
					<view class="cont_tit picker">
						统计时段
					</view>
					<view class="picker_box">
						<uni-data-picker v-model="unit" :localdata="unitData" :map="{text:'deptName',value:'deptId'}"
							popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
					</view>
				</view>
				<view class="btn_box">
					<p class="btn" @click="searchReset">重置</p>
					<p class="btn" @click="searchList">确认</p>
				</view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				data: [],
				current: 0,
				size: 10,
				hasMore: true,
				status: '',
				query: {
					statDateStart: '',
					statDateEnd: '',
					statPeriod: ''
				},
				timeRange: [],
				contentText: {
					contentdown: "点击查看更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了",
				},
			}
		},
		onLoad() {
			this.loadMore();
		},
		onUnload() {
			this.hasMore = true;
			this.data = [];
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.data = [];
			this.current = 0;
			this.hasMore = true;
			this.loadMore();
		},
		methods: {
			//确认查询
			searchList() {
				this.data = [];
				this.current = 0;
				this.hasMore = true;
				this.loadMore();
			},
			//重置搜索
			searchReset() {

			},
			//查询
			showSearch() {
				this.$refs.popup.open('bottom')
			},
			loadMore() {
				if (this.hasMore) {
					this.current = this.current + 1;
					this.status = 'loading';
					let params = '';
					Object.keys(this.query).map(key => {
						params = params + '&' + key + '=' + this.query[key]
					})
					this.$request(getApp().globalData.baseUrl + '/api/biz/highwayParentDataController/list?page=' + this.current +
						'&pageSize=' + this.size + '&_t=' + Date.parse(new Date()) + params, {}, 'GET').then(res => {
						if (res.code == 200) {
							res.data.list.map(item => {
								item.highwaySubDataList.map(item2 => {
									item2.show = false;
								})
							})
							console.log(res.data.list)
							this.data = this.data.concat(res.data.list);
							if (res.data.list.length == 0 || res.data.totalCount < this.size) {
								this.hasMore = false;
								this.status = 'nomore';
							} else {
								this.status = 'more';
							}
							uni.stopPullDownRefresh();
						} else {
							this.status = 'more';
							uni.stopPullDownRefresh();
						}
					}).catch(() => {
						this.status = 'more';
						uni.stopPullDownRefresh();
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		padding: 30rpx 30rpx 0;
	}

	.list_box {
		background-color: #fff;
		border-radius: 30rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;

		.list_top {
			display: flex;
			margin-bottom: 30rpx;

			.unit_tags {
				height: 37rpx;
				color: #E37616;
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				background: #FFF7E4;
				border-radius: 10rpx;
				border: 1rpx solid #EF9A4F;
				padding: 0 11rpx;
			}

			.unit_name {
				color: #333333;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				line-height: 48rpx;
				margin-left: 20rpx;
				word-break: break-all;
			}
		}

		.report_time {
			color: #999999;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 48rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.list_item_box {
			padding: 30rpx 30rpx 0;
			background: #F8F8F8;
			border-radius: 30rpx;
			margin-bottom: 30rpx;
		}

		.list_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 0 30rpx;

			.list_item_label {
				color: #666666;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 48rpx;
			}

			.list_item_cnt {
				color: #333333;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 48rpx;
				text-align: right;
				margin-left: 20rpx;
				word-break: break-all;
			}
		}

		.act_btn_box {
			display: flex;
			flex-direction: row-reverse;
			margin: 10rpx 0;

			.act_btn {
				width: 180rpx;
				color: #666666;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 70rpx;
				background: #FFFFFF;
				border-radius: 100rpx;
				border: 1rpx solid #C1C1C1;
				text-align: center;

				&.blue {
					color: #fff;
					background: #2D8CF0;
					border-color: #2D8CF0;
				}
			}
		}
	}

	.foot_btn_box {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 20rpx;
		display: flex;
		justify-content: space-around;

		.act_btn {
			width: 329rpx;
			line-height: 90rpx;
			display: flex;
			justify-content: center;
			color: #FFFFFF;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			background: #2D8CF0;
			border-radius: 100rpx;
			border: 1px solid #2D8CF0;

			.txt {
				margin-left: 9rpx;
			}

			&.btn1 {
				color: #2D8CF0;
				background: #F6F6F6;
			}
		}
	}

	.pop_box {
		.pop_title {
			width: 100%;
			display: flex;
			justify-content: center;
			margin: 30rpx 0;
		}

		.popup-content {
			// display: flex;
			// flex-direction: column;

			.cont_tit {
				width: 100%;
				display: flex;
				margin-bottom: 30rpx;
				margin-left: 30rpx;

				&.picker {
					margin-top: 30rpx;
				}
			}

			.time_box {
				width: 690rpx;
				margin: 0 auto;

				/deep/ .uni-date-x--border {
					border-radius: 30rpx;

					.uni-date-x {
						background: transparent;
					}
				}
			}

			.picker_box {
				width: 690rpx;
				margin: 0 auto;

				/deep/.input-value-border {
					border-radius: 30rpx;
				}
			}
		}

		.btn_box {
			width: 100%;
			height: 120rpx;
			display: flex;
			margin-top: 20px;
			align-items: center;
			justify-content: center;

			.btn {
				width: 320rpx;
				height: 78rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 1rpx solid #D73232;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #D73232;

				&:last-child {
					background: #D73232;
					margin-left: 50rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>