<template>
	<view class="page_wrap fullHeight">
		<headers class="blue_header fixedheader" :showBack="true">
			<view class="headerName">
				浇筑令台账
			</view>
		</headers>
		<view class="smallHeight" :style="{ 'padding-top': statusBarHeight + 56 + 'px' }">
			<view class="content">
				<view class="nav_list" :style="{'border-radius': activeIndex == 2 ? '24rpx 0 0 0':activeIndex == 3 ? '0 24rpx 0 0':'0'}">
					<view class="nav_item" :class="{'active_item': activeIndex == 2}" @click="changeTab(2)">
						<view class="text">已通过</view>
						<view class="bottom_box"></view>
					</view>
					<view class="nav_item" :class="{'active_item': activeIndex == 1}" @click="changeTab(1)">
						<view class="text">审核中</view>
						<view class="bottom_box"></view>
					</view>
					<view class="nav_item" :class="{'active_item': activeIndex == 3}" @click="changeTab(3)">
						<view class="text">已驳回</view>
						<view class="bottom_box"></view>
					</view>
				</view>
				<scroll-view class="smallHeight content_list" v-if="listData && listData.length>0"  scroll-y>
					<view style="padding-top: 36rpx;" :style="{'padding-bottom': activeIndex == 1 ? '100px':'40px'}">
						<view class="list_item" @click="goDetail(item)" v-for="(item,index) in listData" :key="index">
							<view class="status" :class="{'status1': activeIndex == 2,'status2': activeIndex == 1,'status3': activeIndex == 3}">
								{{activeIndex == 2 ? '已通过':activeIndex == 1 ? '审核中':activeIndex == 3 ? '已驳回':''}}
							</view>
							<view class="flex">
								<view class="left">
									<view class="info_item"><text style="color: #948EAD">楼栋：</text>{{item.buildName}}</view>
									<view><text style="color: #948EAD">施工段：</text>{{item.constructionSection}}</view>
								</view>
								<view class="right">
									<view class="info_item"><text style="color: #948EAD">楼层：</text>{{item.floorName}}</view>
									<view><text style="color: #948EAD">浇筑日期：</text>{{item.pourTime}}</view>
								</view>
							</view>
							<!-- <view class="label_list">
								<view class="label_item">已入库</view>
								<view class="label_item">已送检</view>
								<view class="label_item">已测量</view>
								<view class="label_item">已结束</view>
							</view> -->
						</view>
					</view>
				</scroll-view>
				<view class="no_data" v-else><image src="../../../static/noData.png"></image><view>暂无数据</view></view>
				<view class="addForm_btn" v-if="activeIndex == 2" @click="goAdd">浇筑令申请</view>
			</view>
		</view>
		<!-- <view class="bottom_nav">
			<view class="nav_item">
				<image src="../../../static/betonManage/nav-icon3.png"></image>
				<image src="../../../static/betonManage/nav-icon2.png"></image>
				<text>混凝土施工管控</text>
			</view>
			<view class="nav_item active_item">
				<image src="../../../static/betonManage/nav-icon4.png"></image>
				<image src="../../../static/betonManage/nav-icon1.png"></image>
				<text>浇筑令台账</text>
			</view>
		</view> -->
	</view>
</template>

