<template>
	<view class="boxContent">

		<view class="box-header">
			
		</view>
		
		<view class="list" style="padding-top: 20rpx;">
			<block>
				<u-card :title="form.created_at" padding="20" margin="20rpx" :border="true">
					<view class="" slot="body">
						<u-row gutter="16">
							<u-col span="4">
								<view class="demo-layout bg-purple">地址：</view>
							</u-col>
							<u-col span="12">
								<view class="demo-layout bg-purple-light">{{form.address}}</view>
							</u-col>
						</u-row>
						<u-row gutter="16">
							<u-col span="3">
								<view class="demo-layout bg-purple">巡查类型：</view>
							</u-col>
							<u-col span="9">
								<view class="demo-layout bg-purple-light">{{typeName}}</view>
							</u-col>
						</u-row>
						<u-row gutter="16" v-if="scopeShow">
							<u-col span="3">
								<view class="demo-layout bg-purple">巡查内容：</view>
							</u-col>
							<u-col span="9">
								<view class="demo-layout bg-purple-light">{{askName}}</view>
							</u-col>
						</u-row>
						<u-row gutter="16" v-if="scopeShow">
							<u-col span="3">
								<view class="demo-layout bg-purple">覆盖范围：</view>
							</u-col>
							<u-col span="9">
								<view class="demo-layout bg-purple-light">{{form.scope}}米</view>
							</u-col>
						</u-row>
						<u-row gutter="16" v-if="scopeShow">
							<u-col span="3">
								<view class="demo-layout bg-purple">点位名称：</view>
							</u-col>
							<u-col span="9">
								<view class="demo-layout bg-purple-light">{{form.point_name}}</view>
							</u-col>
						</u-row>
						<u-row gutter="16">
							<u-col span="3">
								<view class="demo-layout bg-purple">所属片区：</view>
							</u-col>
							<u-col span="9">
								<view class="demo-layout bg-purple-light">{{areaName}}</view>
							</u-col>
						</u-row>
						<view v-if="!formshow">
							<u-row gutter="16">
								<u-col span="3">
									<view class="demo-layout bg-purple">工地名称：</view>
								</u-col>
								<u-col span="9">
									<view class="demo-layout bg-purple-light">{{form.buildName}}</view>
								</u-col>
							</u-row>
							<u-row gutter="16">
								<u-col span="3">
									<view class="demo-layout bg-purple">工地编号：</view>
								</u-col>
								<u-col span="9">
									<view class="demo-layout bg-purple-light">{{form.number}}</view>
								</u-col>
							</u-row>
							<u-row gutter="16">
								<u-col span="3">
									<view class="demo-layout bg-purple">工地类型：</view>
								</u-col>
								<u-col span="9">
									<view class="demo-layout bg-purple-light">{{form.buildtypeName}}</view>
								</u-col>
							</u-row>
							<u-row gutter="16">
								<u-col span="3">
									<view class="demo-layout bg-purple">工地状态：</view>
								</u-col>
								<u-col span="9">
									<view class="demo-layout bg-purple-light">{{form.statusName}}</view>
								</u-col>
							</u-row>
							<u-row gutter="16">
								<u-col span="3">
									<view class="demo-layout bg-purple">备注：</view>
								</u-col>
								<u-col span="9">
									<view class="demo-layout bg-purple-light">{{form.remark}}</view>
								</u-col>
							</u-row>
							<u-row gutter="16">
								<u-col span="3">
									<view class="demo-layout bg-purple">是否违法：</view>
								</u-col>
								<u-col span="9">
									<view class="demo-layout bg-purple-light">{{form.lawName}}</view>
								</u-col>
							</u-row>
							<u-row gutter="16" v-if="form.is_law==1">
								<u-col span="3">
									<view class="demo-layout bg-purple">违法内容：</view>
								</u-col>
								<u-col span="9">
									<view class="demo-layout bg-purple-light">{{form.lawContentName}}</view>
								</u-col>
							</u-row>
							
							
						</view>
						<u-row gutter="16">
							<u-col span="3">
								<view class="demo-layout bg-purple">描述：</view>
							</u-col>
							<u-col span="12">
								<view class="demo-layout bg-purple-light">{{form.content}}</view>
							</u-col>
						</u-row>
						<u-row gutter="16">
							<u-col span="3">
								<view class="demo-layout bg-purple">现场图片：</view>
							</u-col>
							<u-col span="12" v-for="(item,index) in filesList">
								<u-image @click="imgListPreview(item.files.url)" style="margin:20rpx 0" width="100%" height="300rpx" :src="item.files.url"></u-image>
							</u-col>
						</u-row>

						<view v-if="formshow">
							<u-row gutter="16">
								<u-col span="3">
									<view class="demo-layout bg-purple">是否异常：</view>
								</u-col>
								<u-col span="9">
									<view class="demo-layout bg-purple-light">{{form.unsualName}}</view>
								</u-col>
							</u-row>
							<u-row gutter="16" v-if="form.is_unsual!=0">
								<u-col span="3">
									<view class="demo-layout bg-purple">异常处置建议：</view>
								</u-col>
								<u-col span="12">
									<view class="demo-layout bg-purple-light">{{form.tip}}</view>
								</u-col>
							</u-row>
							
							<u-row gutter="16">
								<u-col span="4">
									<view class="demo-layout bg-purple">是否现场处理：</view>
								</u-col>
								<u-col span="9">
									<view class="demo-layout bg-purple-light">{{form.sceneName}}</view>
								</u-col>
							</u-row>
							<u-row gutter="16" v-if="form.is_scene == 1">
								<u-col span="3">
									<view class="demo-layout bg-purple">处理结果：</view>
								</u-col>
								<u-col span="12">
									<view class="demo-layout bg-purple-light">{{form.result}}</view>
								</u-col>
							</u-row>
							<u-row gutter="16" v-if="form.is_scene == 1">
								<u-col span="4">
									<view class="demo-layout bg-purple">处理后图片：</view>
								</u-col>
								<u-col span="12" v-for="(item,index) in dealFilesList">
									<u-image @click="imgListPreview(item.files.url)" style="margin:20rpx 0" width="100%" height="300rpx" :src="item.files.url"></u-image>
								</u-col>
							</u-row>
						</view>
					</view>
					
				</u-card>
		
			</block>
		</view>

	
		
	</view>


