<template>
	<view class="boxContent">

		<view :class="mask?'list listfixed':'list'" style="padding-top: 20rpx;">

			<block v-for="(item, index) in dataList">
				<u-card :title="item.road.name"  @click="toMaintain(item.road.id,item.road.name)" sub-title="去养护" padding="20"
					margin="20rpx" :border="true">
					<view class="" slot="body" >
						<u-row gutter="16">
							<u-col span="24">
								<view class="demo-layout bg-purple-light">{{item.name}}</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="8">
								<view class="demo-layout bg-purple-light">{{item.area_info?item.area_info.name:''}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout bg-purple">开始日期：</view>
							</u-col>
							<u-col span="8">
								<view class="demo-layout bg-purple-light">{{item.start_date}}</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout bg-purple">结束日期：</view>
							</u-col>
							<u-col span="8">
								<view class="demo-layout bg-purple-light">{{item.end_date}}</view>
							</u-col>

							<u-col span="4">
								<view class="demo-layout bg-purple">养护类型：</view>
							</u-col>
							<u-col span="8">
								<view class="demo-layout bg-purple-light">{{toReturnType(item.item_type)}}</view>
							</u-col>



							<u-col span="5">
								<view class="demo-layout bg-purple">窨井（座）：</view>
							</u-col>
							<u-col span="1">
								<view class="demo-layout bg-purple-light">{{item.inspection_well}}</view>
							</u-col>
							<u-col span="5">
								<view class="demo-layout bg-purple">边井（座）：</view>
							</u-col>
							<u-col span="1">
								<view class="demo-layout bg-purple-light">{{item.side_well}}</view>
							</u-col>
							<u-col span="5">
								<view class="demo-layout bg-purple">主管数：</view>
							</u-col>
							<u-col span="1">
								<view class="demo-layout bg-purple-light">{{item.master_pipe}}</view>
							</u-col>
							<u-col span="5">
								<view class="demo-layout bg-purple">支管数：</view>
							</u-col>
							<u-col span="1">
								<view class="demo-layout bg-purple-light">{{item.branch_pipe}}</view>
							</u-col>
						</u-row>

					</view>
				</u-card>

			</block>
			<u-loadmore class="loadmore" :status="loadStatus" :load-text="loadText" />
			<u-empty text="暂无数据" margin-top="200" v-if="dataList.length==0" mode="list"></u-empty>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				serachEntity: {
					keyword: "",
					status: "",
					type: "",
					date: "2022-10",
					area_id: ""
				},
				background: {
					backgroundColor: '#0385e5'
				},
				mask: false,
				loadStatus: "loadmore",
				loadText: {
					loadmore: "加载更多",
					nomore: "已经到底了"
				},
				rainTypes: [{
						id: 1,
						name: "雨水管道疏挖"
					},
					{
						id: 2,
						name: "雨水管道疏通"
					},
					{
						id: 3,
						name: "汛期助排"
					},
					{
						id: 4,
						name: "污泥外运"
					},
					{
						id: 5,
						name: "出水口排查"
					},
					{
						id: 6,
						name: "专项处理"
					},
					{
						id: 7,
						name: "维修"
					}
				],
				dataList: [],
				thumb: "/static/img/location.png",
				currentPage: 0,
				lastPage: 0,

			}
		},
		onReachBottom: function(e) {
			if (this.currentPage >= this.lastPage) {
				this.loadStatus = "nomore"
				return;
			}
			this.loadPage(this.currentPage + 1);
		},
		onPullDownRefresh: function(e) {
			this.loadPage(1);
		},
		onShow: function() {
			var that = this;
		},
		onLoad(options) {
			this.serachEntity.date = this.$moment().format("YYYY-MM");
			this.loadPage(1);
		},
		methods: {
			toReturnType(type) {
				return this.rainTypes.filter(m => {
					return m.id == type
				})[0].name
			},
			toMaintain(road_id, road_name) {
				let url = "/rainmaintain/rainmaintain/rainmaintain?roadid=" + road_id + "&roadname=" + road_name
				uni.navigateTo({
					url: url
				})
			},
			openmask() {
				this.mask = true
				// this.isPullDown(false);
			},
			closemask() {
				this.mask = false
				// this.isPullDown(true);
			},
			tosearch() {
				this.loadPage(1)
				this.$refs.uDropdown.close();
			},

			loadPage: function(page) {
				uni.hideKeyboard()
				var that = this;
				this.util.request({
					bindThis: that,
					api: '/api/mobile/maintain-plan/index',
					customLoading: false,
					data: {
						page: page,
						page_size: 4,
						...that.serachEntity
					},
					utilSuccess: function(r) {
						var res = r.data;
						that.lastPage = r.last_page;
						uni.stopPullDownRefresh(); // 服务器总条数 < 每页条数, 会将第一页的条数重新返回
						if (r.total < 5) {
							that.loadStatus = "nomore";
						}
						var hasNoMore = that.dataList.length < 4 && page > 1;
						if (hasNoMore || res.length == 0 && page > 1) {
							// 已加载到最后一页
							that.loadStatus = "nomore";
							uni.showToast({
								title: '已加载到最后一页',
								icon: 'none'
							});
							return;
						}
						var dataList = that.dataList;


						if (page == 1) {
							dataList = res;
						} else {
							dataList.push(...res);
						}
						that.currentPage = page;
						that.dataList = dataList;
					},
					utilFail: function(res) {
						uni.stopPullDownRefresh();

						if (page == 1) {

							that.currentPage = page;
						}

						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">
	.search-wrap {
		background: #0385e5;
		padding: 20rpx;
	}

	.overflowmask {
		overflow: hidden;
	}

	.loadmore {
		padding: 24rpx !important
	}

	.listfixed {
		position: fixed;
		width: 100%;
	}

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