<template>
	<view>
		<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>
				<button class="cu-btn bg-red shadow margin-left margin-right" data-target="Modal">上一月</button>
			</picker>
		</view>
		<view class="cu-bar bg-white  margin-top">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>收入</text>
			</view>
			<text class="margin-right text-price text-red">250,603.00</text>
		</view>
		<view class="cu-bar bg-white  margin-top">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>提成</text>
			</view>
			<text class="margin-right  text-price text-red">87,711.33</text>
		</view>

		<view class="cu-bar bg-white  margin-top">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>员工餐补</text>
			</view>
			<text class="margin-right text-price text-red">8,000.00</text>
		</view>
		<view class="cu-bar bg-white  margin-top">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>租金</text>
			</view>
			<text class="margin-right text-price text-red">18,500.00</text>
		</view>
		<view class="cu-bar bg-white  margin-top">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>其他</text>
			</view>
			<text class="margin-right text-price text-red">62,608.50</text>
		</view>
		<view class="cu-bar bg-white  margin-top">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>结余</text>
			</view>
			<text class="margin-right text-price text-red">73,783.17</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				userInfo: {},
				date:currentDate,
				form: {
					staffName: "刘乐乐",
					job: 5,
					basePay: 1800,
					performance: 156000,
					royalty: 3200,
					close: 5000

				}
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			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: function(e) {
				this.date = e.target.value
				this.salaryByStaff()
			},
			salaryByStaff() {
				
				let date = this.date
				var form = {
					storeId: this.userInfo.storeId,
					storeName: this.userInfo.storeName,
					staffId: this.userInfo.id,
					staffName: this.userInfo.staffName,
					brandNumber: this.userInfo.brandNumber,
					date: date
				}
				this.$api.salaryByStaff(form).then(res => {
					if (res.code == '000000') {
						this.form = res.data
					} else {
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
							success: function(res) {}
						})
					}

				})
			}
		},
		onShow: function() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.salaryByStaff()
		}
	}
</script>

<style>

</style>
