<template>
	<!-- 20221108 -->
	<view class="page">

		<!-- 页面内容 -->
		<view class="pageMain">

			<view class="jc-header-title bg-ff">
				<ty-tab-equally :active.sync="tabIndex" :list="navList" @click="tabChange" color="#2F97FF"></ty-tab-equally>
			</view>

			<view class="margin-top-title-header">
				<ty-list-list :status="load_status">
					<view class="padding-30 bg-ff flex align-center justify-between border-bottom-ed"
						 v-for="(item, index) in list"
						:key="index">
						<view class="flex-one">
							<view class="text-cut-one text-28 text-33">{{item.show_text}}</view>
							<view class="text-24 text-98">{{item.show_create_time}}</view>
						</view>
						<view class="text-right">
							<view class="text-28">{{item.commission}}</view>
							<view class="text-24 text-98">佣金：{{item.after_commission}}</view>
						</view>
					</view>
				</ty-list-list>
			</view>
		</view>


	</view>
</template>

<script scoped>
	import distribution from "./api/distribution.js"
	export default {
		data() {
			return {
				// tab标签选中index
				tabIndex: 0,
				// 导航条
				navList: ['全部', '收入', '支出'],
				// 列表加载状态
				load_status: '',
				// 我的佣金列表
				list: {}
			}
		},

		onReady() {
			this.loadList(1)
		},

		onReachBottom() {
			this.loadList(0)
		},

		methods: {
			//标签栏切换
			tabChange(e) {
				this.loadList(1)
			},

			/**
			 * 获取佣金明细列表
			 * @param {int} isFirstPage 是否第一页 0--不是 1--是
			 * @date 2022-11-08
			 */
			loadList(isFirstPage) {
				distribution.listCommissionLog(this, isFirstPage, this.tabIndex)
			}
		}
	}
</script>

<style scoped>
	.pageMain {
		width: 100vw;
		min-height: 100vh;
		background: #fff;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}
</style>