</template>

<script>
	export default {
		data() {
			return {
				formshow:true,
				lawshow:true,
				scopeShow:false,
				lists:{},
				form:{},
				typeName:"",
				askName:"",
				areaName:"",
				buildTypes:[],
				lawTypes:[],
				filesList:[],
				dealFilesList:[],
				
			}
		},
		
		
		
		onLoad(options) {

			this.loadBuildType()
			this.loadLawTypes()
			if(options.id){
				this.loadInfo(options.id)
			}
		},
		methods: {
			imgListPreview(item){
				var urlList = []
				urlList.push(item)  //push中的参数为 :src="item.img_url" 中的图片地址
				uni.previewImage({
					indicator:"number",
					loop:true,
					urls: urlList
				})
				
			},
			loadInfo: function(id) {
				var that = this;
				this.util.request({
					method:"get",
					api: '/api/mobile/rain-inspection/show',
					customLoading: false,
					data: {
						id:id
					},
					
					utilSuccess: function(result) {
						that.lists = result
						switch(result.type){
						  case 1:
							that.typeName = "日常雨水设施"
							that.instype = 1
							that.scopeShow = true
							that.form = result.rain_equipment_info;
							that.form.rain_equipment_id = result.rain_equipment_id;
							that.askName = result.rain_equipment_info.ask_content_detail.value
							that.areaName = result.area_info?result.area_info.name:""
							if(result.rain_equipment_info.is_unusual==1){
								that.form.unsualName == "丢失"
							}else if(result.rain_equipment_info.is_unusual==2){
								that.form.unsualName == "破损"
							}else{
								that.form.unsualName == "否"
							}
							that.form.sceneName = that.form.is_scene==0?"否":"是"
							
							let _files = [];
							for (var mod of result.rain_equipment_info.rain_equipment_files) {
							  let m = Object.assign({}, mod);
							  m.url = mod.files.url;
							  m.id = mod.files.id;
							  m.photoType = "before";
							  _files.push(m);
							}
							that.filesList = _files;
													
							let _filesafter = [];
							for (var mod of result.rain_equipment_info.rain_equipment_end_files) {
							  let m = Object.assign({}, mod);
							  m.url = mod.files.url;
							  m.id = mod.files.id;
							  m.photoType = "after";
							  _filesafter.push(m);
							}
							that.dealFilesList = _filesafter;
							break;
						  case 2:
							that.formshow=false
							that.typeName = "在建工地"
							that.formshow = false
							that.areaName = result.area_info?result.area_info.name:""
							
							that.form = result.building_site_info;
							that.form.buildName = result.building_site_info.building_site.name
							that.form.name = result.building_site_info.building_site.name
							that.form.number=result.building_site_info.building_site.number
							that.form.type=result.building_site_info.building_site.type
							
							
							that.form.break_id = result.building_site_info.break_id
							for(var m of that.buildTypes){
								if(result.building_site_info.building_site.type==m.id){
									that.form.buildtypeName = m.value;
								}
							}
							for(var m of that.lawTypes){
								if(result.building_site_info.break_id==m.id){
									that.form.lawContentName = m.value;
								}
							}
							
							that.form.status=result.building_site_info.building_site.status
							that.form.statusName = result.building_site_info.building_site.status==0?"在建":"完工"
							that.form.lawName = result.building_site_info.building_site.is_law==0?"否":"是"
							that.form.remark=result.building_site_info.building_site.remark
							that.form.latitude = result.building_site_info.building_site.latitude;
							that.form.longitude = result.building_site_info.building_site.longitude;
							that.form.address = result.building_site_info.building_site.address;
							// for(var m of that.rainArr.buildTypes){
							// 	if(result.building_site_info.building_site.type==m.id){
							// 		that.buildtypeName = m.value;
							// 	}
							// }
							// for(var m of that.rainArr.lawTypes){
							// 	if(result.building_site_info.break_id==m.id){
							// 		that.lawName = m.value;
							// 	}
							// }
							let discharge_files = [];
							for (var mod of result.building_site_info.building_site_content_files) {
							  let m = Object.assign({}, mod);
							  m.url = mod.files.url;
							  m.id = mod.files.id;
							  m.photoType = "before";
							  discharge_files.push(m);
							}
							that.filesList = discharge_files;
						  
						  
							break;
						}
							
							
						   
					},
					utilFail: function(res) {
						

						this.util.alert(res);
					}
				});
			},
			loadBuildType(){
				var that = this;
				that.util.request({
					api: '/api/admin/parameter/show',
					method: "get",
					data: {
						number:"siteType"
					},
					utilSuccess: function(result) {
						that.buildTypes = result.detail
						
					},
					utilFail: function(res) {
						that.util.alert(res);
					}
				});
			},
			loadLawTypes(){
				var that = this;
				that.util.request({
					api: '/api/admin/parameter/show',
					method: "get",
					data: {
						number:"siteLaw"
					},
					utilSuccess: function(result) {
						that.lawTypes = result.detail
					},
					utilFail: function(res) {
						that.util.alert(res);
					}
				});
			},
			

		}

	}
</script>
<style>
	.boxContent {
		background: #f3f4f6;
		min-height: 100vh;
	}

	.footer {
		display: flex;
		justify-content: flex-end;
	}

	.box-header {

		position: fixed;
		top: 0;
		width: 100%;
		z-index: 99;
	}

	.u-row {
		margin: 10rpx 0;
		font-size: 28rpx;
	}
	.u-card{
		z-index: 1;
	}
</style>


<style scoped lang="scss">
	.overflowmask{
		overflow: hidden;
	}
	.loadmore{
		padding:24rpx!important
	}
	.search-wrap {
		background: #0385e5;
		padding: 20rpx;
	}

	.u-config-wrap {
		padding: 30rpx;
	}

	.bg-purple {
		font-weight: bold;
	}

	.slot-content {
		background-color: #FFFFFF;
		padding: 24rpx;

		.item-box {
			margin-bottom: 50rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				border: 1px solid $u-type-primary;
				color: $u-type-primary;
				padding: 8rpx 40rpx;
				border-radius: 100rpx;
				margin-top: 30rpx;
			}

			.active {
				color: #FFFFFF;
				background-color: $u-type-primary;
			}
		}
	}
</style>
