<template>
	<view class="" >
		<view class="">
			<view class="top"></view>
			<view class="" style="margin-top: -440rpx;">
				<view class="person" >
					<view class="flex">
						<view class="tag" v-if="userInfo.realName">
							<text>{{userInfo.realName.substr(0,1)}}</text>
						</view>
						<view class="content">
							<view class="name">
								{{userInfo.realName}}
							</view>
							<view class="company">
								{{userInfo.enterpriseName}}
							</view>
						</view>
					</view>
					<navigator url="/punch/pages/punch-list/punch-list" hover-class="none" class="date">
						<text>{{date}}</text>
						<text class="cuIcon-unfold padding-left-10"></text>
					</navigator>
				</view>
				
				<view class="page-content">
					<view  class="location" style="padding-top: 60rpx;">
						<view class="text-lg">
							<u-icon name="map-fill" color="#5064eb;"></u-icon>
							<text class="">当前位置</text>
							<text class="text-fail">（不在打卡范围内）</text>
							<text @click="getLocation" class="reset-location" style="color: #5064eb;">重新定位</text>
						</view>
						<view style="padding-top: 20rpx;font-size: 28rpx;">
							<text class="padding-left-10">{{cur_address}}</text>
						</view>
					</view>
					<view class="btn-position">
						<view class="dk-btn ">
							<text>{{time}}</text>
							<text>下班打卡</text>
						</view>
					</view>
					<view class="text-center margin-top-50">
						已进入WiFi考勤区域：SSPASS
					</view>
					
					<view class="margin-50" >
						<u-time-line >
							<u-time-line-item nodeTop="2" bg-color="#5064eb">
								<template v-slot:node>
									<view class="u-node bg-white" >
										<text class="cuIcon-title base-color" style="font-size: 40rpx;"></text>
									</view>
								</template>
								<template v-slot:content>
									<view class="dk-time-line">
										<view class="dk-title">上班打卡</view>
										<view class="dk-subTitle">
											<u-icon name="clock-fill" color="#7e7e7e" :size="28"></u-icon>
											<text class="padding-left-10">2019-05-08 12:12</text>
										</view>
										<view class="dk-subTitle">
											<u-icon name="map-fill" color="#7e7e7e" :size="28"></u-icon>
											<text class="padding-left-10">广东省广州市海珠区</text>
										</view>
										<view class="dk-subTitle" style="margin-bottom: 40rpx;">
											<u-icon name="wifi" color="#616161" :size="28"></u-icon>
											<text class="padding-left-10">SSPASS</text>
										</view>
									</view>
								</template>
							</u-time-line-item>
							<u-time-line-item nodeTop="2" bg-color="#5064eb">
								<template v-slot:node>
									<view class="u-node bg-white" >
										<text class="cuIcon-title" style="font-size: 40rpx;"></text>
									</view>
								</template>
								<template v-slot:content>
									<view class="dk-time-line">
										<view class="dk-title">下班打卡</view>
										<view class="dk-subTitle">
											<u-icon name="clock-fill" color="#7e7e7e" :size="28"></u-icon>
											<text class="padding-left-10">2019-05-08 12:12</text>
										</view>
										<view class="dk-subTitle">
											<u-icon name="map-fill" color="#7e7e7e" :size="28"></u-icon>
											<text class="padding-left-10">广东省广州市海珠区</text>
										</view>
										<view class="dk-subTitle">
											<u-icon name="wifi" color="#616161" :size="28"></u-icon>
											<text class="padding-left-10">SSPASS</text>
										</view>
									</view>
								</template>
							</u-time-line-item>
						</u-time-line>
					</view>
				</view>
			</view>
		</view>
		<!-- <view style="height: 65vh;" class="flex justify-center align-center" v-else>
			<u-loading mode="flower" size="150"></u-loading>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		let that = this;
		return {
			//当前位置信息
			cur_longitude:'',//当前经度
			cur_latitude:'',//当前纬度
			cur_address:'',//当前地址
			//clock 公司打卡规则
			punch_rule:{
				longitude:'113.367500427',
				latitude:'23.095698854',
				startTime:'09:00',
				endTime:'06:30',
			},
			distance:'',
			//日期
			date:'',
			//时间
			time:'',
			userInfo:{},
			
			clickNum:0
		};
	},
	created() {
		//获取用户信息
		this.userInfo=getApp().globalData.userInfo
		// if (this.$isEmpty(this.userInfo)) {
		// 	this.$dialog.showModal('系统异常',false).then(res=>{
		// 		this.$navigateBack()
		// 	})
		// 	return
		// }
		//获取当前日期
		this.date=this.$dateTime.format(new Date(),'YYYY-mm-dd')
		//获取当前时间
		this.getNowTime()
		//获取当前位置
		this.getLocation()
		//获取当前连接的wifi
		this.getConnectedWifi()
	},
	methods: {
		//初始化地图sdk
		initMap(){
			this.mapKey=this.$global.MAPKEY
			qqmapsdk = new QQMapWX({
				key: this.mapKey
			});
		},
		getNowTime(){
			let that=this
			this.time=this.$dateTime.format(new Date(),'HH:MM:SS')
			setInterval(()=>{
				that.time=that.$dateTime.format(new Date(),'HH:MM:SS')
			},1000)
		},
		getLocation(){
			let that=this
			console.log(this.clickNum);
			if(this.clickNum !== 0){
				this.$dialog.showLoading("获取中...")
			}
			if(this.clickNum >= 3){
				this.$u.toast("请稍后尝试")
				setTimeout(()=>{
					that.clickNum=1
				},15000)
				return ;
			}
			
			this.clickNum++;
			
			uni.getLocation({
			    type: 'gcj02',
			    success: function (res) {
					if(that.clickNum !== 0){
						setTimeout(()=>{
							uni.hideLoading()
						},800)
					}
					
					let vuex_location={
						latitude:res.latitude,
						longitude:res.longitude
					}
					
					that.cur_latitude=res.latitude
					that.cur_longitude=res.longitude
					
					//计算当前位置和公司打卡位置的距离
					that.distance=that.$util.calculateDistance(that.cur_latitude,that.cur_longitude,
												 that.punch_rule.latitude,that.punch_rule.longitude)
					
					let URL = 'https://apis.map.qq.com/ws/geocoder/v1/?location=';
					let getAddressUrl = URL + that.cur_latitude + ',' + that.cur_longitude + `&key=`+that.$global.MAPKEY;
					uni.request({
						url:getAddressUrl,
						success(result) {
							if(that.clickNum != 1){
								setTimeout(()=>{
									uni.showToast({
										title:"更新成功"
									})
								},1200)
							}
							
							let Res_Data = result.data.result;
							//将位置共享给外出打卡，以免再次请求
							vuex_location.address=Res_Data.formatted_addresses.recommend
							that.$u.vuex('vuex_location',vuex_location)
							
							that.cur_address=Res_Data.address + '(' + Res_Data.formatted_addresses.recommend + ')'
						}
					})
			    }
			});
		},
		getConnectedWifi(){
			this.$mpi.getConnectedWifi().then(res=>{
				console.log(res);
			}).catch(err=>{
				console.log(err);
			})
		}
	}
};
</script>

