<template>
	<view class="content">
		<view class="" style="border-bottom: 1rpx solid #fff;">
			<cl-tabs  :tab-bars="tabBars" textColor="#fff" :tab-index="tabCurrentIndex" @tabChange="tabChange"
				:sliderMargin="20" type="fill" sliderColor="#fff" selectColor="#5064eb" ref="tabs1" class="tabs"
				aniType="movExtend">
			</cl-tabs>
		</view>
		<swiper class="swiper" :duration="300" :circular="true" @change="changeCurrent" :current="tabCurrentIndex"
			@animationfinish="animationfinish">
			<swiper-item v-for="(item,index) in tabBars" :key="index">
				<scroll-view :scroll-y="true" style="height: 100%;">
					<view class="item">
						<text class="total-day">本月出勤天数：22天</text>
						<view class="grid">
							<view class="grid-item" v-for="(item,index) in gridItem" :key="index">
								<view class="tag">
									<text>{{item.count}}</text>
								</view>
								<text>{{item.title}}</text>
							</view>
						</view>
					</view>
					
					<view class="records">
						<view class="records-item">
							<view class="title">
								<view class="left">
									<view class="" style="background-image: linear-gradient(#fba25e,#fd783f);"></view>
									<text>正常</text>
								</view>
								<view class="right">
									<text style="margin-right: -10rpx;">更多</text>
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
							<text v-for="(item,index) in 3" :key="index">2021-04-25 (周二) 打卡时间：09：48</text>
						</view>
						<view class="records-item">
							<view class="title">
								<view class="left">
									<view class="" style="background-image: linear-gradient(#9184f8,#4b4efd);"></view>
									<text>迟到</text>
								</view>
								<view class="right">
									<text style="margin-right: -10rpx;">更多</text>
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
							<text>暂无数据</text>
							<!-- <text v-for="(item,index) in 3" :key="index">2021-04-25 (周二) 打卡时间：09：48</text> -->
						</view>
						<view class="records-item">
							<view class="title">
								<view class="left">
									<view class="" style="background-image: linear-gradient(#55f3ff,#3ba8fb);"></view>
									<text>早退</text>
								</view>
								<view class="right">
									<text style="margin-right: -10rpx;">更多</text>
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
							<text>暂无数据</text>
							<!-- <text v-for="(item,index) in 3" :key="index">2021-04-25 (周二) 打卡时间：09：48</text> -->
						</view>
						<view class="records-item">
							<view class="title">
								<view class="left">
									<view class="" style="background-image: linear-gradient(#ff0000,#d00000);"></view>
									<text>缺卡</text>
								</view>
								<view class="right">
									<text style="margin-right: -10rpx;">更多</text>
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
							<text>暂无数据</text>
							<!-- <text v-for="(item,index) in 3" :key="index">2021-04-25 (周二) 打卡时间：09：48</text> -->
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import clTabs from '@/components/cl-tabs/cl-tabs.vue'
	export default {
		components: {
			clTabs
		},
		data() {
			return {
				tabBars: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				tabCurrentIndex: -1,
				gridItem:[
					{
						count:4,
						title:"正常"
					},
					{
						count:2,
						title:"迟到"
					},
					{
						count:2,
						title:"早退"
					},
					{
						count:2,
						title:"缺卡"
					},
					{
						count:2,
						title:"出差"
					},
				]
			}
		},
		onLoad() {},
		mounted() {
			this.tabCurrentIndex = 1
		},
		methods: {
			tabChange(e) {
				this.tabCurrentIndex = e
			},
			changeCurrent(e) {
				this.tabCurrentIndex = e.detail.current
				this.source = e.detail.source
			},
			animationfinish(e) {
				this.tabCurrentIndex = e.detail.current
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #FFFFFF;
	}
	
	.swiper {
		margin-top: -2rpx;
		background-color: #fff;
		min-height: 90vh;
	}

	.item {
		background-color: $base-color;
		padding: 30rpx 30rpx 60rpx;
		color: #fff;

		.total-day {
			font-size: 34rpx;
		}
		.grid {
			padding-top: 50rpx;
			display: flex;
			justify-content: space-around;

			.grid-item {
				text-align: center;
				.tag {
					margin-bottom: 20rpx;
					font-size: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 90rpx;
					width: 90rpx;
					border-radius: 50%;
					background-color: #809cff;
				}
			}
		}
	}
	
	.records{
		margin:0 20rpx 20rpx;
		
		.records-item{
			display: flex;
			flex-direction: column;
			color: #818181;
			padding:20rpx;
			border-bottom: 1rpx solid #d6d6d6;
			
			text{
				padding: 15rpx;
			}
			
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.left{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					view{
						height: 30rpx;
						width: 30rpx;
						background-color: #5064EB;
						border-radius: 50%;
					}
					
					text{
						font-size: 32rpx;
						font-weight: 800;
						color: #000;
					}
				}
				
				.right{
					margin-right: -10rpx;
					font-size: 26rpx;
					color: #909399; 
				}
			}
		}
	}
	
</style>
