<template>
	<div class="page-body">
		<div >
			<div class="uni-flex today" >
				<image src="/static/images/puching/time.png" mode="aspectFit" class="uni-icon-timefill"></image>
				<text class="date-text ml-1">{{signin.day}}  {{$util.cutDate(nowDay,"YYYY年MM月DD日")}}</text>
			</div>
			<div class="company-title">我的位置：{{signin.nowAddress}}</div>
			<div class="map-box" v-if="workLocale.ClockLat">
				<map style="width: 100%; height: 200rpx;" id="myMap"
				 :latitude="workLocale.ClockLat" :longitude="workLocale.ClockLng" show-location="true"
				 :markers="mudi" :circles="circles"></map>
			</div>
			<div>
				<div class="punching-date-box">
					<div class="title"><div class="circle" :class="{'now': workLocale.ClockType==1000}"></div>上班时间 <span class="ml-1" v-if="workLocale"> {{workLocale.AMStarttime}}</span></div>
					<!-- 是否是上午打卡 -->
					<div class="date-text" v-if="workLocale.isAmclock"> {{pageMsg ? pageMsg.ClockIn+' 已打卡' : '未打卡'}}</div>
					<div class="date-text" v-else-if="pageMsg && pageMsg.ClockIn">{{pageMsg.ClockIn}} 已打卡<span class="clockState" v-if="pageMsg.ClockInResult!==1000">{{pageMsg.ClockInResultText}}</span></div>
					<div class="date-text" v-else>缺卡</div>
				</div>
				<div class="punching-date-box" v-if="!workLocale.isAmclock">
					<div class="title"><div class="circle" :class="{'now': workLocale.ClockType==2000}"></div>下班时间 <span class="ml-1" v-if="workLocale">{{workLocale.PMEndtime}}</span></div>
					<div class="date-text" v-if="pageMsg && pageMsg.ClockOut">{{pageMsg.ClockOut}} 已打卡<span class="clockState" v-if="pageMsg.ClockOutResult!==1000"> {{ pageMsg.ClockOutResultText}}</span></div>
				</div>
			</div>
			<div class="btn-box" >

				<div class="btn" :class="{'bg-gray':!signin.isAble}" @click="takePhoto">
					<div class="fs-14">{{!workLocale.isAmclock ? '下班打卡': '上班打卡'}}</div>
					<div class="fs-52">{{signin.time}}</div>
				</div>
				<div class="uni-flex able-text">
					<image src="/static/images/puching/in.png" mode="aspectFit" v-if="signin.isAble"></image>
					<image src="/static/images/puching/out.png" mode="aspectFit" v-else></image>
					<span>{{signin.isAble ? '已进入考勤范围' : '当前位置超出打卡范围'}}</span>
				</div>
			</div>
		</div>
		<uniPopup type="middle" :show="showPop">
			<div class="pop-body">
				<image src="https://eshangtech.com/ShopICO/ahyd-BID/puching/succes.png" mode="aspectFill"></image>
				<div class="tip-time">{{clockDate}}</div>
				<div class="tip-text">打卡成功!</div>
				<div class="pop-btn" @click="showPop=!showPop">知道了</div>
			</div>
		</uniPopup>
	</div>
</template>

