<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>
			</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">{{form.staffName}}</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-cyan">{{form.brandNumber}}</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">{{form.job}}</text>
		</view> -->
		<view class="cu-bar bg-white  margin-top" v-show="form.baseSalary!=null">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>底薪</text>
			</view>
			<text class="margin-right text-price text-red">{{form.baseSalary}}</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">{{form.commSalary}}</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">{{((form.baseSalary==null?0:form.baseSalary)+form.commSalary).toFixed(2)*1}}</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()
		},
		onPullDownRefresh: function() {
			setTimeout(function() {
				uni.redirectTo({
					url:'./salary'
				})
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 2000
				});
				uni.stopPullDownRefresh();
			}, 500);
		},
	}
</script>

<style>

</style>
