<template>
	<view class="container">
		<view class="tui-order-item boxbg">
			<view class="content">
				<view class="shop-box" style="background: #fff;display: block;overflow: hidden;margin: 0 auto 10px;">
					<view style="height: auto;position: relative;line-height: 60rpx;width: 95%;margin: 0 auto;">
						<view style="width: 200rpx;font-weight: bold;text-align: center;border-bottom: 2px solid #FAE7B5;margin: 0 auto 20rpx;">
							装车记录
						</view>
						<view style="width: 95%;border-bottom: 2px solid #eee;margin: 0 auto;" v-if="upCarList.length > 0">
							<view v-if="upCarList.length > 0 && upCarList[0].logisticsEntruckingLogList.length > 0">操作人账号：{{upCarList[0].logisticsEntruckingLogList[0].createBy}}</view>
							<view v-if="upCarList.length > 0 && upCarList[0].logisticsEntruckingLogList.length > 0">操作时间：{{upCarList[0].logisticsEntruckingLogList[0].createTime}}</view>
						</view>
						<view style="width: 95%;border-bottom: 2px solid #eee;margin: 0 auto;" 
							v-if="upCarList.length > 0 && upCarList[0].logisticsEntruckingLogList.length > 0"
							v-for="(item,index) in upCarList[0].logisticsEntruckingLogList" :key="index">
							<view>车牌号：{{item.carNumber}} <text style="padding-left: 20rpx;">司机电话：{{item.carPhone}} </text></view>
							<view>装车费：{{item.carFreight}} <text style="padding-left: 20rpx;">运费：{{item.carFee}}</text></view>
						</view>
					</view>
					<view style="height: auto;position: relative;line-height: 60rpx;width: 95%;margin: 0 auto;">
						<view style="width: 200rpx;font-weight: bold;text-align: center;border-bottom: 2px solid #FAE7B5;margin: 0 auto 20rpx;">
							数据汇总
						</view>
						<view style="width: 95%;border-bottom: 2px solid #eee;margin: 0 auto;">
							<view>车辆总运费：{{allCarFee.toFixed(2)}}</view>
							<view>车辆总装车费：{{allCarFreight.toFixed(2)}}</view>
						</view>
						<view style="width: 95%;border-bottom: 2px solid #eee;margin: 0 auto;">
							<view>现金总额：{{allPayXianjinNum.toFixed(2)}} 
							<text style="padding-left: 60rpx;">月付总额：{{allPayMonthNum.toFixed(2)}} </text>
							<text style="padding-left: 60rpx;">提付总额：{{allPayArraveNum.toFixed(2)}} </text></view>
						</view>
						<view style="width: 95%;border-bottom: 2px solid #eee;margin: 0 auto;">
							<view>运费总额：{{allOrderNum.toFixed(2)}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="shop-box" style="background: #fff;display: block;overflow: hidden;margin: 0 auto 10px;">
			
			<view style="width: 100%;height: 80rpx;line-height: 80rpx;text-align: center;font-weight: bold;font-size: 40rpx;">
				{{startDate}}
			</view>
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr style="background: #eee;">
					<uni-th align="center" width="160">票号</uni-th>
					<uni-th align="center" width="100">收货人</uni-th>
					<uni-th align="center" width="80">总费用</uni-th>
					<uni-th align="center">始发站</uni-th>
					<uni-th align="center">到达站</uni-th>
					<uni-th align="center">修改次数</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				
				<uni-tr @tap="xiaoshouDetail(item)" v-if="orderList.length > 0" v-for="(item,index) in orderList" :key="index">
					<uni-td align="center"><view :style="{color:item.changeCount>0?'red':'#000'}">{{item.orderNumber}}</view></uni-td>
					<uni-td align="center"><view :style="{color:item.changeCount>0?'red':'#000'}">{{item.receiverName}}</view></uni-td>
					<uni-td align="center"><view :style="{color:item.changeCount>0?'red':'#000'}">{{item.allCost}}</view></uni-td>
					<uni-td align="center">
						<view :style="{color:item.changeCount>0?'red':'#000'}">
						{{item.goStationName}}</view>
					</uni-td>
					<uni-td align="center">
						<view :style="{color:item.changeCount>0?'red':'#000'}">
						{{item.arrivalStationName}}</view>
					</uni-td>
					<uni-td align="center">
						<view :style="{color:item.changeCount>0?'red':'#000'}">
							{{item.changeCount}}
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range: [],
				status: 'nomore',
				pages: 1,
				startDate:'',
				orderList:[],
				endDate:'',
				pageNum: 1,
				allCarFee:0,
				allCarFreight:0,
				allOrderNum:0,
				allPayXianjinNum:0,
				allPayMonthNum:0,
				allPayArraveNum:0,
				upCarList:[]
			}
		},
		onLoad(option) {
			let that = this;
			this.userId = option.id
			this.startDate = option.day
			this.endDate = option.day
			this.getUpCarList()
			this.getOrderList()
			setTimeout(res => {
				this.$forceUpdate()
			}, 1000)
		},
		onReachBottom() {
			if (this.pageNum >= this.pages) return;
			this.status = 'loading';
			this.pageNum++;
			this.getOrderList();
		},
		methods: {
			getOrderList(){
				let that = this
				uni.request({
					url: this.tui.interfaceUrl() + '/app/logisticsOrder/getLogisticsOrderPageList',
					data:{ //stationId
						companyId:uni.getStorageSync('transCompany'),
						startDate:this.startDate,
						endDate:this.startDate,
						pageNum:this.pageNum,
						pageSize:'10'
					},
					header: {
						'content-type': 'application/json',
						'appWLToken': this.tui.getToken()
					},
					method: 'POST', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						this.status = 'nomore';
						if(res.data.code == 401){
							uni.clearStorage()
							uni.navigateTo({
								url: '/package2/login/login'
							})
						}
						if (res.data.code == 200){
							if (this.pages == 1) {
								this.orderList = res.data.result.records
							} else {
								this.orderList = [...this.orderList, ...res.data.result.records]
							}
							for(let i = 0;i<this.orderList.length;i++){
								this.allOrderNum += this.orderList[i].allCost
								if(this.orderList[i].methodOfSettlement == '0'){
									this.allPayXianjinNum += this.orderList[i].allCost
								}else if(this.orderList[i].methodOfSettlement == '1'){
									this.allPayMonthNum += this.orderList[i].allCost
								}else if(this.orderList[i].methodOfSettlement == '2'){
									this.allPayArraveNum += this.orderList[i].allCost
								}
							}
							this.$forceUpdate()
							this.pages = res.data.result.pages
						}
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			getUpCarList(){
				uni.request({
					url: this.tui.interfaceUrl() + '/app/logisticsEntruckingLog/getDateLogisticsEntruckingLogPageList',
					data:{
						companyId:uni.getStorageSync('transCompany'),
						companyName:uni.getStorageSync('companyName'),
						pageNum:this.pageNum,
						startDate:this.startDate,
						endDate:this.endDate,
						circuitId:"",
						circuitName:"",
						carNumber:""
					},
					header: {
						'content-type': 'application/json',
						'appWLToken': this.tui.getToken()
					},
					method: 'POST', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						if(res.data.code == 401){
							uni.clearStorage()
							uni.navigateTo({
								url: '/package2/login/login'
							})
						}
						if(res.data.code == 200){
							this.upCarList = res.data.result.records
							for(let i = 0;i<this.upCarList.length;i++){
								for(let j = 0;j<this.upCarList[i].logisticsEntruckingLogList.length;j++){
									this.allCarFee += this.upCarList[i].logisticsEntruckingLogList[j].carFee
									this.allCarFreight += this.upCarList[i].logisticsEntruckingLogList[j].carFreight
								}
							}
							this.$forceUpdate()
						}
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			xiaoshouDetail(item){
				uni.navigateTo({
					url:'/package2/other/logisticsOrderDetail?item='+ JSON.stringify(item)
				})
			}
		},
	}
</script>

<style lang="scss">

	.container {

		.boxbg {
			padding-top: 10rpx;
			background-color: #FAF7F7;
		}

		.tui-order-item {
			.u-collapse-content {
				display: flex;
				justify-content: space-between;
				line-height: 30px;
			}
		}
	}
	.uni-table-th {
		background: #FAE7B5 !important;
		color: #000 !important;
	}
	
	.shop-box {
		margin: 0 auto;
		position: relative;
	}
</style>