<template>
	<view class="control">
		<!-- <view class="control-h2 flex j-between a-center">
			进度记录
			<view class="control-total">0/10</view>
		</view> -->
		<view class="control-list" v-if="listData && listData.length>0">
			<view class="control-item" v-for="(item,index) in listData" :key="index">
				<view class="box-item1">
					<view class="cw-box">
						<view>{{item.recordedBy ? item.recordedBy : '--'}}</view>
						<view>{{item.recordTime ? item.recordTime : '--'}}</view>
					</view>
					<view class="state-box" :class="{'hg-box':item.acceptancePass == 1}">
						{{ item.acceptancePass == 1 ? '合格'  : '不合格' }}
					</view>
				</view>

				<view class="box-item1">
					<view>验收描述:</view>
					<view>{{item.acceptanceDesc ? item.acceptanceDesc : '--'}}</view>
				</view>
				<view class="box-item1">
					<view>验收部位:</view>
					<view>{{item.regionName ? item.regionName : '--'}}
					</view>
				</view>
				<view class="box-item1">
					<view>现场照片:</view>
					<view class="img-wrap flex a-center">
						<view class="imgBox" v-for="(item,index) in item.imageUrl.split(',')" :key="index">
							<image :src="url_config+'image/'+item" class="img"
								@click="previewImage(url_config+'image/'+item)"></image>
						</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>
</template>

<script>
	export default {
		props: ['detailId', 'info'],
		data() {
			return {
				listData: []
			}
		},
		created() {
			this.initData()
		},
		methods: {
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			initData() {
				this.sendRequest({
					url: 'xmgl/bigDangerBuildAcceptance/list',
					method: 'get',
					data: {
						recordId: this.detailId,
						projectSn: this.info.projectSn,
						acceptanceType: 2,
					},
					success: res => {
						uni.hideLoading()
						if (res.code == 200) {
							this.listData = res.result
							console.log(res)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box-item1 {
		display: flex;
		align-items: center;
		font-size: 28rpx;

		>view:first-child {
			width: 162rpx;
			margin-right: 26rpx;
			color: #808080;
		}

		.cw-box {
			display: flex;
			flex: 1;
			align-items: center;
			font-size: 12px;
			color: #808080;

			>view:not(:first-child) {
				margin-left: 20rpx;
			}

		}

		.state-box {
			width: 120rpx;
			height: 48rpx;
			border-radius: 6rpx;
			font-weight: 500;
			font-size: 28rpx;
			background-color: #E40000;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.hg-box {
			background-color: #34C759;
			color: #fff;
		}

		.img-wrap {
			// margin-top: 20rpx;
			flex-wrap: wrap;
			
			.imgBox {
				width: 100rpx;
				height: 100rpx;
				// margin-left: 20rpx;
			
				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.control {
		padding-top: 20rpx;
		padding-bottom: 40rpx;

		.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: 14px;
			height: 60rpx;
			padding: 0 20rpx;
			background: rgba(255, 255, 255, 0.5);
		}

		.control-list {
			font-size: 14px;

			.control-item {
				padding: 26rpx;
				margin-bottom: 20rpx;
				background: #fff;

				>view:not(:last-child) {
					margin-bottom: 20rpx;
				}
			}

			.item-select-box {
				padding: 20rpx 0;

				.item-content {
					width: 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>