<template>
	<view class="homePage-container">
		<!-- 筛选弹框 -->
		<search-modal v-if="openScreen" :visible="openScreen" :defaultParams="searchForm" @refresh="refresh" @close="openScreen=false"></search-modal>
		<view class="homePage-head">
			<view class="head-con">
				<text class="homePage-tit">交易记录</text>
				<view class="total-con">
					总计：
					<text class="goleNum">{{ldTotal}}</text>
					<image src="/static/ledou.png" class="ld-icon"></image>
				</view>
			</view>
			<image class="filter-icon" src="@/static/filter.png" @tap="openScreen=true"></image>
		</view>
		<scroll-view class="scroll-con" scroll-y :scroll-top="scrollTop" @scrolltolower="onreachBottom">
			<!-- 列表数据 -->
			<view class="cell-item-con">
				<view class="cell-item" v-for="(item, index) in listdata" :key="index">
					<view class="cell-item-c">
						<view class="cell-item-label">交易时间</view>
						<view class="cell-item-main">{{item.createDate}}</view>
					</view>
					<view class="cell-item-c">
						<view class="cell-item-label">支付账户</view>
						<view class="cell-item-main">{{item.customerMobile}}</view>
					</view>
					<view class="cell-item-c">
						<view class="cell-item-label">交易数量（个）</view>
						<view :class="['cell-item-main', item.changeType=='ADD' ? 'red' : 'blue']">{{item.changeType=='ADD' ? '+' : item.changeType=='SUB' ? '-' : ''}}{{ item.changeNum }}</view>
					</view>
					<view class="cell-item-c">
						<view class="cell-item-label">备注</view>
						<view class="cell-item-main">{{item.remarks ? item.remarks : '--'}}</view>
					</view>
					<view class="cell-item-c handle-con">
						<view class="cell-item-label">操作</view>
						<view class="cell-item-main">
							<u-button size="mini" v-if="item.changeType=='ADD' && item.cancelFlag==0" class="handle-btn" hover-class="none" :custom-style="customBtnStyle" @click="revokeFun(item)">撤销单据</u-button>
							<text v-if="item.changeType=='ADD' && item.cancelFlag==1" style="color: #909399;">单据已撤销</text>
							<text v-if="item.changeType=='SUB'" style="color: #909399;">扫码支付撤销</text>
						</view>
					</view>
				</view>
			</view>
			<u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
			<view class="loadmore">
				<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
			</view>
		</scroll-view>
		
		<view class="footer-bar">
			<u-button shape="circle" @click="openQuery" size="medium" type="primary">用户乐豆查询/核销</u-button>
		</view>
	</view>
