<template>
  <view class="page">
		<cu-custom :isBack="true" title="上课签到"></cu-custom>
		<view class="header bg-white" 	:style="[{top:topHeader + 'px'}]">
			<view class="icon_title flex align-center justify-between solid-bottom">
				<view class="info flex align-center justify-between">
					 <image mode="scaleToFill" :src="user.avatarUrl" class="avatar lg" v-if="user.avatarUrl"></image>
			  	 <view class="username">{{user.nickName}}</view>
				</view>
				<view style="color:#00D2E3">{{info.status_desc}}</view>
    	</view>
			<view class="class_info">
				<view style="font-size:15px;margin-top: .6rem;">{{info.start_at}}</view>
				<view class="class_title">{{info.course_name}}</view>
				<view class="address flex align-center">
					<image src="/static/imgs/school.png" mode="widthFix" style="width:18px;"/>
					<view style="margin-left: 10px;margin-right: 20px">{{info.school_name}}</view>
					<image src="/static/imgs/address.png" mode="widthFix" style="width:14px;"/>
					<view style="margin-left: 10px">{{info.classroom_name}}</view>
				</view>
    	</view>
		</view>
		<view class="content">
			<view class="content_title">签到说明</view>
    	<view>接到学生后请“点击签到”按钮作为签到</view>
			<view class="button" :style="checked?'background: #ddd':''"  hover-class="button_hover" @tap="signIn">
				<view class="text" :style="checked?'color: #aaa':''"> {{checked?'已签到':'点击签到'}}</view>
				<view class="pulse" v-if="!checked"></view>
				<view class="pulse1" v-if="!checked"></view>
    	</view>
     	<view class="des_title">
				<view class="line"></view>
				<view>注意事项</view>
				<view class="line"></view>
    	</view>
			<view>为确保学校每个学生的接送安全，平台特将接送学生的有关的 安全细则及注意事项重申如下，希望相关监护人及学生遵照执 行： </view>
			<view>1.要遵守校规，按时到校，听从教师的教导。 </view>
			<view>2.上课要自觉遵守课堂纪律，认真听讲，积极思维，好好学习。</view>
		</view>
	</view>
</template>

<script>
import { _getSignIn, _toSignIn } from '@/api/course'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      topHeader: this.globalCustomBarHeight,
      checked: false,
      plan_id: '',
      clock_in_id: '',
      info: {}
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  onLoad(options) {
    const id = decodeURIComponent(options.plan_id)
    if (!id) uni.navigateBack()
    this.plan_id = id
    this.init()
  },
  methods: {
    init() {
      _getSignIn({ plan_id: this.plan_id }).then(res => {
        this.info = res.data.sign_data
        this.checked = !this.info.status
      })
    },
    signIn() {
      if (this.checked) return false
      _toSignIn({ clock_in_id: this.info.clock_in_id }).then(res => {
        this.checked = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header{
  border-radius: 0 0 10px 10px;
  padding: .8rem;
  .icon_title{
    .info{
      .username{
        font-size: 21px;
        margin-left: 15px;
      }
    }
  }
  .class_info{
    margin-left: .8rem;
  }
  .class_title{
    font-size: 20px;
    font-weight: 550;
    margin-top: .6rem;
  }
  .address{
    display: flex;
    align-items: center;
    color: #898E96;
    font-size: 14px;
    margin-top: .6rem;
  }
}
.content{
  margin-top: .8rem;
  background: #fff;
  color: #888;
  padding: 2rem;
  font-size: 14px;
  .content_title{
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin-bottom: .4rem;
  }
  .button{
    margin: 2rem auto;
    width: 30vw;
    height: 30vw;
    border-radius: 50%;
    background: #5fcfe0;
    text-align: center;
    line-height: 30vw;
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    position: relative;
    .text{
			position: absolute;
			top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
		  width: 30vw;
      z-index: 999;
    }
    .pulse{
      position: absolute;
      top: 0;
      left: 0;
      width: 30vw;
      height: 30vw;
      border-radius: 50%;
      animation: warn1 2s linear .5s infinite;
      background: #bfeff7;
      z-index: 1;
    }
    .pulse1{
      position: absolute;
      top: 0;
      left: 0;
      width: 30vw;
      height: 30vw;
      border-radius: 50%;
      animation: warn1 2s linear 1s infinite;
      background: #76dae8;
      z-index: 1;
    }
  }
  .des_title{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    .line{
      border: 1px solid #aaa;
      width: 20vw;
      margin: 0 15px;
    }
  }
}

@keyframes warn1 {
  0% {
  transform: scale(1);
  opacity: 0;
  }
  25% {
  transform: scale(1);
  opacity: .1;
  }
  50% {
  transform: scale(1);
  opacity: .3;
  }
  75% {
  transform: scale(1.1);
  opacity: .5;
  }
  100% {
  transform: scale(1.3);
  opacity: 0;
  }
}
</style>
