<template>
	<view class="index-container">
		<view class="ic-header">
			<button v-if="!isLogin" hover-class="hover-acti ve" @click="toLogin">前往登录</button>
			<view v-else class="ih-store-name">
				<view 
					@click="toStoreList"
				>
					{{storeInfo.name || '-'}}
					<text v-if="indexData.stadium_data">共({{indexData.stadium_data.length}}家)</text>
				</view>
				<image mode="aspectFit" src="/static/images/arrow_cff.png"></image>
			</view>
			<view class="ih-tip">本月课时</view>
			<view class="ih-num">{{ course_times || 0 }}</view>
		</view>
		<!-- <view class="ic-notice" @click="toNotice">
			<view class="in-left">
				<image mode="aspectFit" src="/static/images/index/notice_c874.png"></image>
				<text>欧轩智能场馆商家助手上线啦！</text>
			</view>
			<view class="in-right">
				<view>99</view>
				<image mode="aspectFit" src="/static/images/arrow_cb2.png"></image>
			</view>
		</view> -->
		<view class="ic-tab-section">
			<view class="its-item" v-for="(e, i) in tabInfoArr" :key="i" @click="tabClick(e)">
				<image mode="aspectFit" :src="`/static/images/index/i_${e.id}.png`"></image>
				<view>{{e.name || '-'}}</view>
			</view>
		</view>
		<view class="ic-feedback" @click="toFeedback">
			<view class="if-right">
				<image mode="aspectFit" src="/static/images/index/feedback_c874.png"></image>
				<text>在线反馈</text>
			</view>
			<image mode="aspectFit" src="/static/images/arrow_cb2.png"></image>
		</view>
		<authorize-modal v-if="false"></authorize-modal>
	</view>
</template>
<script>
	import authorize_modal from '../../components/authorize_modal/authorize_modal';
	import { API } from '../../js/api';
	import { servers } from '../../js/server';
	import util from '../../utils/util';
	const app = getApp();
	import { mapState } from 'vuex';
	const tabInfoArr = [
		{
			id: '1',
			name: '我的课程',
			path: '/pages/course/list/list',
		},
		{
			id: '2',
			name: '我的时间',
			path: '/pages/time/select/select',
		},
		{
			id: '3',
			name: '我的学员',
			path: '/pages/mine_trainee/mine_trainee',
		},
		{
			id: '4',
			name: '场地管理',
			path: '/pages/site/manage/manage',
		},
		{
			id: '5',
			name: '审批',
			path: '/pages/approve/list/list',
		},
		// 20210130 PM: 先去掉吧,之前只有一种课程
		// {
		// 	id: '6',
		// 	name: '点名',
		// 	path: '',
		// },
		{
			id: '7',
			name: '换班申请',
			path: '/pages/shift/application/application',
		},

	];
	export default {
		components: {
			'authorize-modal': authorize_modal
		},
		computed: {
			...mapState([ 'storeInfo' ]),
		},
		data(){
			return {
				isLogin: app.isLogin(),
				tabInfoArr,
				course_times: 0, // 本月课时
				indexData: {},
			}
		},
		onLoad(){
			this.getCoachCourseTimes();
			this.getHomeData();
		},
		methods: {
			toStoreList(){
				util.routeTo('/pages/store_list/store_list', 'nT');
			},
			getCoachCourseTimes(){
				servers.get({
					url: API.getCoachCourseTimes,
					data: {},
					failMsg: '加载失败！'
				})
				.then(res=>{
					console.warn(res)
					this.course_times = res.course_times
				})
			},
			getHomeData(){
				util.showLoad();
				servers.get({
					url: API.getHomeData,
					data: {},
					failMsg: '加载失败！'
				})
				.then(res=>{
					util.hideLoad();
					this.indexData = res;
					let _storeList = res.stadium_data || [];
					// return console.warn(this.$store)
					if(_storeList.length)this.$store.commit('setStoreInfo', _storeList[0])
				})
			},
			tabClick(e){
				if(e.path === '')return util.showNone('开发中');
				util.routeTo(e.path, 'nT');
			},
			toLogin(){
				util.routeTo(`/pages/login/login`, 'nT');
			},
			toNotice(){
				util.routeTo(`/pages/message_list/message_list`,'nT');
			},
			toFeedback(){
				util.routeTo(`/pages/feedback/feedback`,'nT');
			}
		}
	}
