<template>
	<view class="content">
		<view class="header">
			<view @click="openScreen=true">
				<text v-if="searchForm.beginDate">{{searchForm.beginDate}} 至 {{searchForm.endDate}}</text>
				<text v-else>全部</text>
				<u-icon name="arrow-right" color="#9DA8B5" size="30"></u-icon>
				<!-- <u-image  class="filter-img" width="36rpx" height="36rpx" src="/static/filter.png"></u-image> -->
			</view>
			<!-- 总计 -->
			<view class="header-cont">
				总计：回收重量{{totalWeight}}kg，支出金额{{totalMoney}}元
			</view>
		</view>
		<view class="list-cont">
			<view class="item-title">
				详细记录
			</view>
			<view class="table">
				<view>日期</view>
				<view>重量(kg)</view>
				<view>金额(元)</view>
			</view>
			<scroll-view class="scroll-con" :scroll-top="scrollTop" scroll-y @scrolltolower="onreachBottom">
				<!-- 列表数据 -->
				<view class="table item" v-for="item in listdata" :key="item.id">
					<view>{{item.reserveFinishDate}}</view>
					<view>{{item.totalAllWeight/1000 || 0}}</view>
					<view>{{item.originalAllAmount || 0}}</view>
				</view>
				<view class="nodata" v-if="listdata.length==0 && status!='loading'">
					<u-empty src="/static/def_result.png" :text="noDataText" icon-size="260"></u-empty>
				</view>
				<view class="loadmore">
					<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
				</view>
			</scroll-view>
		</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 {recycleOrderReserve,recycleOrderReserveSum} 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 {
				listdata: [], // 列表数据
				pageNo: 1,  //  当前页码
				pageSize: 10,  //  每页条数
				total: 0,  //  数据总条数
				noDataText: '暂无数据',  //  列表请求状态提示语
				status: 'loadmore',  //  加载中状态
				openScreen: false,  //  是否打开筛选
				searchForm: {  //  查询条件
					beginDate: moment().startOf('year').format('YYYY-MM-DD'),  //  默认今年1月1号
					endDate: moment().format('YYYY-MM-DD'),  //  到今天
				},
				scrollTop: 0,  //  滚动条位置
				totalWeight: 0, // 总重量
				totalMoney: 0, //总金额
			}
		},
		onLoad() {
			this.searchHandle(1)
			this.getTotal()
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShow() {
		},
		methods: {
			// 打开查询弹窗
			openSearch(){
				if(this.hasLogin){
					this.openScreen = true
				}
			},
			// 获取查询参数 刷新列表
			refresh(params){
				this.searchForm = params
				this.listdata = []
				this.totalWeight = 0
				this.totalMoney = 0
				this.searchHandle(1)
				this.getTotal()
			},
			// 搜索查询
			searchHandle (pageNo) {
				this.status = "loading"
				this.pageNo = pageNo ? pageNo : this.pageNo
				recycleOrderReserve({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					beginRecycleDate: this.searchForm.beginDate?moment(this.searchForm.beginDate).format('YYYY-MM-DD 00:00:00'):'',
					endRecycleDate: 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(){
				recycleOrderReserveSum({
					beginRecycleDate: this.searchForm.beginDate?moment(this.searchForm.beginDate).format('YYYY-MM-DD 00:00:00'):'',
					endRecycleDate: this.searchForm.endDate ? moment(this.searchForm.endDate).format('YYYY-MM-DD 23:59:59'):''}).then(res=>{
						if(res.status==200 && res.data){
							this.totalWeight = res.data.totalAllWeight/1000 || 0
							this.totalMoney = res.data.originalAllAmount || 0
						} else {
							this.totalWeight = 0
							this.totalMoney = 0
						}
					console.log(res)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0;
		.header{
			width: 100%;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			margin-bottom: 20upx;
			font-size: 30rpx;
			color: #191919;
			view:first-child {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 28rpx 32rpx;
			}
			.header-cont{
				background: rgba(255, 209, 0, 0.4);
				padding: 20rpx 32rpx;
			}
			.filter-img{
				padding: 10upx;
			}
		}
		.list-cont{
			flex: 1;
			width: 100%;
			-webkit-box-flex:1;
			-webkit-flex:1;
			-ms-flex:1;
			background-color: #fff;
			padding: 0 32rpx;
			.item-title{
				padding: 28rpx 0rpx;
				font-size: 34rpx;
				color: #191919;
			}
			.table{
				padding: 20rpx 0;
				display: flex;
				font-size: 28rpx;
				view{
					width: 33%;
					text-align: center;
				}
			}
			.item{
				border-bottom: 1px solid #E5E5E5;
			}
			
		}
		.scroll-con{
			flex: 1;
			width: 100%;
			-webkit-box-flex:1;
			-webkit-flex:1;
			-ms-flex:1;
			overflow: auto;
			.item:last-of-type{
				border-bottom: none;
			}
			.nodata{
				padding-top: 120rpx;
			}
		}
		.footer{
			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>
