<template>
	<view class="content">
		<u-navbar :background="background" back-icon-color="#fff" titleColor="#fff" :title="vuex_now_date"></u-navbar>
		<calendar ref='ren' :markDays='markDays' :open="true" :disabledAfter='true'  @onDayClick='onDayClick'></calendar>
		
		<view class="rule">
			<view class="left">
				<view class="title">上下班打卡</view>
				<view class="desc">
					<text>打卡规则：</text>
					<text>早9晚6点半</text>
					<text style="padding: 0 15rpx;">|</text>
					<text>工作时长：</text>
					<text>10小时30分钟</text>
				</view>
			</view>
			<view class="right desc">
				<text class="cuIcon-right"></text>
			</view>
		</view>
		
		<view class="history">
			<view class="left">
				<text class="time">09:00</text>
				<view class="bar">
					<text></text>
				</view>
				<text class="time">18:30</text>
			</view>
			
			<view class="right">
				<view class="working" style="padding-bottom: 40rpx;">
					<text class="padding-bottom-10">上班 · 自动</text>
					<text class="desc">正常打卡(08:57)</text>
				</view>
				
				<view class="working" style="padding-top: 10rpx;">
					<text class="padding-bottom-10">下班 · 自动</text>
					<text class="desc">正常打卡(18:30)</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    import calendar from '@/components/calendar/calendar.vue'
	export default {
        components:{
            calendar
        },
		data() {
			return {
				background: {
					backgroundColor: '#5064eb',
				},
				isfuture:false,
                markDays:[
					'2021-04-16',
					'2021-04-17',
					'2021-04-18',
					'2021-04-19',
					'2021-04-20'
				]
			}
		},
		onReady() {
            let today = this.$refs.ren.getToday().date;
			this.$u.vuex("vuex_now_date",this.$dateTime.format(new Date(today),"YYYY年mm月dd日"))
		},
		methods: {
            onDayClick(data){
				if (!data) {
					this.isfuture=true
					this.$u.toast('未来日期')
					return
				}
				this.isfuture=false
				this.$u.vuex("vuex_now_date",this.$dateTime.format(new Date(data.date),"YYYY年mm月dd日"))
            }
		}
	}
</script>

<style lang="scss">
    page{
        background-color: #f2f2f2;
    }
	
	.flex-center{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.desc{
		font-size: 28rpx;
		color: #8f8f8f;
	}
	
	.content {
		.change{
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            margin-top: 100rpx;
            height: 100rpx;
            color: #b89249;
            background-color: #21191b;
        }
	}
	
	.rule{
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid $dt-border-color-sm;
		
		.left{
			.title{
				font-size: 30rpx;
				font-weight: 800;
				padding-bottom: 10rpx;
			}
		}
		.right{
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.history{
		display: flex;
		padding: 40rpx;
		.left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			.time{
				font-weight: 550;
				font-size: 36rpx;
			}
			.bar{
				padding: 10rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				
				text{
					width: 8rpx;
					height: 80rpx;
					background-color: #dedede;
				}
			}
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-left: 50rpx;
			.working{
				display: flex;
				flex-direction: column;
				
				text:first-child{
					font-weight: 550;
					font-size: 32rpx;
				}
			}
		}
	}
</style>
