<template>
  <view>
    <hs-empty v-if="!useModel?.showData?.value" />
    <view class="schedules_content">
      <view class="schedules_item" v-for="(i, index) in useModel?.showData?.value?.shift?.periods"
        :key="`periods_${index}`">
        <view class="schedules_item_header">
          打卡任务-{{ useModel?.showData?.value?.shift?.name }}（{{
            getShowDay(useModel?.showData?.value?.schedule_date) }}）
        </view>
        <view class="card_periods_item">
          <u-steps :current="method?.calculationCurrent(i)" 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?.showData?.value?.schedule_date} ${i?.work_start_time}`)
                    }}前</view>
                    <template v-if="i?.checkin_status?.start?.checked">
                      <view :class="`status status_${i?.checkin_status?.start?.status}`">
                        {{
                          AttendanceRecordsStatusEnum[
                            i?.checkin_status?.start
                              ?.status as keyof typeof AttendanceRecordsStatusEnum
                          ]?.text
                        }}
                      </view>
                    </template>
                    <template v-else>
                      <view v-if="
                        isOverHalfHourPast(
                          `${useModel?.showData?.value?.schedule_date} ${i?.work_start_time}`
                        )
                      " class="status status_missing">
                        缺卡
                      </view>
                    </template>
                  </view>
                  <view class="to_check" @click="method?.toDetaile({ ...i, type: 'CheckIn' })" v-if="
                    !i?.checkin_status?.start?.checked
                    // &&
                    // !isOverHalfHourPast(
                    //   `${useModel?.showData?.value?.schedule_date} ${i?.work_start_time}`
                    // ) &&
                    // isCanCheckIn(
                    //   `${useModel?.showData?.value?.schedule_date} ${useModel?.showData?.value?.shift?.allow_checkin_start}`,
                    //   `${useModel?.showData?.value?.schedule_date} ${useModel?.showData?.value?.shift?.allow_checkin_end}`
                    // )
                  ">
                    前往打卡<uni-icons type="right" size="14" color="#0082FA"></uni-icons>
                  </view>
                  <view :class="`schedules_steps_check schedules_steps_${i?.checkin_status?.start?.status}`"
                    v-if="i?.checkin_status?.start?.time">
                    {{ showTime(i?.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?.showData?.value?.schedule_date} ${i?.work_end_time}`)
                    }}前</view>
                    <template v-if="i?.checkin_status?.end?.checked">
                      <view :class="`status status_${i?.checkin_status?.end?.status}`">
                        {{
                          AttendanceRecordsStatusEnum[
                            i?.checkin_status?.end?.status as keyof typeof AttendanceRecordsStatusEnum
                          ]?.text
                        }}
                      </view>
                    </template>
                    <template v-else>
                      <view v-if="
                        isOverHalfHourPast(
                          `${useModel?.showData?.value?.schedule_date} ${i?.work_end_time}`
                        )
                      " class="status status_missing">
                        缺卡
                      </view>
                    </template>
                  </view>
                  <view class="to_check" @click="method?.toDetaile({ ...i, type: 'CheckOut' })" v-if="
                    !i?.checkin_status?.end?.checked
                    //&&
                    // !isOverHalfHourPast(
                    //   `${useModel?.showData?.value?.schedule_date} ${i?.work_end_time}`
                    // ) &&
                    // isCanCheckIn(
                    //   `${useModel?.showData?.value?.schedule_date} ${useModel?.showData?.value?.shift?.allow_checkin_start}`,
                    //   `${useModel?.showData?.value?.schedule_date} ${useModel?.showData?.value?.shift?.allow_checkin_end}`
                    // )
                  ">
                    前往打卡<uni-icons type="right" size="14" color="#0082FA"></uni-icons>
                  </view>
                  <view :class="`schedules_steps_check schedules_steps_${i?.checkin_status?.end?.status}`"
                    v-if="i?.checkin_status?.end?.time">
                    {{ showTime(i?.checkin_status?.end?.time) }}已打卡
                  </view>
                </view>
              </template>
            </u-steps-item>
          </u-steps>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup lang="ts">
import {
  getShowDay,
  isOverHalfHourPast,
  showTime
} from '@/common/libraries/day'
import useModel from './model'

import { AttendanceRecordsStatusEnum } from '@/gen/Enums'
import { onShow } from '@dcloudio/uni-app'
import method from './method'
onShow(() => {
  method?.getList()
})
</script>

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