<template>
	<view class="index-content">
		<view class="ic-head">
			<store-name :theme="'light'"></store-name>
		</view>
		<view class="ic-section">
			<view class="is-box">
				<view class="ib-line">
					<view class="il-view">
						<view>进行中</view>
						<view>20</view>
					</view>
					<view class="il-cut"></view>
					<view class="il-view">
						<view>已结束</view>
						<view>10</view>
					</view>
				</view>
				<view class="ib-line">
					<view class="il-view">
						<view>今日待上课</view>
						<view>6</view>
					</view>
					<view class="il-cut"></view>
					<view class="il-view">
						<view>今日已上课</view>
						<view>3</view>
					</view>
				</view>
			</view>
		</view>

		<view class="ic-tablist" v-for="(e,i) in tabList" :key="i">
			<view class="it-title">{{e.type}}</view>
			<view class="it-tabs">
				<view class="itt-item" v-for="(item,index) in e.itemList" :key="index" @click="tabChange(item.path)">
					<view>
						<image :src="'/subpackage/course/static/images/tab/tab_'+ e.id +'_'+ item.id + '.png'"></image>
						<view>{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/utils/util';
import boxServer from '../../js/course_server';
import { BOX_API } from '../../js/course_api';
import { mapState } from 'vuex'
import store_name from '../../components/store_name/store_name';
const tabList = [
	{
		type: "更多操作",
		id: 0,
		itemList:[
			{
				id: 0,
				name: "学员课程",
				path: "",
			},
			{
				id: 1,
				name: "私教课上课记录",
				path: "",
			},
			{
				id: 2,
				name: "大班上课记录",
				path: "",
			},
			{
				id: 3,
				name: "班级管理",
				path: "",
			},
		],
	},
]
export default {
	components: {
	    'store-name': store_name
	},
	data() {
		return {
			tabList,
		}
	},
	async onLoad(){
	    try{
	        util.showLoad();
	        let _brandInfo = await this.$store.dispatch('getBrandInfo');
	        await this.$store.dispatch('getStoreList');
			// this.updateAC();
	        util.hideLoad();
	    }catch(err){
	        util.hideLoad();
	    }
	    
	},
	methods: {
		tabChange(path){
			if(path=='')return util.showNone('开发中');
			util.routeTo(path,'nT')
		},
	}
}
</script>

<style lang="scss">
@import '~style/public.scss';
page{
	background: #FFFFFF;
}
.index-content{
	.ic-head{
		width: 750rpx;
		height: 218rpx;
		background-color: #009874;
	}
	.ic-section{
		position: relative;
		width: 750rpx;
		height: 320rpx;
		background-color: #F2F2F7;
		.is-box{
			position: absolute;
			top: -100rpx;
			left: 40rpx;
			width: 670rpx;
			padding-bottom: 50rpx;
			// height: 378rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			.ib-line{
				padding: 60rpx 0 10rpx;
				@include centerFlex(flex-start);
				.il-view{
					margin-left: 60rpx;
					flex-grow: 1;
					>view{
						&:first-child{
							color: #9C9C9F;
							font-size: 28rpx;
							line-height: 40rpx;
						}
						&:nth-child(2){
							color: #1A1A1A;
							font-size: 40rpx;
							line-height: 56rpx;
							font-weight: 700;
						}
					}
				}
				.il-cut{
					flex-shrink: 0;
					width: 2rpx;
					height: 92rpx;
					background-color: #D8D8D8;
				}
			}
		}
	}
	.ic-tablist{
		padding-bottom: 24rpx;
		background: #FFFFFF;
		.it-title{
			padding: 52rpx 40rpx 0rpx;
			color: #1A1A1A;
			font-size: 28rpx;
			line-height: 40rpx;
		}
		.it-tabs{
			display: flex;
			flex-wrap: wrap;
			.itt-item{
				margin: 60rpx 0 20rpx;
				flex-wrap: wrap;
				flex-shrink: 0;
				width: 33.33%;
				>view{
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;
					>image{
						width: 52rpx;
						height: 52rpx;
					}
					>view{
						margin-top: 20rpx;
						color: #1A1A1A;
						font-size: 28rpx;
						line-height: 40rpx;
						text-align: center;
					}
				}
			}
		}
	}
}
</style>
