<template>
	<view class="my_commission_wrap">
		<view class="queryParams_wrap">
			<view class="search">
				<u--input clearable prefixIcon="search" v-model="queryParams.phone" shape="circle" clearable
					@blur="handleKeyword" @clear="handleKeywordClear" placeholder="请输入电话"></u--input>
			</view>
			<view class="query">
				<view style="margin-right: 10rpx;" @click="handleshowFilter">筛选</view>
				<u-icon name="arrow-down-fill" color="#aaa" size="10"></u-icon>
			</view>
		</view>

		<view class="commission_item_wrap">
			<!-- 统计信息 -->
			<commission-item v-for="item in listData" :key="item.id" :item="item" :type="type"></commission-item>
		</view>

		<filter-query ref="filter" v-model="queryParams" @getList="resetData" :mapHeight="mapHeight"></filter-query>

		<!-- 加载更多 -->
		<u-loadmore :status="loadStatus" v-if="listData.length > 0" />
		<!-- 空状态 -->
		<show-emtry v-if="listData.length === 0"></show-emtry>
	</view>
</template>

<script>
import pullUpRefresh from "@/utils/pullUpRefresh";
import filterQuery from "./filterQuery.vue";
import commissionItem from "./commissionItem.vue";
import dayjs from "dayjs";
export default {
	mixins: [pullUpRefresh],
	components: {
		filterQuery,
		commissionItem
	},
	props: {
		type: {
			type: String,
			default: '2'
		},
		showStats: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			queryParams: {
				receiptDateEnd: dayjs().format("YYYY-MM-DD"),
				receiptDateStart: dayjs().startOf('month').format("YYYY-MM-DD"),
				item: undefined,
				phone: undefined,
				receiptUserId: undefined,
				pageNum: 1,
				pageSize: 10,
			},

			mapHeight: "0px"
		}
	},
	methods: {
		handleKeyword() {
			this.resetData();
		},
		handleKeywordClear() {
			// 组件有bug 清空后的值还是存在
			this.queryParams.phone = "";
			this.resetData();
		},
		handleshowFilter() {
			this.$refs.filter.show();
		},
		async getList() {
			const {
				pageNum,
				pageSize,
			} = this.queryParams;
			this.queryParams.type = this.type;
			// 调用分成接口
			const {
				rows,
				total
			} = await uni.$u.api.selectCommissionList({
				pageSize,
				pageNum,
			}, this.queryParams);
			return rows;
		},
		handleOnReachBottom() {
			this.handleReachBottom();
		}
	},
	mounted() {
		this.resetData();
		uni.getSystemInfo({
			success: (e) => {
				const {
					windowTop,
					windowBottom,
					windowHeight
				} = e;
				this.mapHeight = (windowHeight - 70) + 'px';
			}
		});
	}
}
</script>

<style lang="scss" scoped>
.my_commission_wrap {
	.queryParams_wrap {
		display: flex;
		background: #fff;
		padding: 14px 0;


		.query,
		.search {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			font-weight: 700;
			color: #202020;
		}

		.query {
			flex: 1;
		}

		.search {
			flex: 2;
			padding-left: 20px;
		}
	}
}

.stats_info_wrap {
	margin-bottom: 30px;
}

.stats_info_top {
	display: flex;
	margin-bottom: 20px;

	.info_item {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		width: 23%;
		margin-right: 2.6%;
		height: 120px;
		padding: 15px;
		background: #fff;
		border-radius: 15px;

		&:last-child {
			margin-right: 0;
		}

		.info_title {
			font-size: 14px;
			color: #6b7280;
			margin-bottom: 15px;
		}

		.info_value {
			font-size: 24px;
			font-weight: bold;
			color: #202020;
		}
	}
}

.commission_item_wrap {
	padding: 20px 20px;
}

.empty_wrap {
	margin-top: 100px;
}
</style>