<template>
	<view class="home_box">
		<view class="home">

			<view class="bar"></view>

			<view class="info" v-if="hasLogin">
				<u-row justify="space-between" customStyle="margin-bottom: 24rpx">
					<u-col span="5">
						<view class="name">
							<text>{{teacher.name}}</text>
							<text>老师您好！</text>
						</view>
					</u-col>
					<u-col span="3">
						<view class="identity" @click="handelChange">
							<u-icon size="36rpx" :label="doneRoles" labelPos="right" labelSize="24rpx"
								labelColor="#202131" name="/static/img/home/切换身份@2x.png"></u-icon>
						</view>
					</u-col>
				</u-row>
			</view>

			<view class="info" v-else>
				<u-row justify="space-between" customStyle="margin-bottom: 24rpx">
					<u-col span="5">
						<view class="name" @click="handelLOgin">
							<text>未登录</text>
							<text>您还没有登录</text>
						</view>
					</u-col>
				</u-row>
			</view>

			<view class="gate">
				<u-row justify="space-between" gutter="16rpx" customStyle="margin-bottom: 10px">
					<u-col span="4">
						<view class="box">
							<view class="item review" data-type="review" @click="handelGate">
								<u-image src="/static/img/home/报名审核背景@2x.png" width="220rpx" height="256rpx" />
								<view class="copywriting">
									<text>报名审核</text>
									<text>提供简单描述文字</text>
								</view>
							</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="box">
							<view class="item signIn" :style="{marginBottom:'16rpx'}" data-type="signin"
								@click="handelGate">
								<u-image src="/static/img/home/学生签到背景@2x.png" width="220rpx" height="120rpx" />
								<view>
									<u-icon size="48rpx" label="学生签到" labelPos="right" labelSize="28rpx"
										labelColor="#1F71DE" name="/static/img/home/icon-学生签到@2x.png"></u-icon>
									<text>提供简单描述文字</text>
								</view>
							</view>
							<view class="item report" data-type="report" @click="handelGate">
								<u-image src="/static/img/home/报告审批背景@2x.png" width="220rpx" height="120rpx" />
								<view>
									<u-icon size="48rpx" label="报告审核" labelPos="right" labelSize="28rpx"
										labelColor="#FD9A03" name="/static/img/home/icon-报名审批@2x.png"></u-icon>
									<text>提供简单描述文字</text>
								</view>
							</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="box">
							<view class="item signIn" :style="{marginBottom:'16rpx'}" data-type="log"
								@click="handelGate">
								<u-image src="/static/img/home/日志批阅背景@2x.png" width="220rpx" height="120rpx" />
								<view>
									<u-icon size="48rpx" label="日志批阅" labelPos="right" labelSize="28rpx"
										labelColor="#7A7EF9" name="/static/img/home/icon-日志批阅@2x.png"></u-icon>
									<text>提供简单描述文字</text>
								</view>
							</view>
							<view class="item report" data-type="achievement" @click="handelGate">
								<u-image src="/static/img/home/成绩鉴定背景@2x.png" width="220rpx" height="120rpx" />
								<view>
									<u-icon size="48rpx" label="成绩鉴定" labelPos="right" labelSize="28rpx"
										labelColor="#FF6363" name="/static/img/home/icon-成绩鉴定@2x.png"></u-icon>
									<text>提供简单描述文字</text>
								</view>
							</view>
						</view>
					</u-col>
				</u-row>

			</view>

			<view class="todoList">
				<view class="title">待办事项</view>
				<view v-if="hasLogin">
					<view class="cell">
						<u-cell-group :border="false">
							<u-cell v-if="statistics && statistics.internshipApply && statistics.internshipApply > 0"
								:isLink="true" url="/pages/main/home/registrationReview/registrationReview"
								arrow-direction="right" :rightIconStyle="{fontSize:'24rpx'}" :border="false">
								<view slot="title" class="u-slot-title">
									<view class="u-cell-title">实习申请</view>
									<view class="u-cell-text">
										您有<text>{{statistics.internshipApply}}</text>条<text>实习申请</text>待处理！</view>
								</view>
								<text slot="value" class="u-slot-value">立即处理</text>
							</u-cell>

							<u-cell
								v-if="statistics && statistics.formLogWaitReview && statistics.formLogWaitReview > 0"
								:isLink="true" url="/pages/main/home/logReview/logReview" arrow-direction="right"
								:rightIconStyle="{fontSize:'24rpx'}" :border="false">
								<view slot="title" class="u-slot-title">
									<view class="u-cell-title">日志批阅</view>
									<view class="u-cell-text">
										您有<text>{{statistics.formLogWaitReview}}</text>篇<text>日志</text>待批阅！</view>
								</view>
								<text slot="value" class="u-slot-value">立即批阅</text>
							</u-cell>

							<u-cell v-if="statistics && statistics.reportWaitReview && statistics.reportWaitReview > 0"
								:isLink="true" url="/pages/main/home/reportReview/reportReview" arrow-direction="right"
								:rightIconStyle="{fontSize:'24rpx'}" :border="false">
								<view slot="title" class="u-slot-title">
									<view class="u-cell-title">报告批阅</view>
									<view class="u-cell-text">
										您有<text>{{statistics.reportWaitReview}}</text>篇<text>实习报告</text>待批阅！</view>
								</view>
								<text slot="value" class="u-slot-value">立即批阅</text>
							</u-cell>

							<u-cell
								v-if="statistics && statistics.achievementWaitAppraisal && statistics.achievementWaitAppraisal > 0"
								:isLink="true" url="/pages/main/home/achievementAppraisal/achievementAppraisal"
								arrow-direction="right" :rightIconStyle="{fontSize:'24rpx'}" :border="false">
								<view slot="title" class="u-slot-title">
									<view class="u-cell-title">成绩评定</view>
									<view class="u-cell-text">
										您有<text>{{statistics.achievementWaitAppraisal}}</text>个<text>成绩</text>待评定！
									</view>
								</view>
								<text slot="value" class="u-slot-value">立即评定</text>
							</u-cell>

						</u-cell-group>
					</view>
				</view>
				<view class="no_login" v-else>
					<text>登录后可查看待办事项</text>
					<u-button type="primary" text="登录" color="#06B079" :customStyle="{width:'340rpx'}"
						@click="handelLOgin"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapActions
	} from 'vuex'


	import {
		putTeacherRolesApi,
		getTodoListStatisticsApi,
	} from '@/config/api.js';

	export default {
		data() {
			return {
				statistics: {}
			}
		},

		onLoad() {

		},

		onShow() {
			if (this.hasLogin) {
				getTodoListStatisticsApi().then(data => {
					if (data) {
						this.statistics = data;
					}
				})
			}
		},

		computed: {
			...mapGetters([
				'doneRoles',
			]),
			...mapState({
				hasLogin: 'hasLogin',
				vuex_user: 'vuex_user',
				teacher: (state) => state.vuex_user.teacher,
			}),


		},

		methods: {

			handelLOgin() {
				this.$u.route('/pages/main/my/login/login');
			},

			handelChange() {
				let {
					roles = []
				} = this.teacher;

				if (roles.length < 2) {
					this.$u.toast('暂无可切换权限')
				} else {

					let selectRoles = roles.filter(item => item.id != this.teacher.roleId);

					putTeacherRolesApi(this.teacher.id, {
						roleId: selectRoles[0].id
					}).then(data => {
						if (data) {
							console.log(data)
							this.$store.dispatch(`user/getUserInfo`)
						}
					})
				}
			},



			handelGate(even) {
				if (!this.hasLogin) {
					this.$u.route('/pages/main/my/login/login');
					return;
				}

				let {
					type = ''
				} = even.currentTarget.dataset;

				switch (type) {
					case 'review':
						this.$u.route('/pages/main/home/registrationReview/registrationReview');
						break;

					case 'signin':
						this.$u.route('/pages/main/home/studentSignIn/studentSignIn');
						break;

					case 'log':
						this.$u.route('/pages/main/home/logReview/logReview');
						break;

					case 'report':
						this.$u.route('/pages/main/home/reportReview/reportReview');
						break;

					case 'achievement':
						this.$u.route('/pages/main/home/achievementAppraisal/achievementAppraisal');
						break;






				}

			},

		}
	}