</script>

<style lang="scss">
	@import '~style/public.scss';
	.index-container{
		padding-top: 24upx;
		padding: 24upx;
		.ic-header{
			padding-top: 66upx;
			margin-bottom: 24upx;
			height: 364upx;
			border-radius: 10upx;
			background-color: $themeColor;
			button{
				margin: 0 auto 42upx;
				padding: 0;
				width: 160upx;
				line-height: 40upx;
				height: 40upx;
				text-align: center;
				border-radius: 20upx;
				border: none;
				font-size: 28upx;
				background-color: #fff;
				color: $themeColor;
			}
			.ih-store-name{
				margin-top: 22upx;
				margin-bottom: 10upx;
				@include centerFlex(center);
				>view{
					max-width: 80%;
					line-height: 50upx;
					text-align: center;
					font-size: 36upx;
					font-weight: 500;
					color: #fff;
					@include textHide(1);
				}
				>image{
					margin-left: 20upx;
					width: 28upx;
					height: 28upx;
				}
			}
			.ih-tip{
				text-align: center;
				line-height: 40upx;
				font-size: 28upx;
				color: rgba($color: #fff, $alpha: .7);
			}
			.ih-num{
				padding: 0 20upx;
				font-size: 104upx;
				text-align: center;
				line-height: 146upx;
				font-weight: 600;
				color: #fff;
				@include textHide(1);
			}
		}
		@mixin sec{
			margin-bottom: 24upx;
			border-radius: 10upx;
			background-color: #fff;
		}
		.ic-notice{
			padding: 0 24upx;
			height: 108upx;
			@include sec;
			@include centerFlex(space-between);
			.in-left{
				flex-shrink: 0;
				flex-grow: 1;
				font-size: 28upx;
				color: #1a1a1a;
				@include textHide(1);
				>image{
					vertical-align: middle;
					width: 52upx;
					height: 52upx;
					margin-right: 10upx;
				}

			}
			.in-right{
				@include centerFlex(flex-end);
				>view{
					margin-right: 14upx;
					width: 40upx;
					height: 40upx;
					border-radius: 50%;
					background-color: #EA5061;
					line-height: 40upx;
					text-align: center;
					font-size: 24upx;
					color: #fff;
					@include textHide(1);
				}
				>image{
					flex-shrink: 0;
					width: 28upx;
					height: 28upx;
				}
			}
		}
		.ic-tab-section{
			padding: 10upx 0;
			font-size: 0;
			@include sec;
			.its-item{
				display: inline-block;
				padding: 30upx 10upx;
				width: 33.33%;
				height: auto;
				>image{
					margin: 0 auto 20upx;
					display: block;
					width: 52upx;
					height: 52upx;
				}
				>view{
					text-align: center;
					height: 40upx;
					line-height: 40upx;
					font-size: 28upx;
					color: #1a1a1a;
					@include textHide(1);
				}
			}
		}
		.ic-feedback{
			padding: 0 24upx;
			height: 108upx;
			@include sec;
			@include centerFlex(space-between);
			.if-right{
				font-size: 28upx;
				line-height: 40upx;
				color: #1a1a1a;
				@include textHide(1);
				>image{
					vertical-align: middle;
					margin-right: 16upx;
					width: 52upx;
					height: 52upx;
				}
			}
			>image{
				flex-shrink: 0;
				flex-grow: 0;
				width: 28upx;
				height: 28upx;
			}
		}

	}
</style>
