<template>
  <view>
    <Navbar title="考勤打卡" :showBack="false" />
    <div class="content">
      <ProSelect v-if="this.userType != '00'" @selectPro="selectPro" />
      <u-row :gutter="20">
        <u-col span="12">
          <div class="top-cont">
            <div class="name">{{ name }}</div>
            <div class="calendar" @click="handleCalendar">
              <u-icon name="calendar" color="#2979ff" size="21"></u-icon>
              <span>{{ isShow ? '考勤统计' : '考勤打卡' }}</span>
            </div>
          </div>
        </u-col>
      </u-row>
      <div v-if="isShow">
        <u-row :gutter="20" justify="center">
          <u-col span="6">
            <div class="col-item">
              <div>上班 {{ attendanceTime }}</div>
              <div class="time" v-if="clockIn">
                <u-icon name="checkmark-circle-fill" color="#2979ff" style="margin-right: 6px"></u-icon>
                {{ clockIn }}
              </div>
              <div class="time" v-else>未打卡</div>
            </div>
          </u-col>
          <u-col span="6">
            <div class="col-item">
              <div>下班 {{ arriveTime }}</div>
              <div class="time" v-if="clockOut">
                <u-icon name="checkmark-circle-fill" color="#2979ff" style="margin-right: 6px"></u-icon>
                {{ clockOut }}
              </div>
              <div class="time" v-else>未打卡</div>
            </div>
          </u-col>
        </u-row>

        <div class="clock-in-item" :class="{ isInLocation: isInLocation }" @click="isConfirm">
          <div v-if="isInLocation">考勤打卡</div>
          <div v-else>不在打卡范围内</div>
          <div class="now-time">{{ nowTime }}</div>
        </div>

        <div class="location">
          <u-icon name="map"></u-icon>
          {{ locationSuccess ? location : '获取位置失败, 请开启系统权限后再尝试' }}
        </div>
      </div>
      <div v-else>
        <ren-calendar ref="ren" :markDays="markDays" @onDayClick="onDayClick"></ren-calendar>

        <div style="margin: 20px 0; display: flex">
          上班打卡：{{ clockIn }}
          <u-text v-if="!clockIn && isInClockTime" type="error" text="未打卡"></u-text>
        </div>
        <div style="display: flex">
          下班打卡：{{ clockOut }}
          <u-text v-if="!clockOut && isInClockTime" type="error" text="未打卡"></u-text>
        </div>
      </div>
    </div>
    <Tabbar />
  </view>
</template>

<script>
import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
import ProSelect from 'pages/component/Proselect'
import { getAttendanceTime, attendancePunch } from '@/api/checkInAdmin'

