<template>
	<app-layout>
	<view style="min-height: 100vh;background-color: #f7f7f7;padding-top: 24rpx;">
		<view class="main-around cross-center head">
			<view>
				<view class="hjx-tc-777 hjx-ts-22 mb24">已发放提成</view>
				<view class="price28 hjx-tc-B19D60 hjx-ts-50"><text>￥</text>{{dataInfo.already_send_amount}}</view>
			</view>
			<view>
				<view class="hjx-tc-777 hjx-ts-22 mb24">未发放金额</view>
				<view class="price28 hjx-tc-333 hjx-ts-50"><text>￥</text>{{dataInfo.not_send_amount}}</view>
			</view>
		</view>
		<view class="list">
			<view class="cross-center hjx-ts-30 hjx-tc-666" style="padding: 32rpx 0;">
				已发放提成<image style="width: 30rpx;height: 25rpx;margin-left: 8rpx;" src="https://t17.9026.com/web/statics/image/sale/tcff.png" mode=""></image>
			</view>
			<view style="width: 100%;height: 1px;background: #EAEAEA;"></view>
			<view class="main-between cross-center item" :class="{'item-line':true}" v-for="(item,index) in dataInfo.list" :key="index">
				<view class="main-between-y">
					<view class="hjx-ts-28 hjx-tc-222 hjx-tw-500">提成收入</view>
					<view class="hjx-ts-24 hjx-tc-666 hjx-tw-500">{{item.created_at}}</view>
				</view>
				<view class="hjx-tc-B19D60 hjx-ts-34 hjx-tw-600">￥{{item.change_amount}}</view>
			</view>
			<view class="no-more" v-if="isNoMore && dataInfo.list.length>0">没有更多了...</view>
			<app-no-goods v-if="dataInfo.list.length===0" :title="`暂无提成`" background="#fff"></app-no-goods>
		</view>
	</view>
	</app-layout>
</template>

<script>
	import appNoGoods from '@/components/page-component/app-no-goods/app-no-goods.vue';
	export default {
		components:{
			appNoGoods
		},
		data() {
			return {
				dataInfo:[],
				isNoMore:false,
				page:1,
			};
		},
		onLoad() {
			this.getData()
		},
		methods:{
			getData(){
				this.$request({
					url:this.$api.sale.income_record,
					data:{
						page:this.page
					},
					method:'post'
				}).then(res=>{
					if(res.code===0){
						this.dataInfo=res.data
						if(res.data.list.length<20){
							this.isNoMore=true
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head{
		width: 702rpx;
		height: 200rpx;
		background: linear-gradient(157deg, rgba(177, 157, 96, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 4rpx;
		opacity: 0.7;
		margin: 0 auto;
		text-align: center;
	}
	.price28{
		display: flex;
		align-items: flex-end;
		font-weight: 600;
		&>text{
			padding-bottom: 6rpx;
			font-size: calc(100% - 22rpx);
			font-weight: 400;
		}
	}
	.mb24{
		margin-bottom: 24rpx;
	}
	.list{
		width: 702rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 4rpx;
		margin: 24rpx auto 0;
		padding: 0 24rpx;
		.item{
			height: 136rpx;
			padding: 32rpx 0;
		}
		.item-line{
			border-bottom: 1rpx solid #EAEAEA;
		}
	}
</style>
