<template>
  <view class="page">
    <view class="header">
      <view class="view-left">
        <view class="avatar"></view>
        <view class="name-gr">
          <view class="name">{{ userInfo ? userInfo.account : '' }}</view>
          <view class="title">xxxx考勤组-组长</view>
        </view>
      </view>
      <!-- <view class="btn-appl" @click="openPopup">
        <view class="icon-appl"></view>
        <view>申请</view>
      </view> -->
    </view>
    <!-- <view class="location">
      <view class="address">
        <view class="text1">江苏省南京市江宁区xx街道600号</view>
      </view>
      <view class="page-map">
        <map
          style="width: 100%; height: 379rpx"
          :latitude="latitude"
          :longitude="longitude"
          :markers="markers"
          :circles="circles"
          min-scale="3"
          max-scale="20"
          :enable-zoom="true"
          @markertap="markerTap"
        >
        </map>
      </view>
    </view> -->
    <view class="content">
      <view class="notice">今日排班：张安</view>
      <view class="block">
        <view class="box">
          <view class="text1">上班 {{ shangbanTime }} </view>
          <view class="text2">
            <view v-if="shangbanTime" class="yidaka">
            	<view class="icon-tickb"></view>
            	<text class="subtext1">{{ shangbanTime }}已打卡</text>
            	<!-- <text class="subtext2" @click="upDakaTime(1)">更新打卡</text> -->
            </view>
			<text v-else class="subtext1">未打卡</text>
          </view>
        </view>
        <view class="box">
          <view class="text1">下班 {{ xiabanTime }}</view>
          <view class="text2"> 
			   <view v-if="xiabanTime" class="yidaka">
					<view class="icon-tickb"></view>
					<text class="subtext1">{{ xiabanTime }}已打卡</text>
					<!-- <text class="subtext2" @click="upDakaTime(2)">更新打卡</text> -->
			   </view>
			   <text v-else class="subtext1">未打卡</text>
		   </view>
        </view>
      </view>
      <view class="btn-call" :class="clockStatu == 2 ? 'call-hui':''" @click="daka">
        <view class="text1">{{ clockStatu == 0 ? "上班打卡" : clockStatu == 1 ? "下班打卡" : clockStatu == 2 ? '全勤':'' }}</view>
        <view class="text2">{{ currentTime }}</view>
      </view>
      <view class="address">
        <view class="icon-tick"></view>
        <view>{{ isJudgmentPosition ? "已进入考勤范围" : "未在考勤范围" }}：{{ Address.province + Address.city + Address.district + Address.street + Address.streetNum + Address.poiName }}</view>
      </view>
      <view class="page-map">
        <map
          style="width: 100%; height: 379rpx"
          :latitude="latitude"
          :longitude="longitude"
          :markers="markers"
          :circles="circles"
          min-scale="3"
          max-scale="20"
          :enable-zoom="true"
          @markertap="markerTap"
        >
        </map>
      </view>
    </view>

    <uni-popup ref="popups" background-color="#fff">
      <view class="popup-box">
        <view class="popup-header">
          <view @click="closePopup">取消</view>
          <view @click="confirmPopup">确定</view>
        </view>
        <view class="popup-content">
          <view
            class="btn"
            @click="goPath('/subcontract/work/attence/leaveappli')"
          >
            <view class="icon-work"></view>
            <text class="btn-text">加班申请</text>
          </view>
          <view
            class="btn"
            @click="goPath('/subcontract/work/attence/leaveappli')"
          >
            <view class="icon-holiday"></view>
            <text class="btn-text">请假申请</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
	import { clock, getStatus, judgmentPosition } from "@/api/jn/clock.js"