</template>
<script>
	import searchModal from './searchModal.vue'
	import { getGoldLogList, GoldLogCancel, GoldLogTotal } from '@/api/officialPartnerGoldLog.js'
	export default {
		components: { searchModal },
		data() {
			return {
				listdata: [],
				pageNo: 1,  //  当前页码
				pageSize: 10,  //  每页条数
				total: 0,  //  数据总条数
				noDataText: '暂无数据',  //  列表请求状态提示语
				status: 'loadmore',  //  加载中状态
				openScreen: false,  //  是否打开筛选
				searchForm: {  //  查询条件
					beginDate: '',  //  创建时间默认筛选近7天
					endDate: '',  //  创建时间默认筛选近7天
					customerMobile: ''  //  支付账户
				},
				customBtnStyle: {  //  撤销单据  自定义按钮样式
					borderColor: '#2ab4e5',
					backgroundColor: '#2ab4e5',
					color: '#fff'
				},
				scrollTop: 0,  //  滚动条位置
				ldTotal: 0  //  乐豆总计数
			}
		},
		onShow() {
			this.openScreen = false  //  关闭筛选框
			this.refresh({})
		},
		methods:{
			openQuery(){
				uni.navigateTo({
					url: "/pages/userCenter/leDouQuery"
				})
			},
			//  总计
			getGoldLogTotal(){
				GoldLogTotal({
					beginDate: this.searchForm.beginDate,
					endDate: this.searchForm.endDate,
					customerMobile: this.searchForm.customerMobile
				}).then(res => {
					if(res.status == 200){
						this.ldTotal = res.data ? res.data.changeNum : 0
					}else{
						this.ldTotal = 0
					}
				})
			},
			// 获取查询参数 刷新列表
			refresh(params){
				this.searchForm = params
				this.listdata = []
				this.total = 0
				this.searchHandle(1)
				this.getGoldLogTotal()
			},
			//  撤销单据
			revokeFun(row){
				const _this = this
				uni.showModal({
				  title: '提示',
				  content: '撤销单据后乐豆将全部退回给原支付账号，确认撤销吗？',
				  success(res) {
				    if (res.confirm) {
				      GoldLogCancel({ id: row.id }).then(ret => {
						  if(ret.status == 200){
							  uni.showToast({ title: ret.message, icon: 'none' })
							  _this.searchHandle(1)
						  }
					  })
				    }
				  }
				})
			},
			// 搜索查询
			searchHandle (pageNo) {
				this.status = "loading"
				pageNo ? this.pageNo = pageNo : null
				getGoldLogList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					beginDate: this.searchForm.beginDate,
					endDate: this.searchForm.endDate,
					customerMobile: this.searchForm.customerMobile
				}).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() {
				if(this.listdata.length < this.total){
					this.pageNo += 1
					this.searchHandle()
				}else{
					uni.showToast({ title: '已经到底了', icon: 'none' })
					this.status = "nomore"
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.homePage-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 102rpx 0;
		.footer-bar{
			width: 100%;
			display: flex;
			align-items: center;
			height: 102rpx;
			justify-content: center;
			padding: 0 10%;
			position: fixed;
			bottom: 0;
			left: 0;
		}
		// 筛选菜单
		.homePage-head{
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			padding: 26rpx 30rpx;
			background-color: #fff;
			box-shadow: 0rpx 0rpx 14rpx rgba(0,0,0,.05);
			width: 100%;
			border-top: 10rpx solid #f8f8f8;
			.head-con{
				flex-grow: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.homePage-tit{
					color: #040301;
				}
				.total-con{
					color: #040301;
					.goleNum{
						color: #eb0000;
						font-size: 30rpx;
						font-weight: bold;
					}
					.ld-icon{
						width: 30rpx;
						height: 30rpx;
						margin: 0 0 0 10rpx;
						vertical-align: middle;
					}
				}
			}
			.filter-icon{
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				padding-left: 20rpx;
			}
		}
		//  列表
		.scroll-con{
			flex: 1;
			// height: calc(100% - 40);
			overflow: auto;
		}
		//  列表样式
		.cell-item-con{
			margin: 20rpx;
			.cell-item{
				background-color: #fff;
				color: #606266;
				padding: 0 30rpx;
				margin-bottom: 20rpx;
				border-radius: 16rpx;
				font-size: 28rpx;
				box-shadow: 3rpx 3rpx 5rpx #eee;
				.cell-item-c{
					display: flex;
					justify-content: space-between;
					padding: 18rpx 0;
					border-bottom: 1rpx solid #f2f2f2;
					.cell-item-label{
						flex-shrink: 0;
						width: 200rpx;
						color: #303133;
					}
					.cell-item-main{
						flex-grow: 1;
						text-align: right;
						.handle-btn{
							border-color: #fcbd71!important;
							background-color: #fcbd71!important;
						}
					}
					.blue {
						color: #1890FF;
					}
					.green {
						color: #16b50e;
					}
					.red {
						color: red;
					}
					&:last-child{
						border: none;
					}
				}
				.handle-con{
					align-items: center;
					// margin-top: 10rpx;
					// padding-top: 18rpx;
					// padding: 0;
				}
			}
		}
		
	}
</style>