<style lang="scss">
.top{
	 height: 450rpx;
	 background-color: $base-color;
}	

 .person{
	 border-radius: 20rpx;
	 padding: 40rpx;
	 display: flex;
	 justify-content: space-between;
	 margin: 20rpx;
	 background-color: #FFFFFF;
	 
	 .tag{
	 	border-radius: 50%;
	 	display: flex;
	 	justify-content: center;
	 	align-items: center;
	 	height: 100rpx;
	 	width: 100rpx;
	 	font-size: 34rpx;
		background-color: #035499;
		color: #FFFFFF;
	 }
	 
	 .content{
		 padding-left: 20rpx;
		 
		 .name{
		 		 font-size: 34rpx;
		 		 font-weight: 800;
		 }
		 
		 .company{
			 padding-top: 10rpx;
			 font-size: 26rpx;
			 color: $base-color;
		 }
	 }
	 
	 .date{
		 display: flex;
		 justify-content: center;
		 align-items: center;
	 }
 }
.page-content{
  height: 1180rpx;
  margin:20rpx;
  padding-bottom: 50rpx;
  border-radius: 20rpx;
  background-color: #FFFFFF;
  
  .reset-location{
	  padding-left: 10rpx;
	  text-decoration: underline;
  }
  
  .btn-position{
	  display: flex;
	  justify-content: center;
	  margin-top: 40rpx;
	  
	  .dk-btn{
	  	  width: 70%;
	  	  padding: 20rpx 80rpx;
		  // background-color: $base-color;
		  background-image: linear-gradient(#52a5f8,$base-color);
	  	  color: #FFFFFF;
	  	  border-radius: 5000rpx;
	  	  display: flex;
	  	  justify-content: center;
	  	  align-items: center;
	  	  flex-direction: column;
		  box-shadow: 0rpx 10rpx 20rpx rgba(82, 159, 247, 0.8);
	  	  text:first-child{
	  		  font-size: 40rpx;
	  	  }
	  	  text:last-child{
	  		  padding-top: 10rpx;
	  		  font-size: 28rpx;
	  	  }
	  }
  }
  .location{
	  padding: 50rpx;
	  display: flex;
	  flex-direction: column;
	  
	  text:first-child{
		  font-size: 32rpx;
	  }
	  
	  text:last-child{
		  padding-top: 10rpx;
		  font-size: 26rpx;
		  color: #676767;
	  }
  }
}


.dk-time-line{
	.dk-title{
		font-weight: 800;
		font-size: 32rpx;
		padding-bottom: 20rpx;
	}
	
	.dk-subTitle{
		margin: 20rpx 0;
	}
}
	
</style>
