<template>
		<view  class="top-container" >
			<view class="detailtext"><text class="titletext">整改项详情</text><text class="contenttext">{{description}}</text></view>
			<view class="detailtext"><text class="titletext">位置</text><text class="contenttext">{{roomName}}</text></view>
			<view class="detailtext"><text class="titletext">实验室</text><text class="contenttext">{{roomName}}</text></view>
			<view class="detailtext"><text class="titletextlong">整改项照片</text></view>
			<view v-if="imgUrl.length==0" class="detailtext"><text class="remind">未上传整改项照片</text></view>
			<view style="width: 100%;display: flex;align-items: flex-start; justify-content: flex-start;margin-top: 30rpx;flex-direction: row;">
				<view style="margin-right: 30rpx;"  v-for="(item,index) in imgUrl" :key="index">
					<button  class="camera-button">
						<image mod="scaleToFill" class="camera-button" :src="item" />
					</button>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:[],
				roomName:"",
				description:"",
				detailData:{}
			}
		},
		methods: {
			onLoad() {
			  var that = this
			  uni.$on('rectificationListData',function(data){
				    console.log("@@@@@@@@@@@@@@@"+JSON.stringify(data))
					var detailData = data[0]
					that.roomName = JSON.parse(detailData.room).name
					that.description = detailData.description;
					that.detailData = detailData;
					that.imgUrl = JSON.parse(detailData.images)
					that.$forceUpdate();
			  })
			},
			onUnload(){
			  uni.$off('rectificationListData',function(data){
					
			  })
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调 */
			upCallback(page) {
			
			},
			onNavigationBarButtonTap(){
				uni.navigateTo({
					url:"../Security-Check/index?mod=put"
				})
				uni.$emit("rectificationEdit",[this.detailData])
			},
		}
	}
</script>

<style>
	.top-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding-left: 20rpx;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
	}
	.title {
		font-size: 16px;
		color: #333333;
	}
	.containter{
		display: flex;
		width: 100%;
		background-color: #F5F5F5;
		padding: 20rpx;
	}
	.statuspic{
		width:80rpx;
		height:80rpx;
	}
	.titletext{
		font-size:28rpx;
		color: #666666;
		margin-right: 78rpx;
		flex:1
	}
	.titletextlong{
		font-size:28rpx;
		color: #666666;
		margin-right: 50rpx;
		flex:1
	}
	.contenttext{
		font-size:28rpx;
		color: #333333;
		flex:3
	}
	.pic {
		width:80rpx;
		height:80rpx;
	}
	.remind {
		font-size:32rpx;
		color: #CDCDCD;
	}
	.detailtext {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
	}
	.camera-button {
		display:flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width:200rpx;
		height: 200rpx;
		padding: 0;
	}
</style>