<script>
	import uniPopup from '@/components/uni-popup'
	// import { mapMutations } from 'vuex';

	export default{
		data(){
			const nowday = this.$util.cutDate(new Date())
			return {
				loading: true,
				clockDate:'',
				nowDay: nowday,
				mudi: [],
				circles: [{
					latitude: 37.775006,
					longitude: 112.616312,
					color:"#b0d0e7",
					fillColor: "#b0d0e730",
					strokeWidth: 1,
					radius: 100
				}],
				signinTime:'',
				signin:{
					time:'',
					nowAddress:'',
					day: '',
					latitude:'',
					longitude: '',
					isAble:false
				},
				pageMsg: null,
				showPop: false,
				mapCtx: null,
				workLocale: null,
				userPhoto: '' //用户打卡头像
			}
		},
		// computed:{
		// 	...mapState({
		// 		'userPhoto':(state)=>{return state.userPhoto}
		// 	})
		// },
		components:{
			uniPopup
		},
		methods: {
			// ...mapMutations(['setPhoto']),
			// getLocation(){
			// 	let _this = this
			// 	uni.getLocation({
			// 		type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			// 		altitude: true, // 高精度定位
			// 		success: function (res) {
			// 			_this.signin.latitude = res.latitude;
			// 			_this.signin.longitude = res.longitude;
			// 			const latitude = res.latitude
			// 			const longitude = res.longitude
			// 			let { ClockLng,ClockLat } = _this.workLocale

			// 			_this.$util.calculateDistance(
			// 				{latitude:latitude, longitude:longitude},
			// 				{latitude: ClockLat, longitude: ClockLng})
			// 			.then(data => {
			// 				let distance = data.result.elements[0].distance
			// 				_this.signin.isAble = (distance!=-1 && distance<100) ? true :false
			// 			})
			// 			wx.request({
			// 			  url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=SVKBZ-P6QCJ-NH7F7-KOPJW-CBNEV-FUBRT`,
			// 			  success: res => {
			// 					_this.signin.nowAddress = res.data.result.address
			// 				  }
			// 				})
			// 		    }
			// 	})
			// },
			// 获取当前时间时分秒
			getTime (time) {
			  time = time ? new Date(time) : new Date()
			  this.signin.time = this.$util.cutDate(time,'hh:mm:ss')
			},
			getDay (){

				var a = new Array("日", "一", "二", "三", "四", "五", "六");
				var week = new Date().getDay();
				this.signin.day = "星期"+ a[week];
			},
			// getWorkLocale(){ //获取 考勤地址、坐标，打卡范围，上、下班时间
			// 	let _this= this
			// 	let nowDay = this.nowDay
			// 	this.$request.$get('GetWorkLocale',{}).then(res =>{
			// 		if(res.Result_Code==100) {
			// 			if( res.Data){
			// 				let msg =  res.Data
			// 				let [ClockLng,ClockLat] = _this.$util.bMapToQQMap(msg.ClockLng,msg.ClockLat)
			// 				msg.ClockLng =ClockLng
			// 				msg.ClockLat = ClockLat
			// 				_this.mudi = [{
			// 					id: "sx1",
			// 					latitude: ClockLat,
			// 					longitude: ClockLng,
			// 					title: msg.ClockAddress,
			// 				}]

			// 				_this.circles[0].latitude = ClockLat
			// 				_this.circles[0].longitude = ClockLng
			// 				_this.circles[0].radius = msg.ClockRange

			// 				let am = new Date(nowDay+' '+msg.AMEndtime+':00')
			// 				msg.isAmclock = am.getTime()-(new Date()).getTime() >0 ? true: false
			// 				_this.workLocale = msg
			// 				_this.loading = false
			// 				// _this.getLocation()
			// 			}

			// 		}else {
			// 			uni.showModal({
			// 				title:'温馨提示',
			// 				content: res.Result_Desc,
			// 				showCancel:false
			// 			})
			// 		}
			// 	})
			// },

			getMsg(){ // 更新用户当前打卡时间
				let _this= this
				let nowDay = this.nowDay
				this.$request.$get('GetWorkTimeRecord',{
					startDate: nowDay,
					endDate: nowDay
				}).then(res =>{
					if(res.Result_Code==100) {
						if( res.Data.List.length>0){
							let msg =  res.Data.List[0]
							_this.pageMsg = msg

						}

					}
				})
			},
			faceClock(){ // 提交打卡
				let _this= this
				let location = this.signin

				if(!this.signin.isAble) return
				_this.signinTime = this.signin.time
				uni.showLoading({
					title: "正在识别人脸，请稍后",
					mask:true,
				})
				this.$request.$post('FaceClock',{
					clockLat: location.latitude,
					clockLng: location.longitude,
					photo: this.userPhoto || ''
				}).then(res =>{
					_this.loading = false

					uni.hideLoading()
					if(res.Result_Code==100) {
						_this.clockDate = res.Data.ClockDate
						_this.getMsg()
						_this.showPop = true

					}else{
						uni.showModal({
							content:'打卡失败：'+res.Result_Desc
						})
					}
					 _this.userPhoto=null
				})
			},
			clearTime (){
				clearInterval(this.setTime)
				this.setTime = null
			},
			takePhoto() { // 跳转页面拍照
				let _this = this
				if(!this.signin.isAble) return //  是否可以打卡
				if(this.loading ) return  // 是否正在上传

				uni.navigateTo({
					url:'/pages/additionalFeatures/takePhoto'
				})
			},
			photoTobase64(photoPath){ // 把图片转为base64

				let _this= this
				uni.getFileSystemManager().readFile({
					filePath: photoPath, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: res => { //
						let base64 = res.data.replace(/\+/ig,'%2B') //不加上这串字符，在页面无法显示的哦

						_this.userPhoto = base64
						_this.faceClock()
					}
				})

			}
		},
		onLoad() {
			let _this = this
			// this.getWorkLocale()

			_this.setTime = setInterval(function(){_this.getTime()},1000)
			_this.getMsg()
			uni.$on('addUserPhoto',function(data){ // 监听打卡拍照的数据,接收拍照的照片地址
				_this.photoTobase64(data)
				// console.log(data)
				// uni.$off('addUserPhoto')
			})
		},
		onPullDownRefresh() {
			let _this = this
			_this.getLocation()

			setTimeout(function() {
				uni.stopPullDownRefresh()

			}, 1000)
		},

		onUnload() {
			// console.log(1)
			uni.$off('addUserPhoto')
			this.clearTime()
		}
	}
