<template>
	<view class="content">
		<view class="header">
			<view>
				<text>{{searchForm.beginDate}}至{{searchForm.endDate}}</text>
				<u-image v-if="hasLogin" @click="openScreen=true" class="filter-img" width="36rpx" height="36rpx" src="/static/filter.png"></u-image>
			</view>
			<view class="header-cont">
				<view class="cont-item">
					<text>其它垃圾</text>
					<text v-if="status !='loading'" class="other">{{otherTotal}}kg</text>
					<u-loading :show="status =='loading'"></u-loading>
				</view>
				<view class="cont-item">
					<text>建筑垃圾</text>
					<text v-if="status !='loading'" class="jianzhu">{{jianzhuTotal}}kg</text>
					<u-loading :show="status =='loading'"></u-loading>
				</view>
				<view class="cont-item">
					<text>厨余垃圾</text>
					<text v-if="status !='loading'" class="chuyu">{{chuyuTotal}}kg</text>
					<u-loading :show="status =='loading'"></u-loading>
				</view>
			</view>
		</view>
		<scroll-view  class="scroll-con" :scroll-top="scrollTop" scroll-y @scrolltolower="onreachBottom">
			<!-- 列表数据 -->
			<view class="cell-item" v-for="item in listdata">
				<view class="cell-item-title" >
					<view>
						<text>2020-02-23 15:12:30</text>
					</view>
					<view @click="intoPage()">
						<span class="view">查看详情</span>
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view>
				<view class="cell-item-cont">
					<view class="cont-item">
						<u-image src="/static/index/other.png"></u-image>
						<text>1000kg</text>
					</view>
					<view class="cont-item">
						<u-image src="/static/index/jianzhu.png"></u-image>
						<text>1000kg</text>
					</view>
					<view class="cont-item">
						<u-image src="/static/index/chuyu.png"></u-image>
						<text>1000kg</text>
					</view>
				</view>
			</view>
			<view class="nodata" v-if="listdata.length==0 && status!='loading'">
				<u-empty :text="noDataText" mode="list"></u-empty>
			</view>
			<view class="loadmore">
				<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
			</view>
		</scroll-view>
		<view @click="intoPage()" class="footer">
			<!-- <u-icon name="edit-pen" size="30"></u-icon> -->
			<text>垃圾数据录入</text>
		</view>
		<!-- 筛选弹框 -->
		<search-modal v-if="openScreen" :visible="openScreen" :defaultParams="searchForm" @refresh="refresh" @close="openScreen=false"></search-modal>
	</view>
</template>

