<template>
	<view class="control">
		<view class="fixedheader">
			<headers :themeType="true" :showBack="true">
				<view class="headerName">
					危大验收待办
				</view>
			</headers>
		</view>
		<view :style="{ 'padding-top': ((statusBarHeight * 2) + 45) * 1.5 + 'rpx' }">
			<view class="control-list" v-if="listData && listData.length>0">
				<view class="control-item" v-for="(item,index) in listData" :key="index" @click="previewDetail(item)">
					<view class="item-title flex a-center j-between b-bottom">
						{{item.acceptanceType == 1 ? '施工条件验收': item.acceptanceType == 2 ? '危大工程验收':''}} {{item.createUserName}} {{item.createTime}}
						<view class="tag" :class="{'status1': item.status == 2, 'status2': item.status == 1}">
							{{ item.status == 1 ? '执行中': item.status == 2 ? '已完成' : '未执行'}}
						</view>
					</view>
					<view class="item-select-box b-bottom" >
						<view class="item-content flex a-center">
							<view class="item-label">验收部位：</view>
							<view class="item-info">
								<view class="text">
									{{item.acceptanceRegion}}
								</view>
							</view>
						</view>
					</view>
					<view class="item-select-box b-bottom">
						<view class="item-content flex a-center">
							<view class="item-label">验收人：</view>
							<view class="item-info">
								<view class="text">
									{{item.userlist.join(',')}}
								</view>
							</view>
						</view>
					</view>
					<view class="item-select-box" :class="{'b-bottom': item.status == 2}">
						<view class="item-content flex">
							<view class="item-label">计划执行时间：</view>
							<view class="item-info">
								<view class="text">
									{{item.planExecuteTime}}
								</view>
							</view>
						</view>
					</view>
					<view class="item-select-box" v-if="item.status == 2">
						<view class="item-content flex">
							<view class="item-label">验收结果：</view>
							<view class="item-info">
								<view class="text" v-for="(item,index) in JSON.parse(item.userChooseResult)" :key="index" :style="{'color': colorList[index]}">
									{{item.name}} {{item.num ? item.num:'0'}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-data" v-else>
				<image class="img" src="/static/noData.png"></image>
				<text class="txt">暂无数据</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return{
				listData:[],
				colorList:['#13B98C','#F0AD4E','#DD524D', '#4396E7'],
				userId: "",
				statusBarHeight: 0
			}
		},
		onShow(){
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
			this.userId = JSON.parse(uni.getStorageSync('userInfo')).userId
			this.initData();
		},
		methods:{
			initData(){
				this.sendRequest({
					url:'xmgl/acceptanceTableCheckTask/selectUserAcceptanceTaskList',
					method:'post',
					data: {userId: this.userId},
					success:res=>{
						uni.hideLoading()
						if(res.code==200){
							this.listData = res.result
							console.log(res)
						}
					}
				})
			},
			previewDetail(val){
				console.log(val)
				if(val.status==0){
					this.sendRequest({
						url:'xmgl/acceptanceTableCheckTask/edit',
						method:'post',
						data: {
							id: val.id,
							status: 1
						},
						success:res=>{
							uni.hideLoading()
							if(res.code==200){
								console.log(res)
								uni.navigateTo({
									url: './dangerBigCheck?id='+val.engineeringId+'&taskId='+val.id+'&status='+ 1 + "&type=" + 2
								})
							}
						}
					})
				} else if(val.status==1){
					uni.navigateTo({
						url: './dangerBigCheck?id='+val.engineeringId+'&taskId='+val.id+'&status='+val.status + "&type=" + 2
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control{
		min-height: 100%;
		background: #F6F6F6;
		.fixedheader{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 2;
		}
		.flex{
			display: flex;
		}
		.j-between{
			justify-content: space-between;
		}
		.a-center{
			align-items: center;
		}
		.b-bottom{
			border-bottom: 1px solid #F6F6F6;
		}
		.control-h2{
			font-size: 28rpx;
			height: 60rpx;
			padding: 0 20rpx;
			background: rgba(255,255,255,0.5);
		}
		.control-list{
			font-size: 28rpx;
			padding-top: 20rpx;
			.control-item{
				margin-bottom: 20rpx;
				.item-title{
					// font-weight: 600;
					background: rgba(255, 255, 255, 0.5);
					padding: 0 20rpx;
					height: 62rpx;
					line-height: 72rpx;
					.tag{
						font-weight: normal;
						border-radius: 6rpx;
						font-size: 24rpx;
						height: 40rpx;
						line-height: 40rpx;
						padding: 0 20rpx;
						color: #909399;
						background: #EEEEEE;
					}
					.status1{
						color: #13B98C;
						background: rgba(#13B98C, 0.1);
					}
					.status2{
						color: #F0AD4E;
						background: rgba(#F0AD4E, 0.1);
					}
				}
			}
			.item-select-box{
				padding: 18rpx 20rpx;
				background: #fff;
				.item-content{
					width: 100%;
					.item-label{
						white-space: nowrap;
						width: 208rpx;
						line-height: 52rpx;
					}
					.item-info{
						flex: 1;
						.text{
							margin-right: 18rpx;
							line-height: 52rpx;
							display: inline-block;
						}
					}
				}
				
			}
			.img-wrap{
				margin-top: 20rpx;
				flex-wrap: wrap;
			}
			.item-img{
				padding: 20rpx 0;
				.imgBox{
					width: 100rpx;
					height: 100rpx;
					margin-left: 20rpx;
					.img{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.no-data{
			text-align: center;
			.img{
				display: block;
				height: 200rpx;
				width: 200rpx;
				margin: 0 auto;
				margin-top: 60rpx;
				margin-bottom: 60rpx;
			}
			.txt{
				color: #C0C4CC;
			}
		}
	}
</style>
