<template>
  <view>
    <view v-if="useModel?.loading?.value" class="sign_clock_in_page">
      <view class="sign_clock_in_page_title"> 打卡地点 （{{ getShowDay(useModel?.formData?.value?.date) }}）</view>
      <view :class="`sign_clock_in_page_map ${useModel?.distanceNumber?.value > useModel?.attendanceConfigData?.value?.check_in_range
        ? 'sign_clock_in_page_map_opacity'
        : ''
        }`">
        <image
          src="https://gc-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KADY6KD59DQYMF6PBFSZN98X.png"
          mode="widthFix" />
        <view class="sign_clock_in_page_map_content">
          <view>
            <view class="label">
              你{{
                useModel?.distanceNumber?.value >
                  useModel?.attendanceConfigData?.value?.check_in_range
                  ? '不在'
                  : '已在'
              }}打卡范围内
            </view>
            <view class="address_name">
              <uni-icons :color="useModel?.distanceNumber?.value >
                useModel?.attendanceConfigData?.value?.check_in_range
                ? '#767676'
                : '#0082FA'
                " type="location-filled" size="16"></uni-icons>
              <text>{{ useModel?.showData?.value?.project?.name || '-' }}</text>
            </view>
          </view>
          <view class="update_location" v-if="
            useModel?.distanceNumber?.value >
            useModel?.attendanceConfigData?.value?.check_in_range
          " @click="method?.handleUpdateLocation">
            <view class="update_location_btn"> 更新位置 </view>
          </view>
        </view>
      </view>
      <view class="steps_item">
        <u-steps :current="useModel?.current?.value" direction="column" activeColor="#52C41A" inactiveColor="#CBCBCB">
          <u-steps-item>
            <template v-slot:desc>
              <view class="schedules_steps">
                <view class="schedules_steps_day_info">
                  <view>
                    上班卡：{{
                      showTime(
                        `${useModel?.formData?.value?.date} ${useModel?.showData?.value?.period?.work_start_time}`
                      )
                    }}前
                  </view>
                  <view class="status status_normal" v-if="useModel?.showData?.value?.checkin_status?.start?.checked">{{
                    AttendanceRecordsStatusEnum[
                      useModel?.showData?.value?.checkin_status?.start
                        ?.status as keyof typeof AttendanceRecordsStatusEnum
                    ]?.text
                  }}
                  </view>
                  <template v-else>
                    <view v-if="
                      isOverHalfHourPast(
                        `${useModel?.formData?.value?.date} ${useModel?.showData?.value?.period?.work_start_time}`
                      )
                    " class="status status_missing">
                      缺卡
                    </view>
                  </template>
                </view>
                <view :class="`schedules_steps_check schedules_steps_${useModel?.showData?.value?.checkin_status?.start?.status
                  }`" v-if="useModel?.showData?.value?.checkin_status?.start?.checked">
                  打卡时间：{{ showTime(useModel?.showData?.value?.checkin_status?.start?.time) }}
                </view>
              </view>
            </template>
          </u-steps-item>
          <u-steps-item>
            <template v-slot:desc>
              <view class="schedules_steps">
                <view class="schedules_steps_day_info">
                  <view>下班卡：
                    {{
                      showTime(
                        `${useModel?.formData?.value?.date} ${useModel?.showData?.value?.period?.work_end_time}`
                      )
                    }}前</view>
                  <view v-if="useModel?.showData?.value?.checkin_status?.end?.checked" class="status status_normal">{{
                    AttendanceRecordsStatusEnum[
                      useModel?.showData?.value?.checkin_status?.end
                        ?.status as keyof typeof AttendanceRecordsStatusEnum
                    ]?.text
                  }}
                  </view>
                  <template v-else>
                    <view v-if="
                      isOverHalfHourPast(
                        `${useModel?.formData?.value?.date} ${useModel?.showData?.value?.period?.work_end_time}`
                      )
                    " class="status status_missing">
                      缺卡
                    </view>
                  </template>
                </view>
                <view :class="`schedules_steps_check schedules_steps_${useModel?.showData?.value?.checkin_status?.end?.status
                  }`" v-if="useModel?.showData?.value?.checkin_status?.end?.checked">
                  打卡时间：{{ showTime(useModel?.showData?.value?.checkin_status?.end?.time) }}
                </view>
              </view>
            </template>
          </u-steps-item>
        </u-steps>
      </view>
      <view v-if="useModel?.attendanceConfigData?.value?.require_photo" class="watermark_info">
        <view v-if="useModel?.formData?.value?.photo?.length">
          <view v-for="(i, index) in useModel?.formData?.value?.photo" :key="`img_${index}`" class="upload_item_img">
            <image :src="i?.url" mode="aspectFill" @click="method?.onPreviewMedia(i?.url)" />
            <view class="upload_item_delete" @click="method?.handleDelete()">
              <uni-icons type="clear" color="#f00" size="25"></uni-icons>
            </view>
          </view>
        </view>
        <view v-else class="update_photo">
          <hs-button label="点击拍照" @click="method?.toUpload()" type="ghost" size="large" />
        </view>

        <!-- <hs-upload-watermark
          borderTop
          required
          title="拍照"
          :sourceType="['camera']"
          :data="{
            projectName: useModel?.showData?.value?.project?.name
          }"
          v-model:valueModel="useModel.formData.value.photo"
        /> -->
        <!-- <canvas
          canvas-id="firstCanvas"
          id="firstCanvas"
          style="width: 430px; height: 932px"
        ></canvas> -->
      </view>

      <view class="TakePhotoCheckIn">
        <template v-if="
          useModel?.distanceNumber?.value <=
          useModel?.attendanceConfigData?.value?.check_in_range &&
          isWithinTimeRange(
            `${useModel?.formData?.value?.date} ${useModel?.formData?.value?.checkin_type === 'CheckOut'
              ? useModel?.showData?.value?.period?.work_end_time
              : useModel?.showData?.value?.period?.work_start_time
            }`
          ) &&
          method?.YesNoCheckinStatus()
        ">
          <view>
            <view class="btn" @click="method?.handleCheckin()">
              <view>
                <view class="btn_label">
                  <!-- {{ useModel?.attendanceConfigData?.value?.require_photo ? '拍照' : '' }} -->
                  打卡2
                </view>
                <view>
                  {{
                    showTime(
                      `${useModel?.formData?.value?.date} ${useModel?.formData?.value?.checkin_type === 'CheckOut'
                        ? useModel?.showData?.value?.period?.work_end_time
                        : useModel?.showData?.value?.period?.work_start_time
                      }`
                    )
                  }}
                </view>
              </view>
            </view>
            <view v-if="useModel?.attendanceConfigData?.value?.require_photo" class="no_distance_des">
              请先上传打卡照，再点击打卡按钮
            </view>
          </view>
        </template>
        <template v-else>
          <view>
            <view class="btn no_distance">
              <view>
                <view class="btn_label"> 打卡1</view>
                <view>
                  {{
                    showTime(
                      `${useModel?.formData?.value?.date} ${useModel?.formData?.value?.checkin_type === 'CheckOut'
                        ? useModel?.showData?.value?.period?.work_end_time
                        : useModel?.showData?.value?.period?.work_start_time
                      }`
                    )
                  }}
                </view>
              </view>
            </view>
            <view class="no_distance_des" v-if="
              useModel?.distanceNumber?.value >
              useModel?.attendanceConfigData?.value?.check_in_range
            ">
              <view> 当前不在打卡范围内 </view>
              <view>前往{{ useModel?.showData?.value?.project?.name || '-' }}即可完成打卡签到。</view>
            </view>
          </view>
        </template>
      </view>
    </view>
    <view v-else class="loading">
      <u-loading-icon text="努力加载中" size="36" :vertical="true" />
    </view>
  </view>
</template>
<script setup lang="ts">
import { getShowDay, isOverHalfHourPast, isWithinTimeRange, showTime } from '@/common/libraries/day'
import { AttendanceRecordsStatusEnum } from '@/gen/Enums'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import method from './method'
import useModel from './model'
onLoad((e: any) => {
  console.log(e, 'e')
  useModel.formData.value = e
  method?.getLocation(e)
  method?.getAttendanceConfig()
})
// onShow(() => {
//   if (useModel?.loading?.value) {
//     method?.getLocation(useModel?.formData?.value)
//     method?.getAttendanceConfig()
//   }
// })
onShow(() => {
  method?.init()
})
onUnload(() => {
  useModel.mapNumber.value = 0
  useModel.loading.value = false
})
</script>

<style lang="scss">
@import './style.scss';
</style>
