<template>
	<view>
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange "></text> 服务清单
			</view>
			<view class="uni-list" style="padding-right: 10upx;">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">
						<picker fields="month" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<button class="cu-btn bg-green shadow" data-target="Modal">{{date}}</button>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view v-if="pageInfo.list.length==0">
			<view class='empty cuIcon-info'></view>
			<view class='empty-text text-gray'>暂无数据</view>
		</view>
		<view class="list">
			<view class="items padding-xl radius shadow shadow-lg bg-white margin-top flex solid-bottom justify-between align-end"
			 v-for="(item,index) in pageInfo.list" :key="index">
				<view class="flex justify-between align-center " style="width: 100%;">
					<view class="">
						<view class="item">
							<view class="title">消费单号：</view>
							<view class="content">{{item.cashNum}}</view>
						</view>
						<view class="item">
							<view class="title">消费名称：</view>
							<view class="content">{{item.projectName}}</view>
						</view>
				<!-- 		<view class="item">
							<view class="title">消费金额：</view>
							<view class="content">￥{{item.transactionPrice}}</view>
						</view>
						<view class="item">
							<view class="title">支付方式：</view>
							<view class="content">
								<text v-if="item.courseAccountId!=null">疗程卡包支付</text>
								<text v-if="item.collectionRechargeAmount!=0">卡付:{{item.collectionRechargeAmount}} </text>
								<text v-if="item.collectionCashAmount!=0">现付:{{item.collectionCashAmount}} </text>
								<text v-if="item.collectionIntegralAmount!=0">积分付:{{item.collectionIntegralAmount}} </text>
							</view>
						</view> -->
						<view class="item">
							<view class="title">消费时间：</view>
							<view class="content">{{item.cashDate}}</view>
						</view>
					</view>
					<view class="item-goin">
							<button class="btns cu-btn round bg-green" v-if="item.isStaffFeedback==1">已反馈</button>
						<navigator :url="'./feedback/feedback?item='+ JSON.stringify(item) " v-else>
							<button class="btns cu-btn round bg-red">反馈</button>
						</navigator>
					</view>
				</view>

			</view>
			<text class="margin-left">共 {{pageInfo.total}} 记录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				pageInfo: {
					list: [],
					pageSize: 5,
					pageNum: 1,
					total:0,
				},
				userInfo: null,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.target.value
				this.pageInfo.pageSize = 5
				this.pageInfo.pageNum = 1
				this.pageInfo.list = []
				this.staffProgress()
			},
			getDate(type) {
				//获取时间
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				if (type === 'start') {
					month = month -2;
				} else if (type === 'end') {
					month = month 
				}
				month = month > 9 ? month : '0' + month;;
				return `${year}-${month}`;
			},
			staffProgress() {
				let date = this.date.replace(/[^0-9]/g, '')
				let form = {
					staffId: this.userInfo.id,
					storeId: this.userInfo.storeId,
					pageNum:this.pageInfo.pageNum,
					pageSize:this.pageInfo.pageSize,
					selectDate: date,
				}
				this.$api.staffProgress(form).then(res => {
					console.log(res);
					if (res.code == '000000') {
						this.pageInfo = res.pageInfo
					} else {
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
							success: function(res) {}
						})
					}
				})

			},

		},
		onReachBottom: function() { //滚动到底翻页
			this.pageInfo.pageSize = this.pageInfo.pageSize+5
			
			this.staffProgress()
		},
		onShow: function() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.pageInfo.list = []
			this.staffProgress()

		}
	}
</script>

<style scoped>
	.list {
		margin: 15upx 10upx;

	}


	.list .items {
		background-color: #FFF;
		padding: 20upx;
		border-radius: 10upx;
		margin-bottom: 20upx;
	}

	.list .list_footer {
		position: fixed;
		bottom: 0;
	}

	.list .items .item {
		display: flex;
		align-items: center;
		margin-bottom: 10upx;
	}

	.list .item-goin {
		width: 150upx;
		display: inline-block;
	}

	.list .items .item:last-child {
		margin-bottom: 0upx;
	}

	.list .items .item .title {
		width: 135upx;
		font-size: 27upx;
	}

	.list .items .item .content {
		/* width: 75%; */
		font-size: 27 upx;
	}

	.content text {
		padding-right: 5upx;
	}

	.btns {
		/* padding: 0; */
	}
</style>