</script>

<style scoped>
	.fs-14 {
		font-size: 28rpx;
	}
	.fs-52 {
		font-size: 52rpx;
	}
	.ml-1 {
		margin-left: 4rpx;
	}
	.uni-icon {
		font-size: 28rpx;
	}
	.uni-icon-timefill {
		color: #CCCCCC;
		width: 26rpx;
		height: 26rpx;
	}
	.page-body {
		padding: 0 24rpx;
		background-color: #fff;
		height: 100%;
		box-sizing: border-box;
	}
	.today {
		padding: 20rpx 0;
		align-items: center;
	}
	.date-text {
		color: #A3A3A3;

		font-size: 22rpx;
		/* line-height: 50rpx; */
		/* margin-left: 8rpx; */
	}
	.company-title {
		font-size: 28rpx;
		line-height: 1.5;
		font-weight: bolder;
		padding-top: 32rpx;
		padding-bottom: 20rpx;
		border-top: 2rpx solid #edeef2;
	}
	.map-box {
		margin-bottom: 40rpx;
	}
	.punching-date-box {
		padding-left: 30rpx;
		position: relative;
	}
	.punching-date-box:nth-child(2)::before {
		content: '';
		position: absolute;
		height: 190rpx;
		width: 2rpx;
		display: block;
		background-color: #e0e0e0;
		top: -172rpx;
		left: 36rpx;
		z-index: 0;
	}
	.punching-date-box + .punching-date-box {
		margin-top: 96rpx;
	}
	.punching-date-box .circle {
		background-color: #b2b2b2;
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		margin-right: 8rpx;
	}
	.punching-date-box .circle.now {
		background-color: #57AAEE;
	}
	.punching-date-box .title {
		font-size: 28rpx;
		color: #9EA2A4;
		display: flex;
		align-items: center;
	}
	.punching-date-box .clockState {
		color: #FF8556;
		margin-left: 12rpx;
		font-size: 24rpx;
		font-weight: 700;
	}
	.punching-date-box .date-text {
		color: #353638;
		font-size: 30rpx;
		padding-left: 30rpx;
		line-height: 60rpx;
	}
	.btn-box {
		margin-top: 80rpx;
	}
	.btn {
		border-radius: 50%;
		margin: 0 auto;
		width: 252rpx;
		height: 252rpx;
		color: #fff;
		text-align: center;
		padding-top: 42rpx;
		background: linear-gradient(#65bef9 0%, #50a0e8 100%);
		box-sizing: border-box;
	}
	.bg-gray.btn {
		background:linear-gradient(#cdd4d8 0%, #ADB2BF 100%);
	}
	.able-text {
		color: #8B8D8E;
		font-size: 22rpx;
		margin-top: 32rpx;
		justify-content: center;
		align-items: center;
	}
	.able-text image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 8rpx;
	}
	.pop-body {
		height: 664rpx;
		width: 564rpx;
		position: relative;
	}
	.pop-body image {
		width: 497rpx;
		height: 363rpx;
		position: absolute;
		top: -46px;
		transform: translateX(-48%);
		margin: 0 50%;
	}
	.tip-text {

		font-size: 46rpx;
		text-align: center;
		color: #7B95A9;
	}
	.tip-time {
		text-align: center;
		color: #5EB4F3;
		font-size: 72rpx;
		margin-top: 260rpx;
	}
	.pop-btn {
		border-top: 2rpx solid #ececec;
		font-size: 28rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #56A8ED;
		margin-top: 120rpx;
	}
</style>
