<template>
	<view class="goW0rk-wrap">
		<ren-calendar ref='ren' :markDays='markDays' :headerBar='true' @onDayClick='onDayClick'></ren-calendar>
		<view class="date-wrap">
			<view class="change">选中日期：{{curDate}}</view>
			<view class="flex-box" v-if="listQuery.goWorkTime">
				<view :class="listQuery.goWorkTime?'dot-box red-color':'dot-box info-color'"></view>
				<view>上班打卡: {{listQuery.goWorkTime}}</view>
			</view>
			<view class="flex-box" v-if="listQuery.offWorkTime">
				<view :class="listQuery.offWorkTime?'dot-box red-color':'dot-box info-color'"></view>
				<view>下班打卡: {{listQuery.offWorkTime}}</view>
			</view>
			<view class="no-data" v-if="!listQuery.goWorkTime&&!listQuery.offWorkTime">
				<u-empty mode="data" height="80">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	export default {
		components: {
			RenCalendar
		},
		data() {
			return {
				listQuery: {},
				id: '',
				curDate: '',
				markDays: []
			}
		},
		onLoad(option) {
			this.id = option.id
			this.curDate = this.getCurrentTime()
			this.getList()

		},
		methods: {
			onDayClick(data) {
				this.curDate = data.date;
				this.getList()
			},
			getCurrentTime() {
				const date = new Date()
				const year = date.getFullYear()
				const month = (date.getMonth() + 1) < 10 ? `0${date.getMonth() + 1}` : (date.getMonth() + 1)
				const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()
				const h = date.getHours() < 10 ? '0' + (date.getHours()) + ':' : date.getHours() + ':'
				const m = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes() + ':'
				const d = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
				return `${year}-${month}-${day}`
			},

			// 列表
			getList() {
				const params = {
					id: this.id,
					goWorkTime: this.curDate
				}
				this.$http.get('/api/store/staff/clockMoon', params).then(res => {
					if (res.code == 200) {
						this.listQuery = res.data
					} else {

					}
				})
			},





		}
	}
</script>

<style lang="scss">
	page {
		background: #FAF7F6;
		padding-bottom: 200rpx;
	}

	.date-wrap {
		padding: 30rpx;
		border: 1rpx #D0D0D0 solid;
		margin: 30rpx;
	}

	.flex-box {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
	}

	.dot-box {
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		margin-right: 10rpx;

	}

	.red-color {
		background: #FF3B00;
	}

	.info-color {
		background: #C7C7C7;
	}


	.no-data {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>