<template> 
  
    <view v-if="ready" class="contentBox"> 
		<view class="content" id="attendContent">
			<view id="show">{{now}}</view>
			<view class="pen" @click="action('dk')">
				 <img id="attimg" :src="imgsrc" alt="" width="100%">
			</view>
		</view>
		<view class="footer">
			<img src="../../common/images/2.png" alt="" width="100%">
		</view>  
	
	
    </view> 
</template> 
  
  
<script> 
/* 
 * 版 本 Learun-ADMS V7.0.3 力软敏捷开发框架(http://www.learun.cn) 
 * Copyright (c) 2013-2020 上海力软信息技术有限公司 
 * 创建人：超级管理员 
 * 日  期：2022-03-10 15:30 
 * 描  述：考勤打卡 
 */
  
/** 
 * 本段代码由移动端代码生成器输出，移动端须 2.2.0 版本及以上可以使用
 * 请在移动端 /pages.json 中的 pages 字段中添加一条记录： 
 * { "path": "pages/AttendanceCard/list", "style": { "navigationBarTitleText": "考勤打卡" } } 
 *  
 * （navigationBarTitleText 字段为本页面的标题文本，可以修改） 
 * （必须自行操作该步骤，力软代码生成器不会自动帮您修改 /pages.json 文件） 
 */
  
import get from 'lodash/get'
import set from 'lodash/set'
import moment from 'moment'
import customPageMixins from '@/common/custompage.js'
//导入图片
import dk from '../../common/images/dk.png'
import dkred from '../../common/images/dkred.png'
import dkyellow from '../../common/images/dkyellow.png'
  
export default { 
  mixins: [customPageMixins], 
  
  data() { 
    return { 
      // 页面相关参数 
      now: null, 
	  imgsrc:dk,
      ready: false, 
	  timer:'',
    } 
  }, 
  
  async onLoad() { 
    await this.init() 
  }, 
  
  methods: { 
    // 页面初始化 
    async init() { 
      this.LOADING('加载数据中...') 
  
      this.now = this.getCurrentTime()
	  this.timer = setInterval(this.getCurrentTime,1000)
	  
	  await this.judgeIsDK()
	  
      this.ready = true
      this.HIDE_LOADING() 
    },
	
    // 点击 「打卡」按钮 
    async action(type) { 
      switch (type) { 
        case 'dk': 
			if(this.imgsrc == dkred){
				return
			}
			this.LOADING()
			this.HTTP_POST('learun/adms/attendance/clockin', {}, '打卡失败').then(success => {
				this.HIDE_LOADING()
				if(!success) { 
					this.TOAST('打卡失败') 
					return
				} 
				this.TOAST('打卡成功','success') 
				setTimeout(this.back,500)
			    
			}) 
			return
		  
        default: break
      } 
    },
	//判断当前时间是否可以打卡
	async judgeIsDK(){
		this.HTTP_GET('learun/adms/attendance/IsAttendance',{},'判断当前时间是否可以打卡失败').then(success=>{
			if(!success){return}
			if (success.data == "red") {
				this.imgsrc=dkred;
			} else if (success.data == "yellow") {
				this.imgsrc=dkyellow;
			}else {
				this.imgsrc=dk;
			}
			
		})
		
	},
	//返回
	back(){
		this.NAV_BACK()
	},
	//获取当前时间
	 getCurrentTime() {
		 let nowDate = new Date();
	 　　let hh = nowDate.getHours();
	 　　let mf = nowDate.getMinutes()<10 ? '0'+nowDate.getMinutes() : nowDate.getMinutes();
	 　　let ss = nowDate.getSeconds()<10 ? '0'+nowDate.getSeconds() : nowDate.getSeconds();
	 　　this.now = hh+':'+mf+':'+ss;
	 },
  },
  destroyed() {
  	clearInterval(this.timer)
  }
} 
</script> 

<style lang="less">	
uni-page-body{
	height: 100%;
	width: 100%;
	background-color: #fff;
}
  .content {
	width: 48%;
	height: 50%;
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translate(-50%, 10%);
}

#show {
	text-align: center;
	height: 200rpx;
	font-size: 56rpx;
}

.pen {
	height: 48%;
	border-radius: 50%;
	background-color: #e7f5ff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pen2 {
	width: 91%;
	height: 91%;
	border-radius: 50%;
	background-color: #bde4ff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pen3 {
	width: 84%;
	height: 84%;
	border-radius: 50%;
	background-color: #0c86d8;
	text-align: center;
	font-size: 68rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffff;
}

.footer {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	overflow: hidden;
}
</style>