<template>
	<view class="content">
		<view class="header">
			<view @click="openSearch">
				<text v-if="searchForm.beginDate">{{searchForm.beginDate}}至{{searchForm.endDate}}</text>
				<text v-else>全部</text>
				<!-- <u-icon name="arrow-right" color="#999999" size="28"></u-icon> -->
				<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="!titleStatus" class="other">{{otherTotal}}kg</text>
					<u-loading :show="titleStatus"></u-loading>
				</view>
				<view class="cont-item">
					<text>厨余垃圾</text>
					<text v-if="!titleStatus" class="chuyu">{{chuyuTotal}}kg</text>
					<u-loading :show="titleStatus"></u-loading>
				</view>
				<view class="cont-item">
					<text>建筑垃圾</text>
					<text v-if="!titleStatus" class="jianzhu">{{jianzhuTotal}}kg</text>
					<u-loading :show="titleStatus"></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>{{item.createDate}}</text>
					</view>
					<view @click="intoPage(item)">
						<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>{{item.gatherOther? (item.gatherOther/1000).toFixed(3)/1 :0}}kg</text>
					</view>
					<!-- 厨余垃圾 -->
					<view class="cont-item">
						<u-image src="/static/index/chuyu.png"></u-image>
						<text>{{item.gatherKitchen ? (item.gatherKitchen/1000).toFixed(3)/1 :0}}kg</text>
					</view>
					<!-- 建筑垃圾 -->
					<view class="cont-item">
						<u-image src="/static/index/jianzhu.png"></u-image>
						<text>{{item.gatherBuilding ? (item.gatherBuilding/1000).toFixed(3)/1 :0}}kg</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 {gatherList,gatherTotal} 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',  //  加载中状态
				titleStatus: false,  //  顶部加载中状态
				openScreen: false,  //  是否打开筛选
				searchForm: {  //  查询条件
					beginDate: getDate.getRecentday().starttime,  //  创建时间默认筛选近7天
					endDate: getDate.getRecentday().endtime,  //  创建时间默认筛选近7天
				},
				scrollTop: 0,  //  滚动条位置
			}
		},
		onLoad() {
			this.checkUpdate()
			// 开启分享
			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.otherTotal= 0 // 其它垃圾总和
				this.jianzhuTotal= 0 // 建筑垃圾总和
				this.chuyuTotal= 0 // 厨余垃圾总和
				this.searchForm.beginDate = getDate.getRecentday().starttime
				this.searchForm.endDate = getDate.getRecentday().endtime
				console.log(this.searchForm,'this.searchForm')
				this.searchHandle()
				this.getTotal()
			},
			// 检查更新
			checkUpdate(){
				if (uni.canIUse('getUpdateManager')) {
				      const updateManager = uni.getUpdateManager()
				      updateManager.onCheckForUpdate(function (res) {
				        console.log('onCheckForUpdate====', res)
				        // 请求完新版本信息的回调
				        if (res.hasUpdate) {
				          console.log('res.hasUpdate====')
				          updateManager.onUpdateReady(function () {
				            uni.showModal({
				              title: '更新提示',
				              content: '新版本已经准备好,是否重启应用?',
				              success: function (res) {
				                console.log('success====', res)
				                // res: {errMsg: "showModal: ok", cancel: false, confirm: true}
				                if (res.confirm) {
				                  // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
				                  updateManager.applyUpdate()
				                }
				              }
				            })
				          })
				          updateManager.onUpdateFailed(function () {
				            // 新的版本下载失败
				            uni.showModal({
				              title: '已经有新版本了哟~',
				              content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~'
				            })
				          })
				        }
				      })
				    }
			},
			// 打开查询弹窗
			openSearch(){
				if(this.hasLogin){
					this.openScreen = true
				}
			},
			// 获取查询参数 刷新列表
			refresh(params){
				this.searchForm = params
				this.listdata = []
				this.total = 0
				this.searchHandle(1)
				this.getTotal()
			},
			// 搜索查询
			searchHandle (pageNo) {
				this.status = "loading"
				pageNo ? this.pageNo = pageNo : null
				gatherList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					beginDate: this.searchForm.beginDate?moment(this.searchForm.beginDate).format('YYYY-MM-DD 00:00:00'):'',
					endDate: this.searchForm.endDate ? moment(this.searchForm.endDate).format('YYYY-MM-DD 23:59:59'):'',
				}).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"
				}
			},
			// 总计
			getTotal(){
				this.titleStatus = true
				gatherTotal({
					beginDate: this.searchForm.beginDate?moment(this.searchForm.beginDate).format('YYYY-MM-DD 00:00:00'):'',
					endDate: this.searchForm.endDate ? moment(this.searchForm.endDate).format('YYYY-MM-DD 23:59:59'):''}).then(res=>{
						if(res.status==200){
							const a = res.data.find(item=>item.rubbishType=='GATHER_BUILDING')
							const b = res.data.find(item=>item.rubbishType=='GATHER_OTHER')
							const c = res.data.find(item=>item.rubbishType=='GATHER_KITCHEN')
							this.jianzhuTotal= a ? (a.rubbishWeight/1000).toFixed(3)/1 : '0'
							this.chuyuTotal= c ? (c.rubbishWeight/1000).toFixed(3)/1 : '0'
							this.otherTotal= b ? (b.rubbishWeight/1000).toFixed(3)/1 : '0'
						}
					console.log(res)
					this.titleStatus = false
				})
			},
			// 打开垃圾数据录入页面
			intoPage(item) {
				const flag=item ? item.gatherId : ''
				console.log(flag,'---------hangid,;;;;')
				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>