export default {
  components: {
    RenCalendar,
    ProSelect
  },
  data() {
    return {
      userId: uni.getStorageSync('userInfo').constructionId,
      userType: uni.getStorageSync('userInfo').userType,
      proId: '',
      isShow: true,
      name: uni.getStorageSync('userInfo').nickName,
      // type: uni.getStorageSync('phone-platform') == 'ios' ? 'wgs84' : 'gcj02',
      attendanceTime: '-', // 上班时间
      arriveTime: '-', // 下班时间
      // 上班卡时间戳限制 14:00:00前都是上班卡 获取14:00:00前的时间戳
      clockInTimeLimit: new Date(new Date().toLocaleDateString()).getTime() + 14 * 60 * 60 * 1000,
      // 当前时间的时间戳
      nowTimeLimit: new Date().getTime(),
      clockIn: '', //上班打卡时间
      clockOut: '', //下班打卡时间
      clockInStatus: '',
      nowTime: '', //当前时间
      location: '', //当前位置
      isInLocation: false, //是否在打卡范围内
      lat: '', //纬度
      lon: '', //经度
      // 打卡规定地址范围
      clockInLocation: [],
      clockInDistance: 3000, // 考勤距离
      currentId: '',
      curDate: '', //当前日期
      today: '', //今天日期
      isInClockTime: true, // 是否在打卡时间内
      markDays: [], //标记日期
      // 获取位置成功
      locationSuccess: false
    }
  },
  created() {
    this.getNowTime()
    this.getToday()
    this.updateNowTime()
    this.getLocation()
    console.log('时间戳-上班', this.clockInTimeLimit)
    console.log('时间戳-当前', this.nowTimeLimit)
  },
  methods: {
    // 获取打卡信息
    async getAttendanceInfo() {
      const params = {
        time: this.today,
        userId: this.userId,
        proId: this.proId
      }
      console.log('参数', params)
      const res = await getAttendanceTime(params)
      console.log('getAttendanceTime', res)
      if (res.data) {
        this.clockInLocation = res.data.addressList || '-'
        this.attendanceTime = res.data.upperWorkTime || '-'
        this.arriveTime = res.data.belowWorkTime
        this.clockIn = res.data.goWorkTime || ''
        this.clockOut = res.data.offWorkTime || ''
        setTimeout(() => {
          this.isInClockInLocation()
        }, 200)
      } else {
        this.clockInLocation = []
        this.isInLocation = false
      }
    },
    // 选择工程
    selectPro(pro) {
      console.log('🚀 ~ selectPro ~ 选择工程:', pro)
      this.proId = pro.proId
      setTimeout(() => {
        this.getAttendanceInfo()
      }, 200)
    },
    // 获取当前时间
    getNowTime() {
      const date = new Date()
      const hour = String(date.getHours()).padStart(2, '0')
      const minute = String(date.getMinutes()).padStart(2, '0')
      const second = String(date.getSeconds()).padStart(2, '0')
      this.nowTime = `${hour}:${minute}:${second}`
    },
    // 获取今天日期
    getToday() {
      const date = new Date()
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      this.today = `${year}-${month}-${day}`
    },
    // 更新当前时间
    updateNowTime() {
      setInterval(() => {
        this.getNowTime()
      }, 1000)
    },
    // 获取当前位置
    getLocation() {
      uni.getLocation({
        // type: this.type,
        type: 'wgs84', // type: wgs84 返回 gps 坐标，gcj02
        isHighAccuracy: true,
        altitude: true,
        success: res => {
          this.locationSuccess = true
          console.log('getLocation', res)
          this.lat = res.latitude
          this.lon = res.longitude
          // if (res.address) {
          //   this.location = res.address.province + res.address.city + res.address.district + res.address.street
          // }
          this.handleLocation()
        },
        fail: err => {
          this.locationSuccess = false
          console.log('getLocation', err, this.locationSuccess)
          uni.showToast({
            title: '获取位置失败',
            icon: 'none'
          })
        }
      })
    },
    // 处理位置
    handleLocation() {
      uni.request({
          url: `https://api.map.baidu.com/reverse_geocoding/v3/?ak=PM43nB8eDNTBrXkQwGrTQFcmOni3Z9nO&output=json&coordtype=wgs84ll&location=${this.lat},${this.lon}`,
          method: 'GET',
          success: res => {
            console.log('解析的地址', res)
            this.location = res.data.result.formatted_address
          }
        })
    },
    // 计算 当前位置 是否在clockInLocation[] 中任意一项的打卡范围内 默认范围为 500m
    isInClockInLocation() {
      if (this.clockInLocation.length == 0) return
      this.clockInLocation.forEach(item => {
        let distance = this.getDistance(this.lat, this.lon, item.lat, item.lon)
        console.log('🚀 ~ isInClockInLocation ~ distance:', distance)
        if (this.type == 'gcj02') {
          distance = distance - 700
        } else {
          distance = distance - 1000
        }
        console.log('🚀 ~ isInClockInLocation ~ distance-计算后:', distance)
        if (distance <= this.clockInDistance) {
          if (this.distance < 0) this.distance = 0
          this.isInLocation = true
          this.currentId = item.id
          return
        }
      })
    },
    // 计算两点之间的距离
    getDistance(lat1, lon1, lat2, lon2) {
      const radLat1 = this.deg2rad(lat1)
      const radLat2 = this.deg2rad(lat2)
      const a = radLat1 - radLat2
      const b = this.deg2rad(lon1) - this.deg2rad(lon2)
      let s =
        2 *
        Math.asin(
          Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))
        )
      s = s * 6378.137 // 地球半径（单位：公里）
      s = Math.round(s * 10000) / 10 // 保留一位小数
      return s
    },
    deg2rad(deg) {
      return (deg * Math.PI) / 180
    },
    // 切换考勤打卡和考勤统计
    handleCalendar() {
      console.log('跳转到考勤统计页面')
      this.isShow = !this.isShow
      this.getToday()
      this.getAttendanceInfo()
      if (!this.isShow) {
        setTimeout(() => {
          this.markDays = []
          let today = this.$refs.ren.getToday().date
          this.curDate = today
          this.markDays.push(today)
        }, 300)
      }
    },
    onDayClick(data) {
      console.log('🚀 ~ onDayClick ~ data:', data)
      if (new Date(data.date).getTime() > new Date().getTime()) {
        this.isInClockTime = false
      } else {
        this.isInClockTime = true
      }
      this.curDate = data.date
      this.today = data.date
      this.getAttendanceInfo()
    },
    // 是否确认打下班卡
    parseTime(timeStr) {
      const [hours, minutes, seconds] = timeStr.split(':').map(Number)
      const date = new Date()
      date.setHours(hours, minutes, seconds, 0)
      return date
    },
    isConfirm() {
      if (!this.isInLocation) {
        uni.showToast({
          title: '不在打卡范围内',
          icon: 'none'
        })
        return
      }
      if (this.clockIn) {
        const now = this.parseTime(this.nowTime)
        const clockIn = this.parseTime(this.clockIn)
        const sixtyMinutesLater = new Date(clockIn.getTime() + 60 * 60000) // 考勤时间加上 60 分钟
        if (now < sixtyMinutesLater) {
          uni.showModal({
            title: '提示',
            content: '是否确认打下班卡？',
            showCancel: true,
            cancelText: '取消',
            confirmText: '确认',
            success: res => {
              if (res.confirm) {
                console.log('用户点击确认')
                this.handleClockIn()
              } else {
                console.log('用户点击取消')
              }
            }
          })
        } else {
          this.handleClockIn()
        }
      } else {
        this.handleClockIn()
      }
    },
    // 打卡
    async handleClockIn() {
      try {
        let attendanceType = ''
        if (this.nowTimeLimit < this.clockInTimeLimit && !this.clockIn) {
          attendanceType = '1'
        } else if (this.nowTimeLimit < this.clockInTimeLimit && this.clockIn) {
          attendanceType = '2'
        } else if (this.nowTimeLimit > this.clockInTimeLimit) {
          attendanceType = '2'
        }
        console.log('打卡')
        // 开启loading
        uni.showLoading({
          title: '打卡中...',
          icon: 'loading', // loading icon有哪几种: 1. none 2. success 3. loading
          mask: true // 是否显示透明蒙层，防止触摸穿透
        })
        const params = {
          userId: this.userId,
          proId: this.proId,
          attendanceType,
          time: this.nowTime,
          punchLocation: this.currentId
        }
        console.log('🚀 ~ 打卡参数 ~ params:', params)
        const res = await attendancePunch(params)
        console.log('🚀 ~ handleClockIn ~ res:', res)
        this.getAttendanceInfo()
        uni.hideLoading()
        uni.showToast({
          title: '打卡成功',
          icon: 'success',
          duration: 1500
        })
      } catch (error) {
        console.log('🚀 ~ handleClockIn ~ error:', error)
      }
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.top-cont {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  .name {
    display: flex;
    align-items: center;
    font-size: 19px;
    font-weight: 800;
    color: #333;
  }
  .calendar {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.col-item {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  .time {
    display: flex;
    font-size: 12px;
    color: #999;
  }
}
.clock-in-item {
  margin: 36% auto 30px;
  width: 100px;
  height: 100px;
  padding: 10px;
  background: linear-gradient(135deg, #a4c1fa, #adebe3);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.8;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .now-time {
    font-size: 12px;
  }
  // 不在打卡范围内 背景置灰
  &:not(.isInLocation) {
    background: #909399;
    font-size: 14px;
  }
}
.location {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #333;
}
</style>
