<template>
  <view>
    <view class="attendance-control">
      <view class="control-btn" :class="{ disable:!result || checkAbleType != '1' }" @click="clockIn(1)">
        <text class="control-btn-text">上班打卡</text>
      </view>
      <view class="attendance-info">
        <view class="info-start">
          <view class="attendance-status"
            :class="attendanceInfo.checkInTime ? 'attendance-status-good' : 'attendance-status-waiting'"></view>
          <view class="attendance-time">
            <text class="text">上班</text>
            <text class="time">{{ attendanceInfo.checkInTime || '未打卡' }}</text>
            <text class="success" v-if="attendanceInfo.checkInTime"></text>
          </view>
        </view>
        <view class="info-end">
          <view class="attendance-status"
            :class="attendanceInfo.checkOutTime ? 'attendance-status-good' : 'attendance-status-waiting'"></view>
          <view class="attendance-time">
            <text class="text">下班</text>
            <text class="time">{{ attendanceInfo.checkOutTime || '未打卡' }}</text>
            <text v-if="attendanceInfo.checkOutTime" class="success"></text>
          </view>
        </view>
      </view>
      <view class="control-btn" :class="{ disable:!result || checkAbleType != '2' }" @click="clockIn(2)">
        <text class="control-btn-text">下班打卡</text>
      </view>
    </view>
    <view class="control-position">
      <view v-if="result">
        <u-icon name="checkmark-circle-fill" color="#496CF4" size="20"></u-icon>
        已进入考勤范围: {{ result.address || '- -' }}
      </view>
      <view v-else>
        <u-icon name="error-circle-fill" color="#F4496C" size="20"></u-icon>
        当前未进入考勤范围
      </view>
      <view class="position-coordinates">
        当前位置: 经度 {{ position.longitude.toFixed(6) }}, 纬度 {{ position.latitude.toFixed(6) }}
      </view>
    </view>

  </view>
</template>

<script>
import { isInRangeOptimized, wgs84ToGcj02 } from '@/utils/handler'
import { queryClickAble } from '@/api/attendance/attendance'
export default {
  props: {
    attendanceInfo: {
      type: Object,
      default: () => ({
        attendanceDate: '', // 当前日期
        checkInTime: '', //上班打卡时间
        checkOutTime: '', //下班打卡时间
        items: [], // 打开记录 第一条为最早上班打卡时间 最后一条为最晚下班打卡时间
      })
    },
    checkInPosiInfo: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      result: null,
      checkAbleType: null,
      position: {
        latitude: 0,
        longitude: 0,
      }
    }
  },
  watch: {
    attendanceInfo: {
      handler(newValue) {
        this.getCheckAbleType()
      },
      deep: true
    },
    checkInPosiInfo(newValue) {
      if (newValue && newValue.length) {
        this.getCheckAbleType()
        if (window.android && typeof window.android.getLocation === 'function') {
          window.android.getLocation()
        } else {
          uni.startLocationUpdate({
            type: 'wgs84',
          })
        }
      }
    }
  },
  mounted() {
    this.getCheckAbleType()
    // app 在前台时获取位置信息
    uni.onLocationChange((res) => {

      const [latitude, longitude] = wgs84ToGcj02(res.latitude, res.longitude);

      this.result = this.checkInPosiInfo.find(item => {
        return isInRangeOptimized({
          latitude, longitude
        }, item, item.radius || 1000)
      })
    });
    // 暴露回调给原生外壳
    window.locationCallBack = (res) => {
      let resPositionInfo = JSON.parse(res)
      this.getCheckAbleType()
      const [latitude, longitude] = wgs84ToGcj02(resPositionInfo.latitude, resPositionInfo.longitude);
      this.position = {
        latitude: latitude,
        longitude: longitude,
      }
      this.result = this.checkInPosiInfo.find(item => {
        return isInRangeOptimized({
          latitude, longitude
        }, item, item.radius || 1000)
      })
    }
  },
  destroyed() {
    this.removeEvent()
  },
  methods: {
    //获取考勤权限
    getCheckAbleType() {
      queryClickAble().then(res => {
        this.checkAbleType = res.data

      })
    },
    clockIn(type) {
      if (!this.result) return uni.showToast({ title: '当前未进入考勤范围!', icon: 'none' })
      this.$emit('attendanceHandler', type, this.result)
    },
    removeEvent() {
      uni.stopLocationUpdate()
      uni.offLocationChangeError()
      // Bridge
      window.android.stopLocationUpdates()
      window.locationCallBack = null
    }
  },

}
</script>

<style lang="scss" scoped>
.attendance-control {
  height: 96px;
  background: linear-gradient(90deg, #4973E4 0%, #688EE8 100%);
  border-radius: 96px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 8px;
  padding: 6px;
  box-sizing: border-box;

  .attendance-tips {
    width: 5em;
    font-weight: 400;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 21px;
    text-align: left;
    font-style: normal;
    text-indent: .7em;
  }

  .attendance-info {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    flex: 1;

    .info-start,
    .info-end {
      height: 28px;
      display: flex;
      align-items: center;
      column-gap: 8px;
    }

    .attendance-status {
      width: 10px;
      height: 10px;

      &-good {
        background: #39C86A;
        border-radius: 10px 10px 10px 10px;
      }

      &-waiting {
        background: #FDCC00;
        border-radius: 10px 10px 10px 10px;
      }

      &-criticism {}

      &-warning {}
    }

    .attendance-time {
      width: fit-content;
      height: 100%;
      display: flex;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 28px;
      align-items: center;
      column-gap: 6px;
      font-weight: 400;
      font-size: 12px;
      color: #FFFFFF;
      text-align: left;
      font-style: normal;
      text-transform: none;
      padding: 0 10px;
      box-sizing: border-box;

      .success {
        width: 14px;
        height: 14px;
        background-size: cover;
        background-image: url("data:image/svg+xml,%3Csvg t='1755692965788' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3097' width='16' height='16'%3E%3Cpath d='M511.434623 63.564711c-247.428276 0-448.010617 200.582341-448.010617 448.01164 0 247.430322 200.581318 448.01164 448.010617 448.01164 247.432369 0 448.012663-200.581318 448.012663-448.01164C959.447287 264.147052 758.865969 63.564711 511.434623 63.564711zM773.519714 382.576325 447.871959 704.039781 245.771031 507.044128l63.996546-68.093864 138.15964 138.15964 261.086343-261.087367L773.519714 382.576325z' p-id='3098' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E");
      }
    }

  }

  .control-btn {
    width: 80px;
    height: 80px;
    background: linear-gradient(180deg, #FCD46C 0%, #F2A551 99%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 60px 60px 60px 60px;
    padding: 18px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    &-text {
      width: 36px;
      height: 42px;
      font-weight: 400;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 21px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .control-btn.disable {
    opacity: 0.7;
    cursor: not-allowed;
  }
}

.control-position {
  margin: 15px auto;

  &>* {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 24px;
    column-gap: 5px;
  }

  .position-coordinates {
    font-size: 12px;
    color: #666;
    margin-top: 8px;
    padding: 4px 8px;


    display: flex;
    align-items: center;
    column-gap: 4px;
  }
}
</style>