<script>
	import searchModal from './searchModal.vue'
	import {gatherQuery} from '@/api/index.js'
	import { checkLogin } from '@/api/login.js'
	import moment from 'moment'
	import getDate from '@/libs/getDate.js'
	export default {
		components: { searchModal },
		data() {
			return {
				hasLogin: false, // 是否登录
				listdata: [], // 列表数据
				otherTotal: 0, // 其它垃圾总和
				jianzhuTotal: 0, // 建筑垃圾总和
				chuyuTotal: 0, // 厨余垃圾总和
				pageNo: 1,  //  当前页码
				pageSize: 10,  //  每页条数
				total: 0,  //  数据总条数
				noDataText: '暂无数据',  //  列表请求状态提示语
				status: 'loadmore',  //  加载中状态
				openScreen: false,  //  是否打开筛选
				searchForm: {  //  查询条件
					beginDate: getDate.getRecentday().starttime,  //  创建时间默认筛选近7天
					endDate: getDate.getRecentday().endtime,  //  创建时间默认筛选近7天
				},
				scrollTop: 0,  //  滚动条位置
			}
		},
		onLoad() {
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onUnload() {
			
		},
		onShareAppMessage(res) {
		},
		onShareTimeline(res) {
		},
		onShow() {
			checkLogin().then(res => {
				this.hasLogin = res.status == 200
				if(this.hasLogin){
					this.pageInit()
				} else {
					this.noDataText = '您尚未登录或登录已过期，完成登录后可查看录入信息！'
				}
			})
		},
		methods: {
			pageInit() {
				this.pageNo = 1
				this.pageSize = 10
				this.total = 0
				this.scrollTop = 0
				this.searchForm.beginDate = getDate.getRecentday().starttime
				this.searchForm.endDate = getDate.getRecentday().endtime
				console.log(this.searchForm,'this.searchForm')
				this.searchHandle()
			},
			// 获取查询参数 刷新列表
			refresh(params){
				this.searchForm = params
				this.listdata = []
				this.total = 0
				this.searchHandle(1)
			},
			// 搜索查询
			searchHandle (pageNo) {
				this.status = "loading"
				pageNo ? this.pageNo = pageNo : null
				gatherQuery({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					beginDate: this.searchForm.beginDate,
					endDate: this.searchForm.endDate,
				}).then(res => {
					if (res.status == 200) {
						if(this.pageNo>1){
							this.listdata = this.listdata.concat(res.data.list || [])
						}else{
							this.listdata = res.data.list || []
							this.scrollTop = 0
						}
						this.total = res.data.count || 0
						this.noDataText = '暂无数据'
					} else {
						this.noDataText = res.message
						this.listdata = []
						this.total = 0
					}
					this.status = "loadmore"
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log(111111)
				if(this.listdata.length < this.total){
					this.pageNo += 1
					// this.searchHandle()
				}else{
					uni.showToast({ title: '已经到底了', icon: 'none' })
					this.status = "nomore"
				}
			},
			// 打开垃圾数据录入页面
			intoPage(flag) {
				let url = flag ? `/pages/index/addData?id=${flag}` : `/pages/index/addData`
				// uni.navigateTo({
				//     url: url
				// })
				if(!this.hasLogin){
					uni.showModal({
					  title: '提示',
					  content: '您尚未登录或登录已过期，请登录后使用',
					  success: (res)=> {
					    if (res.confirm) {
					     uni.navigateTo({
					         url: '/pages/login/login'
					     })
					    } else if (res.cancel) {
					      console.log('用户点击取消');
					    }
					  }
					});
				} else {
					uni.navigateTo({
					    url: url
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.header{
			width: 100%;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			border-radius: 15upx;
			padding: 30upx;
			box-shadow: 0upx 3upx 6upx #eee;
			margin-bottom: 20upx;
			:first-child {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.header-cont{
				margin-top: 20upx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.cont-item{
					display: flex;
					flex-direction: column;
					align-items: center;
					text{
						line-height: 50upx;
					}
					text:last-child{
						font-weight: 600;
						font-size: 28upx;
					}
				}
				.other{
					color: #FB1E1E;
				}
				.chuyu{
					color: #FCAE53;
				}
				.jianzhu{
					color: #4EACFA;
				}
			}
			.filter-img{
				padding: 10upx;
			}
		}
		.scroll-con{
			flex: 1;
			width: 100%;
			-webkit-box-flex:1;
			-webkit-flex:1;
			-ms-flex:1;
			overflow: auto;
			.cell-item{
				width: 100%;
				background-color: #fff;
				border-radius: 15upx;
				// padding: 20upx;
				box-shadow: 0upx 3upx 6upx #eee;
				.cell-item-title{
					padding: 20upx 20upx 10upx;
					width: 100%;
					display: flex;
					justify-content: space-between;
					// border-bottom: 1px solid #e6e6e6;
					.view{
						color: #999999;
						margin-right: 12upx;
					}
				}
				.cell-item-cont{
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding: 20upx;
					margin-bottom: 20upx;
					.cont-item{
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 33%;
						// border-right: 1px solid #e6e6e6;
						:first-child {
							width: 120upx;
							height: 120upx;
							margin-bottom: 20upx;
						}
					}
					:last-child {
						border: none;
					}
				}
			}
		}
		.footer{
			z-index: 9999;
			// position: absolute;
			// bottom: 30upx;
			// margin: 20upx;
			width: 95%;
			height: 80upx;
			background-color: #0DC55F;
			opacity: 1;
			border-radius: 50upx;
			color: #fff;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
