<template>
	<view class="todaystar ">
		<view class="cu-bar bg-white  margin-top">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>当前月份</text>
			</view>
			<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 class=" margin-top " style="padding: 10upx;">
			<view style="margin: 10upx auto;"
				class="bg-red flex solid-bottom padding justify-start text-white text-center">
				<view class="text-header" style="width: 35%;">
					<text>员工</text>
				</view>
				<view class="text-header" style="width: 20%;">
					<text>底薪</text>
				</view>
				<view class="text-header" style="width: 20%;">
					<text>提成</text>
				</view>
				<view class="text-header" style="width: 25%;">
					<text>合计</text>
				</view>
			</view>
			<view v-if="staffList.length==0">
				<view class='empty cuIcon-info'></view>
				<view class='empty-text text-gray'>暂无数据</view>
			</view>
			<view class=" light bg-white flex justify-start text-black text-center text-main" v-for="(item,index) in  staffList"
				:key='index' @click="onCilck(item)">

				<view class="text-header" style="width: 35%;">
					<text>{{item.brandNumber }} - {{ item.staffName}}</text>
				</view>
				<view class="text-header" style="width: 20%;">
					<text>{{item.baseSalary==null?'无底薪':item.baseSalary}}</text>
				</view>
				<view class="text-header" style="width: 20%;">
					<text>{{item.commSalary}}</text>
				</view>
				<view class="text-header" style="width: 25%;">
					<text>{{item.num}}</text>
				</view>
			</view>

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

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				TabCur: 0,
				userInfo: {},
				daylist: [],
				staffList: [],
			}
		},
		// 	 成本列表 当月 上月 
		// 服务 $  提成 $	员工餐补  租金  其他支出 结余

		// 个人业绩达成表 
		//  1. 目标 
		// 	充值 | 疗程 | 服务
		//  2.实际 
		// 	充值 | 疗程 | 服务
		//  3.  差额
		// 	充值 | 疗程 | 服务
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
				
			onCilck(item){
				uni.navigateTo({
				    url: '../../mySet/common/salary/salary?item=' +JSON.stringify(item)
				});
			},
			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}`;
			},
			bindDateChange(e){
				this.date = e.detail.value
				this.selectSalary()
			},
			selectSalary() {
				this.$api.selectSalary({
					storeId: this.userInfo.storeId,
					date: this.date
				}).then(res => {
					if (res.code == '000000') {
						res.rows.forEach(item => {
							item.commSalary = item.commSalary.toFixed(2) * 1
							if (item.baseSalary == null) {
								item.num = item.commSalary
							} else {
								item.num = (item.commSalary * 1 + item.baseSalary * 1).toFixed(2) * 1
							}
						})
						this.staffList = res.rows
					} else {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 2000
						});
					}

				})
			}
		},
		onShow: function() {
			this.daylist = this.staffList
			this.userInfo = uni.getStorageSync("userInfo")
			this.selectSalary()
		},
		onPullDownRefresh: function() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
				this.daylist = []
				this.daylist = this.staffList
			}, 1000);
		},

	}
</script>

<style>
	.text-main {
		font-size: 28upx;
		height: 80upx;
		width: 100%;
		line-height: 80upx;
		margin-top: 10upx;
		color: #000000;
	}
</style>
