<template>
	<view class="excalation_body">
		<view class="excalation_body_card">
			<view class="card_item">
				<view class="tip"></view>
				<view class="excalation_body_card_title_text">{{accountName}}</view>
			</view>
			<view class="card_item">
				<view class="fh">￥</view>
				<input type="number" @input="chenkFn" v-model="money" class="card_item_input" placeholder="请输入当前油站金额" />
			</view>
			<view class="card_item " style="display: flex;">
				<text>余额结余时间：</text>
				<text style="color: #FE0505;">{{single?single:'请选择余额结余时间'}}</text>
				<uni-datetime-picker :start="start " type='datetime' v-model="single">
					<uni-icons size="18" style="margin-left: 45rpx;" type="calendar"></uni-icons>
					</uni-datetime-picker>
				
			</view>
			<button :disabled="disabled" @click="submit" class="card_butten">上报</button>
		</view>
		<scroll-view :scroll-top='scrollTop' @scroll='scroll' class="excalation_body_list" style="height: 100%;" scroll-y="true" @scrolltolower='scrolltolower'>
			<view v-for="(item,index) in list" class="excalation_body_list_item list_item">
				<view class="excalation_body_list_item_left">
					<view class="small_text">
						<text>{{userName}}</text>
						<text class="text_spacing">{{pnone}}</text>
					</view>
					<view class="tip_text">
						<text>上报时间</text>
						<text class="text_spacing">{{item.reportTime}}</text>
					</view>
				</view>
				<view class="excalation_body_list_item_right">
					<text>￥</text>
					<text>{{Number(item.balance).toFixed(2)}}</text>
				</view>
			
			</view>
		</scroll-view>
	<!-- 	<view class="excalation_body_list">
			<view v-for="(item,index) in list" class="excalation_body_list_item list_item">
				<view class="excalation_body_list_item_left">
					<view class="small_text">
						<text>{{userName}}</text>
						<text class="text_spacing">{{pnone}}</text>
					</view>
					<view class="tip_text">
						<text>上报时间</text>
						<text class="text_spacing">{{item.reportTime}}</text>
					</view>
				</view>
				<view class="excalation_body_list_item_right">
					<text>￥</text>
					<text>{{Number(item.balance).toFixed(2)}}</text>
				</view>
			</view>
		</view> -->
		<uni-popup ref="popup">
			<view class="popup_card">
				<view class="popup_card_title">是否确认上报</view>
				<view class="popup_card_from">
					<view class="popup_card_from_item">
						<view class="popup_card_from_item_left_text">上报人油站：</view>
						<view class="popup_card_from_item_right_text"> {{accountName}}</view>
					</view>
					<view class="popup_card_from_item">
						<view class="popup_card_from_item_left_text">上报金额：</view>
						<view class="popup_card_from_item_right_text"> {{money}}</view>
					</view>
					<view class="popup_card_from_item">
						<view class="popup_card_from_item_left_text">上报人：</view>
						<view class="popup_card_from_item_right_text"> {{userName}}</view>
					</view>
					<view class="popup_card_from_item">
						<view class="popup_card_from_item_left_text">上报时间：</view>
						<view class="popup_card_from_item_right_text"> {{date}}</view>
					</view>
				</view>
				<view class="popup_card_bottom">
					<button @click="$refs.popup.close()" class="popup_card_bottom_close">取消</button>
					<button @click="report" class="popup_card_bottom_submit">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import finance from '@/api/oil-finance.js'
	export default {
		data() {
			return {
				start:'',
				single:'',
				scrollTop:0,
				load:true,
				list: [],
				pnone: uni.getStorageSync('user').userPhone,
				page: {
					pageSize: 15, // 每页显示条数
					currentPage: 1, // 默认页
					params: {
						siteId: uni.getStorageSync('oilSitePriceId')
					}, // 查询参数
					sorted: {},
					columns: []
				},
				disabled: true,
				money: '',
				accountName: uni.getStorageSync('siteOli'),
				userName: uni.getStorageSync('loginUser').name,
				date: null
			}
		},
		watch: {
			money: function(n) {
				if (n !== '' && Number(n) !== 0) {
					this.disabled = false
				} else {
					this.disabled = true
				}
			}

		},
		onShow() {
			this.start = this.datefn();
			this.single = this.datefn()
			this.getByPage()
		},
		methods: {
			scroll(e){
				this.scrollTop = e.detail.scrollTop
			},
			scrolltolower(){
				this.$nextTick(function(){
					this.scrollTop = this.scrollTop -80;
					this.page.currentPage+=1
					this.getByPage()
				})
			},
			getByPage() {
				finance.getByPage(this.page).then(res => {
					if(this.page.currentPage>1){
						this.list = this.list.concat(res.data.list)
					}else{
						this.list = res.data.list
					}
					console.log(this.list)
				})
			},
			report() {
				finance.report({
					siteId: uni.getStorageSync('oilSitePriceId'),
					userId: uni.getStorageSync('user').id,
					reportTime:this.single,
					balance: this.money
				}).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: '上报成功',
							icon: 'success'
						});
						this.$refs.popup.close();
						this.page.currentPage=1
						this.getByPage()
					}
				})
			},
			chenkFn() {
				let chenk = /^\d+(.\d{1,2})?$/
				if (!chenk.test(Number(this.money))) {
					this.$nextTick(function() {
						this.money = this.money.slice(0, this.money.length - 1);
						console.log(this.money.length - 1, )
					})
				} else {
					if (this.money.indexOf('.') !== -1 && this.money.split('.')[1].length > 2) {
						this.$nextTick(function() {
							this.money = Number(this.money).toFixed(2);
						})
					}
				}
			},
			datefn() {
				let a = new Date();
				return `${a.getFullYear()}-${a.getMonth()+1}-${a.getDay()} ${a.getHours()}:${a.getMinutes()}:${a.getSeconds()}`
			},
			submit() {
				this.$refs.popup.open('center')
				this.date = this.datefn();
			}
		}
	}