export default {
  data() {
    return {
      id: 0, // 使用 marker点击事件 需要填写id
      title: "map",
      latitude: 39.909,
      longitude: 116.39742,
	  currentTime:'',
	  clockStatu:0,
	  dakashangTime: null,
	  dakaxiaTime: null,
	  shangbanTime:null,
	  xiabanTime:null,
	  Slat: "",
	  Slng: "",
	  myAddress:{
		province:"",
		city:"",
		district:"",
		street:"",
		streetNum:"",
		poiName:"",
	  },
      markers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: "/static/images/umale/icon-pointb.png",
          width: 40,
          height: 35,
        },
      ],
      circles: [
        {
          latitude: 39.909,
          longitude: 116.39742,
          color: "#367BEF",
          // 填充颜色
          fillColor: "#367BEF3A",
          // 圆半径
          radius: 150,
          // 边
          strokeWidth: 1,
        },
      ],
	  userInfo:null,
	  isJudgmentPosition:false
    };
  },
  props:['lat','lng','Address'],
  watch:{
	  lat:{
		  handler(lat){
			if(lat){
				this.Slat = lat;
				this.Slng = this.lng;
				this.latitude = lat;
				this.longitude = this.lng;
				this.markers[0].latitude = lat;
				this.markers[0].longitude = this.lng;
				this.circles[0].latitude = lat;
				this.circles[0].longitude = this.lng;
			}
		  },
		  immediate:true
	  }
  },
  methods: {
    goPath(url) {
      this.$tab.navigateTo(url);
    },
    openPopup() {
      this.$refs.popups.open("bottom");
    },
    confirmPopup() {
      this.$refs.popups.close();
    },
    closePopup() {
      this.$refs.popups.close();
    },
	// upDakaTime(id){
	// 	if(id == 1) {
	// 		this.shangbanTime = this.getCurrentTime(2)
	// 	} else {
	// 		this.xiabanTime = this.getCurrentTime(2)
	// 	}
	// },
	daka(){
		// console.log(this.clockStatu);
		if(this.clockStatu == 2) return
		let data = {userId:this.userInfo.userId,latitude:this.Slat+'',longitude:this.Slng+''}
		// let data = {userId:"21",latitude:'31.254467273803005',longitude:'120.73506295681001'}
		// console.log("data",JSON.stringify(data));
		clock(data).then(res=>{
			// console.log("resdaka",JSON.stringify(res));
			if(res.code == 200) {
				this.getClockStatus()
			}
		}).catch(err=>{
			uni.showToast({
        title: err,
        icon:'none'
      });
		})
	},
	getCurrentTime() {
		const now = new Date();
		const hours = this.formatNumber(now.getHours());
		const minutes = this.formatNumber(now.getMinutes());
		const seconds = this.formatNumber(now.getSeconds());
		return `${hours}:${minutes}:${seconds}`;
	},
	formatNumber(value) {
	  return value < 10 ? `0${value}` : value;
	},
	getClockStatus(){
		getStatus({userId:this.userInfo.userId}).then(res=>{
			console.log("res",JSON.stringify(res));
			if(res.code == 200){
				this.clockStatu = res.data.status;
				if(res.data.status == 1) {
					this.shangbanTime = res.data.begainTime.split(' ')[1];
				} else if(res.data.status == 2) {
					this.shangbanTime = res.data.begainTime.split(' ')[1];
					this.xiabanTime = res.data.endTime.split(' ')[1];
				}
			}
		})
	},
	markerTap(){}
  },
  mounted() {
	this.userInfo = uni.getStorageSync("userInfo")
	console.log(JSON.stringify(this.userInfo),"userInfo基本信息");
	this.getClockStatus()
	judgmentPosition({userId:this.userInfo.userId,latitude:this.Slat+'',longitude:this.Slng+''}).then(res=>{
		if(res.code == 200 && res.data){
			this.isJudgmentPosition = true;
		} else {
			this.isJudgmentPosition = false;
		}
	})
	// this.$nextTick(()=>{
	// 	this.markers.latitude = this.Slat
	// 	this.markers.longitude = this.Slng
	// 	this.circles.latitude = this.Slat
	// 	this.circles.longitude = this.Slng
	// })
  	setInterval(() => {
	  this.currentTime = this.getCurrentTime();
	}, 1000);
  },
  destroyed() {
	  // this.dakashangTime = null;
	  // this.dakaxiaTime = null;
	  // this.shangbanTime = "";
	  // this.xiabanTime = "";
  	// console.log("销毁");
  }
};
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: 150rpx;
  .popup-box {
    .popup-header {
      display: flex;
      justify-content: space-between;
      padding: 34rpx 32rpx;
      border-bottom: 1rpx solid #dce3ec;

      font-size: 32rpx;
      font-family: PingFang SC;
      color: #3976f1;
    }

    .popup-content {
      display: flex;
      justify-content: center;
      padding: 106rpx 0 157rpx 0;

      .btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .icon-work {
          width: 138rpx;
          height: 138rpx;
          background-size: 100%;
          background-image: url("@/static/images/umale/icon-work.png");
          background-repeat: no-repeat;
        }

        .icon-holiday {
          width: 138rpx;
          height: 138rpx;
          background-size: 100%;
          background-image: url("@/static/images/umale/icon-holiday.png");
          background-repeat: no-repeat;
        }
        .btn-text {
          margin-top: 32rpx;
          font-size: 32rpx;
          font-family: PingFang SC;
          line-height: 48rpx;
          color: #34373b;
        }
      }
    }
  }

  .header {
    display: flex;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
    border-radius: 16rpx;
    padding: 36rpx;
    margin: 20rpx;
    justify-content: space-between;

    .view-left {
      display: flex;
      .avatar {
        width: 88rpx;
        height: 88rpx;
        background-size: 100%;
        background-image: url("@/static/images/umale/icon-head.png");
        background-repeat: no-repeat;
      }

      .name-gr {
        margin-left: 48rpx;
        .name {
          font-size: 40rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #2e2f31;
        }
        .title {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #9da2ab;
          letter-spacing: 5rpx;
        }
      }
    }

    .btn-appl {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 14rpx;
      .icon-appl {
        width: 44rpx;
        height: 44rpx;
        background-size: 100%;
        background-image: url("@/static/images/umale/icon-appl.png");
        background-repeat: no-repeat;
      }
    }
  }

  .location {
    margin: 20rpx;
    padding: 20rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
    border-radius: 16rpx;
    .address {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 22rpx;
      .text1 {
        font-size: 32rpx;
        font-family: PingFang SC;
        // font-weight: bold;
        color: #2e2f31;
      }

      .text2 {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #367bef;
      }
    }
  }

  .content {
    background: #ffffff;
    box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26rpx 30rpx 197rpx 30rpx;
    margin: 30rpx 20rpx;

    .notice {
      text-align: center;
      font-size: 32rpx;
      font-family: PingFang SC;
      // font-weight: bold;
      color: #2e2f31;
      letter-spacing: 4rpx;
    }

    .block {
      display: flex;
      margin-top: 22rpx;
      .box {
        flex: 1;
        min-width: 316rpx;
        background: #ededee;
        border-radius: 8rpx;
        padding: 16rpx 20rpx;
        margin: 0 8rpx;

        .text1 {
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #2e2f31;
          letter-spacing: 4rpx;
        }

        .text2 {
          display: flex;
          white-space: nowrap;
          align-items: center;
          margin-top: 10rpx;
		  .yidaka {
			  display: flex;
			  white-space: nowrap;
			  align-items: center;
		  }
          .icon-tickb {
            width: 28rpx;
            height: 28rpx;
            background-size: 100%;
            background-image: url("@/static/images/umale/icon-tickb.png");
            background-repeat: no-repeat;
            margin-right: 15rpx;
          }
          .subtext1 {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #9da2ab;
            margin-right: 15rpx;
          }
          .subtext2 {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #367bef;
          }
        }
      }
    }

    .btn-call {
      width: 298rpx;
      height: 298rpx;
      background: linear-gradient(180deg, #5792f6 0%, #367bef 100%);
      box-shadow: 0rpx 0rpx 40rpx rgba(72, 94, 202, 0.5);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: 218rpx 0 89rpx 0;
      .text1 {
        font-size: 40rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #fefeff;
        letter-spacing: 10rpx;
      }

      .text2 {
        font-size: 32rpx;
        font-family: PingFang SC;
        //   font-weight: bold;
        color: #fefeff;
        letter-spacing: 10rpx;
      }
    }
	
	.call-hui {
		background: linear-gradient(180deg, #cccccc 0%, #bdc3c7 100%);
		box-shadow: 0rpx 0rpx 40rpx rgba(72, 94, 202, 0.5);
	}

    .address {
      display: flex;
      align-items: flex-start;

      .icon-tick {
        width: 29rpx;
        height: 29rpx;
        background-size: 100%;
        background-image: url("@/static/images/umale/icon-tick.png");
        background-repeat: no-repeat;
        margin-right: 18rpx;
        margin-top: 8rpx;
      }
    }

    .page-map {
      width: 100%;
    }
  }
}
</style>