</script>

<style lang="scss" scoped>
	.cell /deep/ .u-cell {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 0 20rpx 0;

		// 	.u-flex {
		// 		position: relative;
		// 		top: -2rpx;
		// 	}

		// 	.u-cell_title {
		// 		margin: 0 16rpx;
		// 		color: rgba(0, 0, 0, 0.65);
		// 	}
	}

	.home_box {
		background-color: #F7F7F7;
		min-height: 100%;
		height: auto;

		.home {
			width: 690rpx;
			margin: 0 auto;

			.bar {
				width: 100%;
				height: 288rpx;
				background-color: #E4F7F4;
				margin: 0 0 34rpx 0;

			}

			.info {
				.name {
					text {
						font-size: 36rpx;
						line-height: 52rpx;
						color: #202131;
					}

					text:last-child {
						font-size: 24rpx;
						line-height: 36rpx;
						color: #909097;
						margin: 0 0 0 12rpx;
					}
				}

				.identity {
					margin: 0 0 0 10rpx;
				}
			}

			.gate {
				margin-bottom: 50rpx;

				.box {
					width: 220rpx;
					height: 256rpx;

					.item {
						position: relative;
						width: 220rpx;
						height: 120rpx;

						view {
							position: absolute;
							top: 20rpx;
							left: 20rpx;

							text {
								display: block;
								margin: 8rpx 0 0 6rpx;
								font-size: 20rpx;
								line-height: 20rpx;
								color: #909097;
							}
						}
					}

					.review {


						.copywriting {
							position: absolute;
							top: 56rpx;
							right: 32rpx;

							text {
								display: block;
								font-size: 28rpx;
								line-height: 36rpx;
								color: #06B079;
								margin: 0;
							}

							text:last-child {
								font-size: 20rpx;
								line-height: 52rpx;
								color: #909097;
							}

						}
					}
				}
			}

			.todoList {
				.no_login {
					padding: 150rpx 0 0 0;
					text-align: center;

					text {
						font-size: 24rpx;
						line-height: 52rpx;
						color: #909097;
					}
				}

				.title {
					font-size: 32rpx;
					line-height: 32rpx;
					color: #202131;
				}

				.title::before {
					content: "";
					display: inline-block;
					width: 6rpx;
					height: 32rpx;
					background-color: #06B079;
					margin: 0 12rpx 0 0;
					position: relative;
					top: 4rpx;
					border-radius: 8rpx;
				}

				.cell {
					margin: 20rpx 0 0 0;

					.u-slot-title {
						.u-cell-title {
							font-size: 24rpx;
							line-height: 54rpx;
							color: #909097;
						}

						.u-cell-text {
							font-size: 28rpx;
							line-height: 60rpx;
							color: #202131;

							text {
								color: #06B079;
							}
						}
					}

					.u-slot-value {
						font-size: 24rpx;
						line-height: 36rpx;
						color: #909097;
					}
				}

			}
		}
	}
</style>