<template>
	<view class="container">
		<view class="page">
			<view class="search">
				<uni-search-bar placeholder="请输入单号" bgColor="#F8F6F9" radius="100" @confirm="search" @cancel="cancel" />
			</view>
			<view class="withdrawal">
				<view class="list" v-if="dataList.length">
					<view class="item" v-for="item in dataList" :key="item.id">
						<view class="title">
							<view class="name">{{item.balanceNum}}</view>
							<view class="tag">已结算</view>
						</view>
						<view class="content">
							<view class="text">
								<view class="name">分利金额</view>
								<view class="detail">￥{{item.balanceMoney}}</view>
							</view>
							<view class="text">
								<view class="name">账单数量</view>
								<view class="detail">{{item.balanceCount}}</view>
							</view>
							<view class="text">
								<view class="name">结算方式</view>
								<view class="detail">{{item.balanceWay}}</view>
							</view>
							<view class="text">
								<view class="name">提交时间</view>
								<view class="detail">{{item.createTime}}</view>
							</view>
						</view>
					</view>
				</view>
				<no-data :show="dataList.length === 0" text="暂无数据"></no-data>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		shareBalanceListApi
	} from '@/config/api.js'
	import noData from '@/components/no-data/no-data'
	export default {
		components: {
			noData
		},
		data() {
			return {
				page: {
					platformType: 'partner',
					balanceStatus: 3,
					pageSize: 10,
					pageNo: 1
				},
				dataList: [],
				isFinish: false,
			}
		},
		methods: {
			async getList(flag) {
				let {
					result
				} = await shareBalanceListApi(this.page)
				this.total = result.total;
				let data = result.records;
				if (flag) {
					uni.stopPullDownRefresh();
					this.dataList = [].concat(data)
				} else {
					this.dataList = this.dataList.concat(data)
				}
				if (data.length < 10) {
					this.isFinish = true
				} else {
					this.page.pageNo += 1
				}
			},
			search(value) {
				if (value.value) {
					this.page.balanceNum = value.value.toString();
					this.dataList = [];
					this.page.pageNo = 1;
					this.getList();
				}
			},
			cancel() {
				this.dataList = [];
				this.page.balanceNum = '';
				this.page.pageNo = 1;
				this.getList();
			}
		},
		onLoad() {
			const token = uni.getStorageSync('token');
			if (token) {
				this.getList()
			}
		},
		onPullDownRefresh() {
			this.page.pageNo = 1
			this.getList(true)
		},
		onReachBottom() {
			if (this.isFinish) return
			this.getList()
		}
	}
</script>
<style>
	page {
		background-color: #F8F6F9;
	}
</style>
<style lang="scss" scoped>
	.page {
		padding: 0 0 90rpx;
		background-color: #F8F6F9;
	}

	.search {
		background-color: #ffffff;
	}

	.withdrawal {
		padding: 30rpx;

		.list {
			.item {
				background-color: #ffffff;
				border-radius: 16rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;

				.title {
					height: 40rpx;
					line-height: 40rpx;
					margin-bottom: 30rpx;
					display: flex;
					justify-content: space-between;

					.name {
						font-size: 34rpx;
						color: #373737;
						display: flex;
						font-weight: bold;

					}

					.tag {
						padding: 0 24rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						text-align: center;
						color: #B6B6BA;
						background-color: #F8F8F8;
						border: 1px solid #B6B6BA;
						border-radius: 36rpx;
					}
				}


				.content {
					border-top: 1px solid #F0F0F2;
					padding-top: 20rpx;

					.text {
						display: flex;
						height: 60rpx;
						line-height: 60rpx;

						.name {
							width: 180rpx;
							font-size: 28rpx;
							color: #9D9CA6;
						}

						.detail {
							font-size: 28rpx;
							color: #373737;
						}
					}
				}

			}
		}
	}
</style>