<template>
	<!-- 查看详情页面 -->
	<view class="detail_con">
		<view class="detail_box">
			<view class="top_box">
				<view class="top_item">
					<view class="unit_left">
						<view class="unit">管理单位</view>
						<view class="unit_name">{{roadData.organizationName}}</view>
					</view>
					<view class="unit_time">{{roadData.statDate || ''}} {{roadData.statPeriodValue || ''}}</view>
				</view>
				<view class="all_item first">
					<view class="all_left">收费站入口车辆数汇总：</view>
					<view class="all_right">{{roadData.entranceVehicleCount || ''}}</view>
				</view>
				<view class="all_item">
					<view class="all_left">收费站出口车辆数汇总：</view>
					<view class="all_right">{{roadData.exitVehicleCount || ''}}</view>
				</view>
				<view class="all_item">
					<view class="all_left">收费站入口车辆数汇总环比：</view>
					<view class="all_right" :class="roadData.entranceVehicleCountMom > 0 ? 'green' : roadData.entranceVehicleCountMom < 0 ? 'red' : ''">{{roadData.entranceVehicleCountMom ? roadData.entranceVehicleCountMom + '%' : roadData.entranceVehicleCountMom == 0 ? 0 : ''}}</view>
				</view>
				<view class="all_item">
					<view class="all_left">收费站出口车辆数汇总环比：</view>
					<view class="all_right" :class="roadData.exitVehicleCountMom > 0 ? 'green' : roadData.exitVehicleCountMom < 0 ? 'red' : ''">{{roadData.exitVehicleCountMom ? roadData.exitVehicleCountMom + '%' : roadData.exitVehicleCountMom == 0 ? 0 : ''}}</view>
				</view>
				<view class="all_item">
					<view class="all_left">收费站入口车辆数汇总同比：</view>
					<view class="all_right" :class="roadData.entranceVehicleCountYoy > 0 ? 'green' : roadData.entranceVehicleCountYoy < 0 ? 'red' : ''">{{roadData.entranceVehicleCountYoy ? roadData.entranceVehicleCountYoy + '%' : roadData.entranceVehicleCountYoy == 0 ? 0 : ''}}</view>
				</view>
				<view class="all_item last">
					<view class="all_left">收费站出口车辆数汇总同比：</view>
					<view class="all_right" :class="roadData.exitVehicleCountYoy > 0 ? 'green' : roadData.exitVehicleCountYoy < 0 ? 'red' : ''">{{roadData.exitVehicleCountYoy ? roadData.exitVehicleCountYoy + '%' : roadData.exitVehicleCountYoy == 0 ? 0 : ''}}</view>
				</view>
				<view class="con_item" v-if="roadData.highwaySubDataList"  v-for="(item,index) in roadData.highwaySubDataList" :key="index">
					<view class="spread_box" v-if="item.isSpread">
						<view class="item_con first">
							<view class="left">收费站名称：</view>
							<view class="right">{{item.tollStationName || ''}}</view>
						</view>
						<view class="item_con">
							<view class="left">高速公路名称：</view>
							<view class="right">{{item.highwayName || ''}}</view>
						</view>
						<view class="item_con">
							<view class="left">收费站入口车辆数：</view>
							<view class="right">{{item.entranceVehicleCount || ''}}</view>
						</view>
						<view class="item_content">
							<view class="content top">
								<view class="left">收费站入口车辆数环比(%)</view>
								<view class="right" :class="item.entranceVehicleCountMom > 0 ? 'green' : item.entranceVehicleCountMom < 0 ? 'red' : ''">{{item.entranceVehicleCountMom ? item.entranceVehicleCountMom + '%' :  item.entranceVehicleCountMom == 0 ? 0 : ''}}</view>
							</view>
							<view class="content">
								<view class="left">收费站入口车辆数同比(%)</view>
								<view class="right" :class="item.entranceVehicleCountYoy > 0 ? 'green' : item.entranceVehicleCountYoy < 0 ? 'red' : ''">{{item.entranceVehicleCountYoy ? item.entranceVehicleCountYoy + '%' : item.entranceVehicleCountYoy == 0 ? 0 : ''}}</view>
							</view>
						</view>
						<view class="item_con">
							<view class="left">收费站出口车辆数：</view>
							<view class="right">{{item.exitVehicleCount || ''}}</view>
						</view>
						<view class="item_content">
							<view class="content top">
								<view class="left">收费站出口车辆数环比(%)</view>
								<view class="right" :class="item.exitVehicleCountMom > 0 ? 'green' : item.exitVehicleCountMom < 0 ? 'red' : ''">{{item.exitVehicleCountMom ? item.exitVehicleCountMom + '%' : item.exitVehicleCountMom == 0 ? 0 : ''}}</view>
							</view>
							<view class="content">
								<view class="left">收费站出口车辆数同比(%)</view>
								<view class="right" :class="item.exitVehicleCountYoy > 0 ? 'green' : item.exitVehicleCountYoy < 0 ? 'red' : ''">{{item.exitVehicleCountYoy ? item.exitVehicleCountYoy + '%' :  item.exitVehicleCountYoy == 0 ? 0 : ''}}</view>
							</view>
						</view>
						<view class="item_con">
							<view class="left">免收通行费车辆数：</view>
							<view class="right">{{item.tollExemptVehicleCount || ''}}</view>
						</view>
						<view class="item_content">
							<view class="content top">
								<view class="left">免收通行费车辆数环比(%)</view>
								<view class="right" :class="item.tollExemptVehicleCountMom > 0 ? 'green' : item.tollExemptVehicleCountMom < 0 ? 'red' : ''">{{item.tollExemptVehicleCountMom ? item.tollExemptVehicleCountMom + '%' : item.tollExemptVehicleCountMom == 0 ? 0 : ''}}</view>
							</view>
							<view class="content">
								<view class="left">免收通行费车辆数同比(%)</view>
								<view class="right" :class="item.tollExemptVehicleCountYoy > 0 ? 'green' : item.tollExemptVehicleCountYoy < 0 ? 'red' : ''">{{item.tollExemptVehicleCountYoy ? item.tollExemptVehicleCountYoy + '%' : item.tollExemptVehicleCountYoy == 0 ? 0 : ''}}</view>
							</view>
						</view>
						<view class="item_con">
							<view class="left">免收通行费金额：</view>
							<view class="right">{{item.tollExemptAmount || ''}}</view>
						</view>
						<view class="item_con">
							<view class="left">出口通行费：</view>
							<view class="right">{{item.exitToll || ''}}</view>
						</view>
						<view class="item_con">
							<view class="left">报送人员及联系方式：</view>
							<view class="right">{{item.submitPersonnelContact || ''}}</view>
						</view>
						<view class="expand_box" @click="clickPack(item)">
							<uni-icons type="top" size="16" color="#2D8CF0"></uni-icons>
							<view class="tit">收起</view>
						</view>
					</view>
					<view class="no_spread" v-if="!item.isSpread" @click="handleSpread(item)">
						<view class="item_con first">
							<view class="left">收费站名称：</view>
							<view class="right">{{item.tollStationName || ''}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom_box">
				<p class="edit_btn" @click="goEditPage">编辑</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roadData:{},
			}
		},
		onLoad(options){
			let item = JSON.parse(options.item)
			console.log(item)
			let item1 = JSON.parse(JSON.stringify(item))
			if(item1.highwaySubDataList){
				item1.highwaySubDataList[0].isSpread = true; //显示展开收起按钮，false时为收起，true为展开
			}
			this.roadData = item1
			// this.getDetail()
		},
		methods: {
			//跳转到编辑
			goEditPage() {
				uni.navigateTo({
					url: '/pages/highway/runData/form?item=' + JSON.stringify(this.roadData)
				})
			},
			//点击收起按钮
			clickPack(item){
				this.$set(item,"isSpread",false)
			},
			handleSpread(item){
				this.$set(item,"isSpread",true)
			},
			getDetail(){
				this.$request(getApp().globalData.baseUrl + '/api/biz/highSpeedOperationController/selectById/' + '8A47103EE00000018772BC97AE50FFB7',{},"GET").then(res =>{
					console.log(res)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail_con{
		width: 100%;
		height: 100%;
		overflow-y: auto;
		
		.detail_box{
			width: 690rpx;
			background: #fff;
			border-radius: 30rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			margin-bottom: 50rpx;
			
			.top_box{
				width: 630rpx;
				padding: 38rpx 30rpx 0rpx;
				display: flex;
				flex-direction: column;
				
				.top_item{
					width: 100%;
					// margin-top: 38rpx;
					margin-bottom: 60rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
					
					.unit_left{
						width: 100%;
						display: flex;
						.unit{
							width: 102rpx;
							height: 37rpx;
							background: #FFF7E4;
							border-radius: 10rpx;
							border: 1rpx solid #EF9A4F;
							font-size: 20rpx;
							color: #E37616;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						
						.unit_name{
							font-size: 30rpx;
							color: #333;
							font-weight: bold;
							line-height: 48rpx;
							margin-left: 20rpx;
						}
					}
					.unit_time{
						margin-top: 30rpx;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #999999;
					}
				}
				
				.all_item{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 32rpx;
					
					&.first{
						margin-top: 0rpx;
					}
					
					&.last{
						margin-bottom: 30rpx;
					}
					
					.all_left{
						color: #666666;
						font-size: 26rpx;
					}
					
					.all_right{
						font-size: 28rpx;
						color: #333;
					}
				}
				
				.con_item{
					width: 570rpx;
					background: #F8F8F8;
					border-radius: 30rpx;
					margin: 0 auto;
					margin-top: 30rpx;
					padding: 30rpx 30rpx;
					
					.spread_box{
						width: 100%;
						.item_con{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 32rpx;
							
							&.first{
								margin-top: 0rpx;
							}
							
							.left{
								color: #666666;
								font-size: 26rpx;
							}
							.right{
								font-size: 28rpx;
								color: #333;
							}
						}
						
						.item_content{
							width: 570rpx;
							margin: 0 auto;
							background-color: #fff;
							border-radius: 30rpx;
							margin-top: 30rpx;
							
							
							.content{
								width: 516rpx;
								padding: 34rpx 32rpx 30rpx 22rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;
								
								&.top{
									border-bottom: 1rpx solid #F2F2F2;
								}
								
								
								.left{
									font-size: 24rpx;
									color: #666;
								}
								.right{
									color: #333;
									font-size: 28rpx;
									
									&.green{
										color: #1ECE5F;
									}
									
									&.red{
										color: #EB4747;
									}
								}
							}
						}
						
						.expand_box{
							width: 100%;
							display: flex;
							margin-top: 30rpx;
							align-items: center;
							justify-content: center;
							
							.img{
								width: 40rpx;
								height: 40rpx;
							}
							.tit{
								color: #2D8CF0;
								font-size: 24rpx;
								margin-left: 12rpx;
							}
						}
					}
					
					.no_spread{
						width: 100%;
						background: #F8F8F8;
						border-radius: 30rpx;
						.item_con{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 32rpx;
							
							&.first{
								margin-top: 0rpx;
							}
							
							.left{
								color: #666666;
								font-size: 26rpx;
							}
							.right{
								font-size: 28rpx;
								color: #333;
							}
						}
					}
				}
			}
		
			.bottom_box{
				width: 100%;
				padding: 40rpx 0;
				display: flex;
				justify-content: flex-end;
				
				.edit_btn{
					width: 180rpx;
					height: 70rpx;
					background: #2D8CF0;
					border-radius: 100rpx;
					color: #fff;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 30rpx;
				}
			}
		}
	}
</style>
