<template>
	<!-- 业绩提成 -->
	<view>

		<scroll-view scroll-x class="bg-white nav text-center">
			<view class="cu-item light flex-sub" :class="[TabCur==0?'bg-red text-white':'']" @tap="tabSelect" :data-id="0">
				上月
			</view>
			<view class="cu-item light flex-sub" :class="[TabCur==1?'bg-red text-white':'']" @tap="tabSelect" :data-id="1">
				昨天
			</view>
			<view class="cu-item light flex-sub" :class="[TabCur==2?'bg-red text-white':'']" @tap="tabSelect" :data-id="2">
				今天
			</view>
			<view class="cu-item light flex-sub" :class="[TabCur==3?'bg-red text-white':'']" @tap="tabSelect" :data-id="3">
				本月
			</view>
		</scroll-view>


		<view v-if='TabCur == 1 '>
			<!-- 昨天 -->
			<view v-if="lastodaylist.length==0">
				<view class='empty cuIcon-info'></view>
				<view class='empty-text text-gray'>暂无数据</view>
			</view>
			<view v-for="(item,index) in lastodaylist " :key='index'>
				<view class="module-button">
					<navigator url="classify/classify?type=lastDay" class="sort-button button bg-red">分类</navigator>
					<navigator url="detail/detail?type=lastDay" class="detail-button button bg-red">单据明细</navigator>
				</view>
				<view class="cu-bar bg-white  margin-top">
					<view class='action' style="display: flex;justify-content: flex-start;width: 100%;">
						<view class="text-header">
							<text class='cuIcon-titles text-orange'></text>
							<text class='text-black'>总业绩</text>
						</view>
						<view class="text-main">
							<view>
								<text class="cuIcon-title text-red"></text> 卡付：
								<text class='text-red'>￥{{item.cardAchi==null?0:item.cardAchi}}</text>
							</view>
							<view>
								<text class="cuIcon-title text-red"></text> 现付：
								<text class='text-red'>￥{{item.cashAchi==null?0:item.cashAchi}}</text>
							</view>
						</view>

					</view>
				</view>

				<view class="cu-bar bg-white  margin-top">
					<view class='action' style="display: flex;justify-content: flex-start;width: 100%;">
						<view class="text-header">
							<text class='cuIcon-titles text-orange'></text>
							<text class='text-black'>总提成</text>
						</view>
						<view class="text-main">
							<view>
								<text class="cuIcon-title text-red"></text> 卡付：
								<text class='text-red'>￥{{item.cardComm==null?0:item.cardComm}}</text>
							</view>
							<view>
								<text class="cuIcon-title text-red"></text> 现付：
								<text class='text-red'>￥{{item.cashComm==null?0:item.cashComm}}</text>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>

		<view v-if='TabCur == 2 '>
			<!-- 今天 -->
			<view v-if="todaylist.length==0">
				<view class='empty cuIcon-info'></view>
				<view class='empty-text text-gray'>暂无数据</view>
			</view>
			<view v-for="(item,index) in todaylist " :key='index'>
				<view class="module-button">
					<navigator url="classify/classify?type=today" class="sort-button button bg-red">分类</navigator>
					<navigator url="detail/detail?type=today" class="detail-button button bg-red">单据明细</navigator>
				</view>
				<view class="cu-bar bg-white  margin-top">
					<view class='action' style="display: flex;justify-content: flex-start;width: 100%;">
						<view class="text-header">
							<text class='cuIcon-titles text-orange'></text>
							<text class='text-black'>总业绩</text>
						</view>
						<view class="text-main">
							<view>
								<text class="cuIcon-title text-red"></text> 卡付：
								<text class='text-red'>￥{{item.cardAchi==null?0:item.cardAchi}}</text>
							</view>
							<view>
								<text class="cuIcon-title text-red"></text> 现付：
								<text class='text-red'>￥{{item.cashAchi==null?0:item.cashAchi}}</text>
							</view>
						</view>

					</view>
				</view>

				<view class="cu-bar bg-white  margin-top">
					<view class='action' style="display: flex;justify-content: flex-start;width: 100%;">
						<view class="text-header">
							<text class='cuIcon-titles text-orange'></text>
							<text class='text-black'>总提成</text>
						</view>
						<view class="text-main">
							<view>
								<text class="cuIcon-title text-red"></text> 卡付：
								<text class='text-red'>￥{{item.cardComm==null?0:item.cardComm}}</text>
							</view>
							<view>
								<text class="cuIcon-title text-red"></text> 现付：
								<text class='text-red'>￥{{item.cashComm==null?0:item.cashComm}}</text>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>

		<view v-if='TabCur == 3 '>
			<!-- 本月 -->
			<view v-if="monthList.length==0">
				<view class='empty cuIcon-info'></view>
				<view class='empty-text text-gray'>暂无数据</view>
			</view>
			<view v-for="(item,index) in monthList " :key='index'>
				<navigator :url="'./sales-month/sales-month?item='+ encodeURIComponent(JSON.stringify(item))">
					<view class="cu-bar bg-white  margin-top">
						<view class='action' style="display: flex;justify-content: flex-start;width: 100%;">
							<view class="text-header">
								<text class='cuIcon-titles text-orange'></text>
								<text class='text-black'>{{item.date}}</text>
							</view>
							<view class="text-main">
								<view>
									<text class="cuIcon-title text-red"></text> 业绩：
									<text class='text-red'>￥{{(item.achievementAmount)}}</text>
								</view>
								<view>
									<text class="cuIcon-title text-red"></text> 提成：
									<text class='text-red'>￥{{item.commissionAmount}}</text>
								</view>
							</view>

						</view>
					</view>
				</navigator>
			</view>
			<view v-if="monthList.length!=0" class="cu-bar bg-white  margin-top">
				<view class='action ' style="width: 100%;">
					<view style="width:50%">
						<text class='cuIcon-titles text-orange'></text>
						<text class='text-red'>总业绩: {{monthlistAchi}}</text>

					</view>
					<view style="width:50%">
						<text class='cuIcon-titles text-orange'></text>
						<text class='text-red'>总提成: {{monthlistComm}}</text>

					</view>
				</view>
			</view>

		</view>

		<view v-if='TabCur == 0 '>
			<!-- 上月 -->
			<view v-if="lastMonth.length==0">
				<view class='empty cuIcon-info'></view>
				<view class='empty-text text-gray'>暂无数据</view>
			</view>
			<view v-for="(item,index) in lastMonth " :key='index'>

				<navigator url="./last-month/last-month">
					<view class="cu-bar bg-white  margin-top">
						<view class='action' style="display: flex;justify-content: flex-start;width: 100%;">
							<view class="text-header">
								<text class='cuIcon-titles text-orange'></text>
								<text class='text-black'>{{item.date}}</text>
							</view>
							<view class="text-main">
								<view>
									<text class="cuIcon-title text-red"></text> 业绩：
									<text class='text-red'>￥{{item.achievementAmount}}</text>
								</view>
								<view>
									<text class="cuIcon-title text-red"></text> 提成：
									<text class='text-red'>￥{{item.commissionAmount}}</text>
								</view>
							</view>

						</view>
					</view>
				</navigator>
			</view>
			<view v-if="lastMonth.length!=0" class="cu-bar bg-white  margin-top">
				<view class='action' style="width: 100%;">
					<view style="width:50%">
						<text class='cuIcon-titles text-orange'></text>
						<text class='text-red'>总业绩: {{lastMonthAchi}}</text>
					</view>
					<view style="width:50%">
						<text class='cuIcon-titles text-orange'></text>
						<text class='text-red'>总提成: {{lastMonthComm}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 1,
				scrollLeft: 0,
				salesDay: 0,
				userInfo: null,
				todaylist: [],
				lastodaylist: [],
				monthList: [],
				monthlistAchi: 0,
				monthlistComm: 0,
				lastMonth: [],
				lastMonthAchi: 0,
				lastMonthComm: 0,
				dayDate: new getDate(),
				lastDayDate: null,

			};
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id * 1;
				this.achiCommList()
			},
			achiCommList() {
				var form = {
					storeId: this.userInfo.storeId,
					staffId: this.userInfo.id,
					type: this.TabCur,
				}
				this.$api.achiCommList(form).then(res => {
					if (res.code == '000000') {
						if (this.TabCur == 0) {
							//上月数据
							res.rows.forEach(item => {
								this.lastMonthAchi += item.achievementAmount
								this.lastMonthComm += item.commissionAmount
							})
							this.lastMonth = res.rows
						} else if (this.TabCur == 1) {
							//昨天的数据
							this.lastodaylist = res.rows
						} else if (this.TabCur == 2) {
							//今天的数据
							this.todaylist = res.rows
						} else {
							//本月的数据+
							res.rows.forEach(item => {
								this.monthlistAchi += item.achievementAmount
								this.monthlistComm += item.commissionAmount
							})
							this.monthList = res.rows
						}
					} else {
						this.monthList = []
						this.todaylist = []
						this.lastodaylist = []
						this.lastMonth = []
					}
				})

			},
			getDate() {

			},
		},
		created() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.achiCommList()
			console.log(new Date());
			var day1 = new Date();
			console.log(day1.toISOString());
			console.log(new Date().setTime(new Date().getTime() - 24 * 60 * 60 * 1000));
			this.lastDayDate = new Date(new Date().setTime(new Date().getTime() - 24 * 60 * 60 * 1000)).toISOString();
			console.log(Date("2021-01-29"));
		}
	}
</script>

<style>
	.content {
		display: inline-block;
	}

	.text-main {
		/* 	display: flex;
		justify-content: space-around; */
		width: 60%;
		display: inline-block;
		font-size: 28upx;
	}

	.text-main view {
		/* width: 40%; */
	}

	.text-header {
		width: 40%;
	}

	.module-button {
		margin: 20rpx 0;
		display: flex;
		justify-content: space-between;
		padding: 0 10%;
	}

	.module-button .button {
		width: 40%;
		padding: 20rpx 0;
		text-align: center;
		font-size: 28rpx !important;
		font-weight: 550;
		border-radius: 20rpx;
	}
</style>
