<template>
	<view>
		<view class="cu-bar bg-white  margin-top">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>当前月份</text>
			</view>
			<scroll-view scroll-x class=" nav">
				<view class="flex text-center">
					<view v-for="(item,index) in list" :key='index' class="cu-item light flex-sub "
						:class="[TabCur==item.type?'bg-cyan text-whit':'']" @tap="tabSelect"
						:data-id="item.type">
						<text>{{item.monthName}}</text>
					</view>
				</view>
			</scroll-view>
			<!-- 	<picker fields="month" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<button class="cu-btn bg-green shadow margin-right" 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.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" @click="onCLick(0)">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>充值</text>
			</view>
			<text class="margin-right text-price text-red">{{form.recComm}}</text>
		</view>
		<view class="cu-bar bg-white  margin-top" @click="onCLick(1)">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>疗程</text>
			</view>
			<text class="margin-right text-price text-red">{{form.courseComm}}</text>
		</view>
		<view class="cu-bar bg-white  margin-top" @click="onCLick(2)">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>服务</text>
			</view>
			<text class="margin-right text-price text-red">{{form.cashComm}}</text>
		</view>
		<view class="cu-bar bg-white  margin-top" @click="onCLick(3)">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>还款</text>
			</view>
			<text class="margin-right text-price text-red">{{form.repayComm}}</text>
		</view>
		<view class="cu-bar bg-white  margin-top" @click="onCLick(4)">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>充值退</text>
			</view>
			<text class="margin-right text-price text-red">{{form.recRefundComm}}</text>
		</view>
		<view class="cu-bar bg-white  margin-top" @click="onCLick(5)">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>疗程退</text>
			</view>
			<text class="margin-right text-price text-red">{{form.courseRefundComm}}</text>
		</view>
		<view class="cu-bar bg-white  margin-top" @click="onCLick(6)">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>消费退</text>
			</view>
			<text class="margin-right text-price text-red">{{form.cashRefundComm}}</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: {},
				TabCur: 0,
				date: currentDate,
				form: {
					staffName: "刘乐乐",
					job: 5,
					basePay: 1800,
					performance: 156000,
					royalty: 3200,
					close: 5000
				},
				staffForm: {},
				list: [{}, {}, {}]
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id * 1;
				this.form.type = this.TabCur
			},
			onCLick(key) {
				this.form.classify = key
				uni.navigateTo({
					url: '../../../myHome/sales-commission/detail/detail?form='+ JSON.stringify(this.form)
				});
			},
			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() {
				console.log(this.staffForm);
				let date = this.date
				var form = {
					storeId: this.userInfo.storeId,
					storeName: this.userInfo.storeName,
					brandNumber: this.userInfo.brandNumber,
					date: date
				}
				if (this.staffForm.storeId != undefined) {
					form.staffId = this.staffForm.staffId,
						form.staffName = this.staffForm.staffName
				} else {
					form.staffId = this.userInfo.id,
						form.staffName = this.userInfo.staffName
				}
				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) {}
						})
					}

				})
			},
			listDates(data) {
				var nowdays = new Date();
				var year = nowdays.getFullYear();
				var month = nowdays.getMonth() + 1 - data;
				var day = nowdays.getDate()
				var hours = nowdays.getHours()
				var min = nowdays.getMinutes()
				var sec = nowdays.getSeconds()
				if (month == 0) {
					month = 12;
					year = year - 1;
				}
				if (month < 10) {
					month = '0' + month;
				}
				return year + '-' + month
			},
		},
		onLoad: function(option) {
			this.userInfo = uni.getStorageSync('userInfo')
			console.log(option.item);
			if (option.item != undefined) {
				var item = JSON.parse(option.item)
				uni.setNavigationBarTitle({
					title: item.staffName + '工资明细'
				})
				this.staffForm = item
			}
		},
		onShow: function() {
			this.salaryByStaff()
			this.list.forEach((item, index) => {
				item.monthName = this.listDates(index)
				item.type = index
			})
			this.form.type = this.TabCur
		},
		onPullDownRefresh: function() {
			setTimeout(function() {
				uni.redirectTo({
					url: './salary'
				})
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 2000
				});
				uni.stopPullDownRefresh();
			}, 500);
		},
	}
</script>

<style>

</style>
