<template>
	<view class="content my-bg" style="height: 100vh; display: flex; flex-direction: column;">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">账单推送</block>
		</cu-custom>
		<view class="fixed-t">
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==currentIndex?'text-orange cur':''"
						v-for="(item,index) in statusEnum" :key="index" @tap="tabSelect(index,item)">{{item.label}}
					</view>
				</view>
			</scroll-view>
		</view>

		<view style="flex: 1; overflow: hidden;">
			<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="scrolltolower">
				<view v-if="listData.length" style="padding-bottom: 50rpx;">
					<view class="item" v-for="(item,index) in listData" :key="index">
						<view class="no">{{item.id}}</view>
						<view class="top-region">
							<view><text>确认金额：</text><text>{{item.amount}}</text></view>
							<view><text>油站实际金额：</text><text>{{item.actualAmount || '--'}}</text></view>

							<view><text>创建时间：</text><text>{{item.createTime}}</text></view>
							<view><text>推送时间：</text><text>{{item.deadlineTime}}</text></view>
						</view>
						<view class="round" :class="statusEnum.find(i => i.value == item.ackStatus).color">
							<view>
								{{statusEnum.find(i => i.value == item.ackStatus).label}}
							</view>
						</view>
						<view class="bottom-region" v-if="item.ackStatus == 1">
							<button class="mini-btn" type="primary" size="mini" @click="examine(item)">审核</button>
						</view>
					</view>
				</view>
				<Empty v-else />
			</scroll-view>
		</view>
		<uni-popup ref="popup" @change="change">
			<view class="popup-frame">
				<view class="title">余额审核</view>
				<radio-group @change="radioChange">
					<label class="radio" style="font-size: 25rpx;">
						<radio style="transform:scale(0.7)" value="2" :checked="submitParams.ackStatus == 2" />余额无误
					</label>
					<label class="radio" style="font-size: 25rpx;margin-left: 20rpx;">
						<radio style="transform:scale(0.7)" value="3" />余额有误
					</label>
				</radio-group>
				<input v-if="submitParams.ackStatus == 3" class="uni-input input" v-model="submitParams.actualAmount"
					placeholder-style="placeholder-style" placeholder="请输入正确余额" />

				<button class="mini-btn position" type="primary" size="mini" @click="submit">提交</button>
				<button class="mini-btn position" size="mini" @click="$refs.popup.close()">取消</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import serve from '@/api/packageBill/push.js'

	export default {
		data() {
			return {
				parameter: {
					pageSize: 15,
					currentPage: 1,
					params: {
						ackStatus: '',
					},
					sorted: {}
				},
				submitParams: {
					batchNumber: '',
					actualAmount: '',
					ackStatus: '2'
				},
				listData: [],
				currentIndex: 0,
				statusEnum: [{
						value: '',
						label: '全部',
						color: ''
					},
					{
						value: '1',
						label: '待确认',
						color: 'orange'
					}, {
						value: '2',
						label: '确认无误',
						color: 'green'
					}, {
						value: '3',
						label: '金额有误',
						color: 'red'
					}
				],
				siteId: uni.getStorageSync('oilSitePriceId')
			}
		},

		onLoad() {
			// console.log('this.siteId', this.siteId)
			this.search()
		},
		// onReachBottom() { //上拉触底函数
		// 	// console.log('触底函数')
		// 	this.loadMoreOrder('onReachBottom')
		// },
		methods: {
			tabSelect(index, item) {
				this.currentIndex = index
				this.parameter.params.ackStatus = item.value
				this.parameter.currentPage = 1
				this.search()
			},

			examine(item) {
				this.submitParams.batchNumber = item.batchNumber
				this.submitParams.actualAmount = ''
				this.$refs.popup.open('center')
			},

			radioChange(val) {
				this.submitParams.ackStatus = val.detail.value
				if (val.detail.value == 2) {
					this.submitParams.actualAmount = ''
				}
			},

			submit() {
				if (this.submitParams.ackStatus == 3 && !this.submitParams.actualAmount) {
					uni.showToast({
						title: "请输入正确价格",
						icon: 'none'
					})
					return
				}
				serve.ackBill(this.submitParams).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code !== 20000) return

					this.$refs.popup.close()
					this.parameter.currentPage = 1
					this.search()
				})
			},


			search() {
				this.parameter.params.siteId = this.siteId
				serve.getByPageRecord(this.parameter).then(res => {
					if (res.code !== 20000) return
					if (this.parameter.currentPage == 1) {
						this.listData = res.data.list
						return
					}
					if (!res.data.list.length) {
						uni.showToast({
							title: '没有更多数据了~',
							icon: 'none'
						})
						return
					}
					this.listData = this.listData.concat(res.data.list);
				})
			},
			scrolltolower() {
				this.parameter.currentPage += 1
				this.search()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup-frame {
		position: relative;
		padding: 20rpx 50rpx;
		width: 600rpx;
		height: 335rpx;
		background: #fff;
		border-radius: 20rpx;

		.title {
			font-size: 30rpx;
			margin-bottom: 20rpx;
			text-align: center;
		}

		.input {
			margin-top: 20rpx;
			margin-left: 8rpx;
			padding-left: 15rpx;
			border: 1rpx solid #ddd;
			width: 67%;
			height: 57rpx;
			line-height: 57rpx;
		}

		.position {
			position: absolute;
			bottom: 20rpx;

			&:nth-of-type(1) {
				right: 30rpx;
			}

			&:nth-of-type(2) {
				right: 180rpx;
			}
		}
	}

	.placeholder-style {
		line-height: 57rpx;
	}

	.item {
		position: relative;
		overflow: hidden;
		margin: 40rpx auto 0;
		padding: 0 20rpx 15rpx 20rpx;
		width: 700rpx;
		min-height: 260rpx;
		font-size: 28rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2);

		.no {
			position: relative;
			// padding-right: 50rpx;
			width: 100%;
			height: 55rpx;
			line-height: 55rpx;
			text-align: right;


			&::after {
				content: '';
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
				width: 100%;
				height: 1rpx;
				background: #ddd;

			}
		}

		.round {
			position: absolute;
			right: 35rpx;
			top: 74rpx;
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			border: 1px solid;
			transform: rotate(-30deg);

			>view {
				margin: 15rpx auto;
				width: 130rpx;
				height: 130rpx;
				text-align: center;
				font-size: 25rpx;
				line-height: 130rpx;
				border: 1px dashed;
				border-radius: 50%;

			}

			&.green {
				border-color: #67c23a;

				>view {
					border-color: #67c23a;
					color: #67c23a;
				}
			}

			&.orange {
				border-color: #e6a23c;

				>view {
					border-color: #e6a23c;
					color: #e6a23c;
				}
			}

			&.red {
				border-color: #f56c6c;

				>view {
					border-color: #f56c6c;
					color: #f56c6c;
				}
			}
		}

		.top-region {
			position: relative;
			margin-top: 20rpx;
			padding-left: 18rpx;

			>view {
				width: 65%;

				text {
					font-size: 22rpx;

					&:nth-of-type(2) {
						float: right;
					}
				}
			}
		}

		.bottom-region {
			margin-top: 50rpx;
			text-align: right;
		}

	}

	.content {
		min-height: 100%;
	}

	.order-list .order-item:last-of-type {
		margin-bottom: 0;
	}

	.placeholder-hidden {
		opacity: 0;
	}

	.fixed-t {
		// position: fixed;
		width: 750upx;
		// z-index: 3;
	}

	.uni-input {
		height: 25rpx;
	}

	.uni-picker {
		height: 25rpx;
	}

	.uni-list-cell-db {
		width: 100%;
		height: 30rpx;
	}

	.popup_card_bottom {
		display: flex;
		justify-content: center;
		margin-top: 68rpx;
	}

	.popup_card_bottom_submit {
		background: #FE0505;
		color: #ffffff;
		font-size: 25rpx;
		width: 240rpx;
	}

	.popup_card_bottom_close {
		background: #FFFFFF;
		font-size: 25rpx;
		width: 240rpx;
	}

	.popup_card_from_item_right_text {
		font-size: 24rpx;
		color: #000000;
		max-width: 50%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 25rpx;

	}

	.popup_card_from_item_left_text {
		width: 150rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.popup_card_from_item {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.popup_card_title {
		text-align: center;
		font-weight: 500;
		color: #000000;
		font-size: 36rpx;
		margin-bottom: 80rpx;
	}

	.popup_card {

		width: 681rpx;
		height: 528rpx;
		background: #FFFFFF;
		border-radius: 15px;
		padding: 64rpx;
	}
</style>