</script>

<style>
	.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 {
		font-size: 24rpx;
		color: #666666;
	}

	.popup_card_from_item {
		display: flex;
		justify-content: space-between;
		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: 628rpx;
		background: #FFFFFF;
		border-radius: 15px;
		padding: 64rpx;
	}

	.tip_text {
		font-size: 22rpx;
		color: #999999;
		margin-top: 12rpx;
	}

	.text_spacing {
		margin-left: 15rpx;
	}

	.small_text {
		font-size: 28rpx;
	}

	.card_item_input {
		margin-left: 27rpx;
	}

	.fh {
		font-size: 60rpx;
	}

	.excalation_body_list_item_right {
		min-width: 143rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.excalation_body_list_item_left {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 25rpx;
	}

	.excalation_body_list_item {
		display: flex;
	}

	.excalation_body_list {
		margin-top: 32rpx;
		flex: 1;
		background-color: white;
		padding: 22rpx;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.card_butten {
		background-color: #FE0505;
		color: white;
		font-size: 36rpx;
	}

	.excalation_body_card_title_text {
		flex: 1;
		margin-left: 27rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.tip {
		width: 8rpx;
		height: 36rpx;
		background-color: #FE0505;
		display: inline-block;
	}

	.list_item {
		border-bottom: 1rpx solid #F1F2F7;
		padding-bottom: 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.card_item {
		border-bottom: 1rpx solid #F1F2F7;
		padding-bottom: 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.excalation_body_card_title {
		border-bottom: 1rpx solid #F1F2F7;
		padding-bottom: 40rpx;
		display: flex;
		align-items: center;
	}

	.excalation_body_card {
		height: 490rpx;
		background-color: #ffffff;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.excalation_body {
		background-color: #f1f2f7;
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		font-size: 28rpx;
	}
</style>