<template>
	<!-- #ifdef H5 -->
	<zj-page-layout :hasFooter="false" :isScroll="true" :refresherTriggered="refresherTriggered"
		@refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">
		<view class="all-container">
			<view class="top-container">
				<view class="item" :class="tabCurrent === '' ? 'current' : ''" @tap="changeTab('')">
					<view class="money">{{ total.totalAmount | priceFilter }}</view>
					<view class="text">累计总收益</view>
				</view>
				<view class="item" :class="tabCurrent === 'OVER' ? 'current' : ''" @tap="changeTab('OVER')">
					<view class="money">{{ total.paidAmount | priceFilter }}</view>
					<view class="text">已结算收益</view>
				</view>
				<view class="item" :class="tabCurrent === 'ING' ? 'current' : ''" @tap="changeTab('ING')">
					<view class="money">{{ total.waitingAmount | priceFilter }}</view>
					<view class="text">待结算收益</view>
				</view>
			</view>
			<view class="out-title">
				<view>收益明细</view>
				<view class="right" @tap="toReturn">查看退款明细</view>
			</view>
			<view class="list-container">
				<block v-for="(item, index) in dataList" :key='index'>
					<view class="item" @tap="toDetail(item)">
						<view class="left">
							<view class="row">订单编号：{{ item.orderId }}</view>
							<view class="row">订单类型：{{ ["商城分销订单", "延保分销订单"][item.flag - 1] }}</view>
							<view class="row">订单金额：¥{{ item.payment | priceFilter }}</view>
							<view class="row">支付时间：{{ item.payTime }}</view>
						</view>
						<view class="right">
							<view class="state wait" v-if="item.status == 'ING'">待结算</view>
							<view class="state over" v-if="item.status == 'OVER'">已结算</view>
							<view class="state cancel" v-if="item.status == 'CANCEL'">已取消</view>
							<view class="state cancel" v-if="item.status == 'EXCEPTION'">异常结算</view>
							<view class="state over" v-if="item.status == 'OFFLINE'">线下结算</view>
							<view class="price" v-if="item.status !== 'CANCEL'">+{{ item.amount | priceFilter }}</view>
							<view class="price" v-else></view>
              <view class="free" v-if="item.handleFees">
                <view>手续费</view>
                <view>¥{{ item.handleFees | priceFilter }}</view>
              </view>

						</view>
					</view>
				</block>
			</view>
			<Loading :loadStatus="loadStatus" :dataList="dataList" />
		</view>
	</zj-page-layout>
	<!-- #endif -->
	<!-- #ifndef H5 -->
	<web-view :src="webViewHref(`/packageMine/pages/profit/list`, pam, crossPagePam)"
		@message="crossPage.$listener"></web-view>
	<!-- #endif -->
</template>

<script>
// #ifdef H5
export default {
	data() {
		return {
			tabCurrent: '',
			total: {}, // 收益统计
			dataList: [], // 收益列表
			pageNum: 1,
			loadStatus: 0,
			refresherTriggered: false,
		}
	},

	onLoad() {
		this.getTotal();
		this.getList();
	},

	methods: {
		// 获取累积收益
		getTotal() {
			this.$api.get('/user/profit', {
				userId: this.$store.state.user.userId
			}).then(res => {
				this.total = res.data;
			})
		},

		// 获取列表
		getList() {
			this.$api.get('/user/profit/list', {
				pageNum: this.pageNum,
				pageSize: 10,
				userId: this.$store.state.user.userId,
				status: this.tabCurrent,
			}).then(res => {
				this.loadStatus = 0;
				let list = res.data.records;
				if (list.length < 10) {
					this.loadStatus = 2;
				}
				this.dataList = this.dataList.concat(list);
			}).catch(() => {
				this.loadStatus = 2;
			}).finally(res => {
				this.refresherTriggered = false;
			})
		},

		// 滚动到底部
		scrolltolower(e) {
			if (this.loadStatus === 0) {
				this.pageNum++;
				this.getList();
			}
		},

		// 触发下拉刷新
		refresherrefresh(e) {
			this.refresherTriggered = true;
			this.getTotal();
			this.refreshList();
		},

		refreshList() {
			this.dataList = [];
			this.pageNum = 1;
			this.getList();
		},

		changeTab(tab) {
			this.tabCurrent = tab;
			this.refreshList();
		},

		toDetail(item) {
			this.$navToPage({
				url: [
					'/packageMine/pages/profit/detail?orderId=' + item.orderId + '&orderRefundId=' + item.orderRefundId,
					'/packageMine/pages/profit/ybdetail?orderId=' + item.orderId + '&orderRefundId=' + item.orderRefundId
				][item.flag - 1]
			})
		},

		toReturn() {
			this.$navToPage({
				url: '/packageMine/pages/profit/return'
			})
		}
	}
}
// #endif
// #ifndef H5
export default {
	data() {
		return {
			pam: {},
		}
	},

	onLoad(pam) {
		this.pam = pam;
	},
}
// #endif
</script>

<style lang="scss">
.all-container {
	padding: 20rpx;
}

.top-container {
	background: #FFFFFF;
	border-bottom: 1px solid #F4F2F2;
	height: 160rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border-radius: 10rpx;

	.item {
		width: 33.33%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		box-sizing: border-box;
		font-weight: normal;
		opacity: 0.8;

		&:nth-child(2) {
			border-left: 1px solid #E5E5E5;
			border-right: 1px solid #E5E5E5;
		}

		&.current {
			font-weight: bold;
			opacity: 1;

			.text {
				border-bottom: 2px solid $theme-color;
			}
		}

		.money {
			font-size: 40rpx;
			color: $theme-color;
			line-height: 40rpx;
		}

		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 36rpx;
			margin-top: 16rpx;
		}
	}
}

.out-title {
	font-size: 28rpx;
	color: #333333;
	font-weight: bold;
	padding: 20rpx 10rpx 10rpx;
	display: flex;
	justify-content: space-between;

	.right {
		font-weight: normal;
	}
}

.list-container {
	padding: 20rpx;

	.item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;

		.left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.row {
				font-size: 28rpx;
				color: #666666;
        margin-top: 12rpx;
        &:first-child {
          margin-top: 0;
        }
			}
		}

		.right {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-end;

			.state {
				font-size: 28rpx;

				&.wait {
					color: #FE781F;
				}

				&.over {
					color: #3F9EFF;
				}

				&.cancel {
					color: #999999;
				}
			}

			.price {
				font-size: 32rpx;
				color: #333333;
			}

      .free {
        margin-top: 20rpx;
        view {
          font-size: 28rpx;
          text-align: right;
        }
      }
		}
	}
}
</style>
