<template>
	<view class="container">
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<template #top>
			<tui-searchbar radius="40rpx" placeholder="请输入道路名称" @search="getSeach" @clear="setSeach"></tui-searchbar>
		</template>
		<tui-list-cell :hover="false" :marginBottom="10" v-for="(item, index) in dataList" @click="toDetails(item.userId)">
			<view>街道名称：{{item.streetName}}</view>
			<view class="fs-py10">道路名称：{{item.roadName}}</view>
			<view>行道树绿化面积：{{item.greenBeltTreeArea}}㎡</view>
			<view class="fs-py10">绿化带面积：{{item.greenBeltArea}}㎡</view>
			<view>总绿化带面积：{{item.totalArea}}㎡</view>
			<view class="fs-pt10 fs-flex__between"><view>道路级别：{{item.curingLevelName}}</view><view>树量：{{item.treeArea}}棵</view></view>
		</tui-list-cell>
	</z-paging>
	</view>
</template>

<script>
import { apiBaseRoadList } from '@/api/app'
export default {
	data() {
		return {
			dataList: [],
			roadName: ''
		}
	},
	onLoad() {

	},
	methods: {
		// 获取道路列表
		queryList(pageNo, pageSize) {
			const params = {
				pageReq: {isAsc: 'desc', orderByColumn: 'id', pageNum: pageNo, pageSize: pageSize},
				roadName: this.roadName
			}
			apiBaseRoadList({data:params}).then(res => {
				this.$refs.paging.complete(res.rows)
			})
		},
		// 获取搜索结果
		getSeach(e) {
			this.roadName = e.value
			this.$refs.paging.reload()
		},
		// 清空搜索数据
		setSeach() {
			this.roadName = ''
			this.$refs.paging.reload()
		}
	}
}
</script>

<style lang="scss" scoped>

</style>
