<template>
	<view class="order-content">
		<view class="total">
			总计：{{totalWeight}}kg，{{totalMoney}}元
		</view>
		<scroll-view scroll-y class="list" @scrolltolower="onreachBottom">
			<view class="list-item" v-for="item in list" :key="item.id" @click="intoDetail(item)">
				<view class="cont title flex align_center justify_between">
					<text>{{item.createDate}}</text>
					<view class="flex align_center">
						<text>查看详情</text>
						<u-icon class="arrow-right" name="arrow-right" color="#999999" size="32"></u-icon>
					</view>
				</view>
				<view class="cont">
					<view class="cont-top flex align_center justify_between">
						<text>{{item.contactName||'--'}}</text>
						<text>{{'￥'+(item.originalAmount || 0)}}</text>
					</view>
					<view class="cont-bot flex align_center justify_between">
						<view @click.stop="callPhone(item.contactMobile)" class="flex align_center">
							<u-icon class="phone" name="icon_phone" custom-prefix="custom-icon" size="28" color="#999999"></u-icon>
							<text>{{item.contactMobile}}</text>
						</view>
						<text>{{item.payTypeDictValue||'--'}}</text>
					</view>
				</view>
			</view>
			<view class="nodata" v-if="list.length==0 && status!='loading'">
				<u-empty src="/static/def_result.png" :text="noDataText" icon-size="260" ></u-empty>
			</view>
			<view v-if="index==current" style="padding: 20upx;">
				<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { historyOrderQuery, historyOrderTotal } from '@/api/order.js'
	export default {
		data() {
			return {
				list: [], // 列表数据
				pageNo: 1,  //  当前页码
				pageSize: 10,  //  每页条数
				total: 0,  //  数据总条数
				noDataText: '暂无数据',  //  列表请求状态提示语
				status: 'loadmore',  //  加载中状态
				totalWeight: 0, // 总重量
				totalMoney: 0, //总金额
			}
		},
		onLoad() {
			this.pageInit()
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		methods: {
			pageInit() {
				this.pageNo = 1
				this.pageSize = 10
				this.total = 0
				this.totalWeight = 0
				this.totalMoney = 0
				this.list = []
				this.getRow(1)
				this.getTotalData()
			},
			// 打电话
			callPhone(phone) {
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			},
			// 进入详情
			intoDetail(item) {
				uni.navigateTo({
					url: '/pages/order/hisOrderDetail?orderNo='+item.orderReserveNo
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.action = 'onreachBottom'
				if (this.list.length < this.total) {
					this.pageNo += 1
					this.getRow()
				} else {
					if(this.list.length) {
						uni.showToast({
							title: '已经到底了',
							icon: 'none'
						});
					}
					this.status = "nomore"
				}
			},
			// 查询列表
			getRow(pageNo) {
				this.status = "loadmore"
				if (pageNo) {
					this.pageNo = pageNo
				}
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				}
				this.noDataText = '暂无数据'
				this.status = "loading"
				historyOrderQuery(params).then(res => {
					if (res.status == 200) {
						if (this.pageNo > 1) {
							this.list = this.list.concat(res.data.list || [])
						} else {
							this.list = res.data.list || []
						}
						this.total = res.data.count || 0
					} else {
						this.list = []
						this.total = 0
						this.noDataText = res.message
					}
					this.status = "loadmore"
				})
			},
			// 总计查询
			getTotalData() {
				historyOrderTotal({}).then(res=>{
					if(res.status == 200 && res.data) {
						this.totalWeight = res.data.totalAllWeight/1000 || 0
						this.totalMoney = res.data.originalAllAmount || 0
					} 
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		width: 100%;
	}
	.order-content{
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
		display: flex;
		flex-direction: column;
		.total{
			width: 100%;
			height: 80rpx;
			background: rgba(255, 209, 0, 0.4);
			opacity: 1;
			padding-left: 32rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #191919;
		}
		
		.list{
			flex: 1;
			width: 100%;
			overflow: auto;
			padding: 0 26rpx;
			box-sizing: border-box;
			.list-item{
				width: 100%;
				border-radius: 24rpx;
				margin-top: 20rpx;
				background-color: #fff;
				.cont{
					padding: 24rpx 32rpx;
				}
				.title{
					text{
						color: #666E75;
						font-size: 28rpx;
					}
					view{
						color: #999999;
						font-size: 32rpx;
						.arrow-right{
							margin-left: 10rpx;
						}
					}
				}
				.cont-top{
					text:first-child{
						font-size: 36rpx;
						color: #222222;
						font-weight: 600;
					}
					text:last-child{
						font-size: 32rpx;
						color: #222222;
					}
				}
				.cont-bot{
					font-size: 30rpx;
					color: #4C4C4C;
					margin-top: 20rpx;
					.phone{
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
					// text:last-child{
					// 	font-size: 24rpx;
					// 	color: #666E75;
					// }
				}
			}
		}
		.nodata{
			padding-top: 30vh;
		}
	}
</style>
