<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">{{form.typeName}}</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.areaName}}</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">
								<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 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.solveName}}</view>
								</u-col>
							</u-row>
							<u-row gutter="16" v-if="lawshow">
								<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">
								<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.deal_content}}</view>
								</u-col>
							</u-row>
							<u-row gutter="16" v-if="form.is_solve == 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.deal_result}}</view>
								</u-col>
							</u-row>
							<u-row gutter="16" v-if="form.is_solve == 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 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,
				lists:{},
				form:{},
				filesList:[],
				dealFilesList:[],
				
			}
		},
		
		
		
		onLoad(options) {
			if(options.id){
				this.loadInfo(options.id)
			}
		},
		methods: {
			loadInfo: function(id) {
				var that = this;
				this.util.request({
					method:"get",
					api: '/api/mobile/rain-maintains/show',
					customLoading: false,
					data: {
						id:id
					},
					
					utilSuccess: function(result) {
						that.lists = result
						switch(result.type){
						  case 1:
						  case 2:
							
						    that.form = result.circulation_info;
						    let _files = [];
						    for (var mod of result.circulation_info.circulation_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.circulation_info.circulation_deal_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;
							that.form.type = result.type
							result.circulation_info.is_solve==0 ? that.form.solveName="否":that.form.solveName="是"
							result.circulation_info.is_law==0 ? that.form.lawName="否":that.form.lawName="是"
							that.form.areaName = result.area_info.name
							that.form.created_at = result.created_at
						    break;
						  case 3:
							that.lawshow = false
						    that.form = result.help_discharge_info;
							let discharge_files = [];
						    for (var mod of result.help_discharge_info.help_discharge_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;
						
						    let discharge_filesafter = [];
						    for (var mod of result.help_discharge_info.help_discharge_deal_files) {
						      let m = Object.assign({}, mod);
						      m.url = mod.files.url;
						      m.id = mod.files.id;
						      m.photoType = "after";
						      discharge_filesafter.push(m);
						    }
						    that.dealFilesList = discharge_filesafter;
							that.form.type = result.type
							that.form.typeName = "汛期助排"
							result.help_discharge_info.is_solve==0 ? that.form.solveName="否":that.form.solveName="是"
						    that.form.areaName = result.area_info.name
							that.form.created_at = result.created_at
							break;
						  case 4:
							that.formshow = false
						    that.form = result.mire_info;
						    let mire_files = [];
						    for (var mod of result.mire_info.mire_files) {
						      let m = Object.assign({}, mod);
						      m.url = mod.files.url;
						      m.id = mod.files.id;
						      m.photoType = "before";
						      mire_files.push(m);
						    }
						    that.filesList =mire_files;
							that.form.type = result.type
							that.form.typeName = "污泥外运"
							that.form.areaName = result.area_info.name
							that.form.created_at = result.created_at
						    break;
						}
					},
					utilFail: function(res) {
						

						this.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>