<script>
export default{
	data(){
		return{
			statusBarHeight: 0,
			activeIndex: 2,
			projectSn: '',
			listData: []
		}
	},
	onShow(){
		this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
		this.projectSn = JSON.parse(uni.getStorageSync('userInfo')).sn
		this.loadData()
	},
	onLoad(){
		
	},
	methods:{
		loadData(){
			let params = {
				auditState: this.activeIndex,
				pageNo: 1,
				pageSize: 500,
				projectSn: this.projectSn
			}
			let that = this
			this.sendRequest({
				url: 'xmgl/massReboundPouringOrder/list',
				data: params,
				method: "POST",
				success(res) {
					console.log(res)
					that.listData = res.result.records
				}
			})
		},
		changeTab(val){
			this.activeIndex = val
			this.loadData()
		},
		goAdd(){
			uni.navigateTo({
				url: './addPouringOrder'
			})
		},
		goDetail(val){
			uni.navigateTo({
				url: './detail?type='+this.activeIndex + '&id=' + val.id
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.blue_header{
		:deep(.headerBox){
			background: #5181F6;
			color: #fff;
			border-bottom: 0;
			.uni-icons{
				color: #fff !important;
			}
		}
	}
	.fixedheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.smallHeight{
		height: 100%;
		background: #5181F6;
		box-sizing: border-box;
	}
	.content{
		height: 100%;
		// background: #fff;
		.nav_list{
			display: flex;
			height: 68rpx;
			background: #7097F7;
			.nav_item{
				flex: 1;
				// padding-left: 24rpx;
				// margin-left: -24rpx;
				z-index: 1;
				height: 68rpx;
				text-align: center;
				position: relative;
				line-height: 68rpx;
				color: rgba(255,255,255,0.68);
				.bottom_box{
					display: none;
				}
			}
			.active_item{
				background: #fff;
				color: rgba(81, 129, 246,1);
				// margin-left: 0;
				border-radius: 24rpx;
				z-index: 2;
				.text{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					z-index: 3;
				}
				.bottom_box{
					display: block;
					height: 20rpx;
					position: absolute;
					left: -20rpx;
					bottom: 0;
					z-index: 2;
					width: calc(100% + 40rpx);
					background: #fff;
				}
				.bottom_box::after{
					content: "";
					position: absolute;
					width: 48rpx;
					height: 68rpx;
					right: -29rpx;
					bottom: 0;
					border-radius: 24rpx;
					background: #7097F7;
				}
				.bottom_box::before{
					content: "";
					position: absolute;
					width: 48rpx;
					height: 48rpx;
					left: -29rpx;
					bottom: 0;
					border-radius: 50%;
					background: #7097F7;
				}
			}
		}
	}
	.content_list{
		background: #fff;
		height: calc(100% - 68rpx);
		.list_item{
			// height: 150rpx;
			padding: 36rpx 28rpx;
			box-sizing: border-box;
			width: 90%;
			margin: 0 auto;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			box-shadow: 0px 4rpx 11px 0px rgba(212, 220, 236, 0.65);
			position: relative;
			.status{
				position: absolute;
				top: 0;
				right: 24rpx;
				font-size: 20rpx;
				height: 32rpx;
				line-height: 32rpx;
				padding: 0 10rpx;
				color: #fff;
				border-radius: 0 0 12rpx 12rpx;
			}
			.status1{
				background: rgba(#44D7B5, 1);
				
			}
			.status2{
				background: rgba(#F68053, 1);
			}
			.status3{
				background: rgba(#F65352, 1);
			}
			.left{
				flex: 1;
				font-size: 28rpx;
			}
			.right{
				flex: 1;
				font-size: 28rpx;
			}
			.info_item{
				margin-bottom: 4rpx;
			}
			.label_list{
				display: flex;
				font-size: 24rpx;
				margin-top: 20rpx;
				.label_item{
					background: rgba(#5181F6, 0.1);
					color: #5181F6;
					padding: 0 14rpx;
					height: 36rpx;
					line-height: 36rpx;
					border-radius: 16rpx;
					margin-right: 18rpx;
				}
			}
		}
		.flex{
			display: flex;
		}
	}
	.addForm_btn{
		width: 100rpx;
		height: 100rpx;
		// line-height: 100rpx;
		font-size: 24rpx;
		border-radius: 50%;
		background: #4181FE;
		display: flex;
		align-items: center;
		padding: 0 12rpx;
		box-sizing: border-box;
		color: #fff;
		border-radius: 50rpx;
		text-align: center;
		position: fixed;
		bottom: 180rpx;
		right: 60rpx;
		box-shadow: 0 4rpx 8rpx 0 rgba(65, 129, 254, 1);
	}
	.addForm_btn::before{
		content: "";
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		left: -10rpx;
		top: -10rpx;
		background: rgba(65, 129, 254, 0.1);
		border-radius: 50%;
	}
	.bottom_nav{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 136rpx;
		background: #fff;
		border-top: 1px solid rgba(245, 245, 245, 1);
		display: flex;
		font-size: 24rpx;
		.nav_item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: rgba(#2A2B5B,0.3);
		}
		.active_item{
			color: #5181F6;
		}
		uni-image{
			width: 60rpx;
			height: 60rpx;
		}
	}
	.no_data{
		background: #fff;
		height: calc(100% - 68rpx);
		padding-top: 80rpx;
		box-sizing: border-box;
		text-align: center;
		color: rgba(0,0,0,0.3);
		uni-image{
			width: 246rpx;
			height: 195rpx;
			display: block;
			margin: 0 auto;
			margin-bottom: 60rpx;
		}
	}
</style>
