<template>
	<view class="content">
		<view class="header" @click="openPrice">
			<text >今日回收价格</text>
			<view>
				<text>查看详情</text>
				<u-icon name="arrow-right" color="#4F88F7" size="28"></u-icon>
			</view>
			<!-- <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-total">
			<view class="title">今日统计</view>
			<view class="header-cont">
				<view class="cont-item">
					<text v-if="!titleStatus" >{{otherTotal}}</text>
					<text>完成订单数(个)</text>
					<u-loading :show="titleStatus"></u-loading>
				</view>
				<view class="cont-item">
					<text v-if="!titleStatus" >{{chuyuTotal}}</text>
					<text>回收重量(kg)</text>
					<u-loading :show="titleStatus"></u-loading>
				</view>
				<view class="cont-item">
					<text v-if="!titleStatus" >{{jianzhuTotal}}</text>
					<text>交易金额(元)</text>
					<u-loading :show="titleStatus"></u-loading>
				</view>
			</view>
		</view>
		<!-- 接单按钮 -->
		<view class="btn-view start-btn">
			点击开始接单
		</view>
		<!-- 待处理订单 -->
		<view class="list">
			<view class="title">
				<view>待处理订单(10个)</view>
			</view>
			<view class="list-item" v-for="item in listdata" :key="item.id">
				<u-image class="img-icon" :src="item.icon?item.icon:'../../static/logo.jpg'" border-radius="16" width="160" height="160"></u-image>
				<view class="cont-item-right flex_1 flex flex_column justify_between">
					<view class="flex align_center justify_between">
						<view class="flex_1 bold ellipsis-one">{{item.name}}</view>
						<view @click="intoPage()" class="do-btn">去处理</view>
					</view>
					 <view class="greey-font flex align_center justify_between">
						 <view class="dizhi ellipsis-one">{{item.addrDetail}}</view>
						 <view class="flex align_center">
							 <view class="t-icon t-icon-icon_coordinate location-icon"></view>
							 <text>2.9KM</text>
						 </view>
					 </view>
					 <view class="greey-font">2021.05.10 上午，预估50~100kg</view>
					 <view class="flex">
						 <view class="mark">
						 	纸张类
						 </view>
						 <view class="mark">
						 	金属类
						 </view>
					 </view>
				</view>
			</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 {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: [
					{
						name: '百果园(未央路店)',
						addrDetail: '西安市未央区凤城八路海圣诞节回复多少积分',
					},
					{
						name: '百果园(未央路店)',
						addrDetail: '西安市未央区凤城八路海圣诞节回复多少积分',
					}
				], // 列表数据
				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: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'
				            })
				          })
				        }
				      })
				    }
			},
			// 打开回收价格页面
			openPrice(){
				uni.navigateTo({
					url: '/pages/recoveryPrice/index'
				})
				// if(this.hasLogin){
				// 	uni.navigateTo({
				// 		url: '/pages/recoveryPrice/index'
				// 	})
				// }
			},
			// 获取查询参数 刷新列表
			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;
		background-color: #fff;
		padding: 0 32rpx;
		color: #191919;
		.header{
			width: 100%;
			font-size: 36rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16upx 0;
			view:last-of-type {
				font-size: 32rpx;
				color: #4F88F7;
				text{
					margin-right: 10rpx;
				}
			}
			
		}
		.header-total{
			width: 100%;
			background: linear-gradient(214deg, #4F88F7 0%, #2D74FE 100%);
			border-radius: 24rpx;
			color: #fff;
			margin: 20rpx 0;
			.title {
				padding: 18rpx 34rpx;
				font-size: 32rpx;
			}
		}
		.header-cont{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 34rpx;
			.cont-item{
				display: flex;
				flex-direction: column;
				align-items: center;
				text{
					line-height: 50upx;
				}
				text:last-of-type{
					font-size: 24upx;
				}
				text:first-of-type{
					font-size: 48upx;
					font-family: Arial;
					font-style:italic;
				}
			}
		}
		.btn-view{
			width: 100%;
			height: 100rpx;
			border-radius: 24rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 36rpx;
			margin: 20rpx 0;
		}
		.start-btn{
			border: 1px solid #4F88F7;
			color: #4F88F7;
		}
		.end-btn{
			border: 1px solid #FF2C5C;
			color: #FF2C5C;
		}
		// item样式
		.list{
			.title{
				padding: 24rpx;
				font-size: 36rpx;
			}
		}
		.list-item {
			display: flex;
			align-items: center;
			font-size: 28upx;
			.cont-item-right{
				padding: 30upx 0upx;
				min-height: 220rpx;
				margin-left: 20upx;
				border-bottom: 1px solid #E5E5E5;
				font-size: 34rpx;
				color: #222222;
				width: 0;
				.location-icon{
					width: 20rpx;
					height: 20rpx;
					margin: 0 10rpx;
				}
				.do-btn{
					width: 120rpx;
					height: 48rpx;
					border: 1px solid #4F88F7;
					border-radius: 28rpx;
					font-size: 24rpx;
					color: #4F88F7;
					text-align: center;
					line-height: 48rpx;
				}
				.bold{
					font-weight: 600;
				}
				.greey{
					font-size: 28rpx;
					color: #424D5E;
				}
				.greey-font{
					font-size: 28rpx;
					color: #666666;
					line-height: 44rpx;
				}
				.dizhi{
					margin-right: 36rpx;
					flex: 1;
					line-height: 44rpx;
				}
				.btn{
					width: 132rpx;
					height: 52rpx;
					background: #FFD100;
					opacity: 1;
					border-radius: 28rpx;
					text-align: center;
					line-height: 52rpx;
					color: #191919;
					font-size: 28rpx;
				}
			}
			&:last-child .cont-item-right {
				border-bottom: none;
			}
			.mark{
				padding: 6rpx 16rpx;
				border-radius: 12rpx;
				font-size: 22rpx;
				margin-top: 12rpx;
				background-color: #EFEFEF;
				color: #666666;
				margin-right: 20rpx;
			}
			.mark-left{
				border: 1px solid #BB8415;
				color: #BB8415;
				margin-right: 20rpx;
			}
			.mark-right{
				border: 1px solid #FF6824;
				color: #FF6824;
			}
		}
	}
</style>
