<template>
	<view class="container">
		<u-navbar :border-bottom="false" back-icon-color="#fff"  title=" " :background="background">
			<view class="slot-wrap">
				<u-tabs-swiper barWidth="100" @change="tabChange" ref="tabs" :current="current" :active-item-style="activeItemStyle" inactive-color="#fff" active-color="#fff" bg-color="#5064eb" :list="list" :is-scroll="false"></u-tabs-swiper>
			</view>
		</u-navbar>
		<swiper style="flex: 1;":current="current"  @change="swiperChange"
			@transition="transition" @animationfinish="animationfinish">
			<swiper-item>
				<scroll-view scroll-y="true" style="height: 100%;">
					<punch-in  class="swiperItem" ></punch-in>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" style="height: 100%;">
					<punch-out  :faceImg="faceImg"></punch-out>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import punchIn from "../../comps/punch-in/punch-in.vue"
import punchOut from "../../comps/punch-out/punch-out.vue"
export default {
	components:{
		punchIn,punchOut
	},
	data() {
		let that = this;
		return {
			//顶部导航栏
			background: {
				backgroundColor: '#5064eb',
			},
			//tab
			list: [{
				name: '上下班打卡'
			}, {
				name: '外出打卡'
			}],
			activeItemStyle:{
				fontWeight:800,
				fontSize:'36rpx'
			},
			current:0,
			faceImg:'',
			
			//是否是工作日
			iswork:false,
		};
	},
	onLoad() {
		
	},
	onShow() {
		let curPage= this.$util.getPageCtx()
		if (!this.$isEmpty(curPage.data.image)) {
			this.faceImg=curPage.data.image
		}
	},
	methods: {
		tabChange(index) {
			this.current = index
		},
		swiperChange(e) {
		  uni.pageScrollTo({
		      scrollTop: 0,
		      duration: 0
		  });
		  this.current = e.detail.current
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.current = current;
		}
	}
};
</script>

<style lang="scss">
	
page{
	background-color: #F1F1F1;
}

.top{
 height: 450rpx;
 background-color: $base-color;
}

.container{
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}

 
	
</style>
