<template>
  <view>
    <CuNavbar title="打卡记录"></CuNavbar>
    <view class="card-shadow">
      <cu-calendars
        insert
        @monthSwitch="onChange"
        :selected="selected"
        @change="onChangeDay"
        :endDate="timeFormat(new Date())"
      />
    </view>

    <view
      v-if="current?.sign_status"
      class="px-90rpx mt-20rpx card-shadow bg-white rounded-19rpx p-base mx-base"
    >
      <uv-steps current="0" dot direction="column">
        <uv-steps-item title="上班打卡">
          <template #icon>
            <view
              class="w-16rpx h-16rpx rounded-full"
              :style="{ background: current.first_time ? '#3c9cff' : '#999' }"
            ></view>
          </template>
          <template #desc>
            <view class="text-24rpx text-hex-999">{{
              current.first_time
            }}</view>
            <view class="flex" v-if="!current.first_time">
              <uv-tags plain size="mini" text="缺卡" type="error"></uv-tags>
            </view>
          </template>
        </uv-steps-item>
        <uv-steps-item title="下班打卡">
          <template #icon>
            <view
              class="w-16rpx h-16rpx rounded-full"
              :style="{ background: current.last_time ? '#3c9cff' : '#999' }"
            ></view>
          </template>
          <template #desc>
            <view class="text-24rpx text-hex-999">{{ current.last_time }}</view>
            <view class="flex" v-if="!current.last_time">
              <uv-tags plain size="mini" text="缺卡" type="error"></uv-tags>
            </view>
          </template>
        </uv-steps-item>
      </uv-steps>
      <view
        @click="goC"
        class="flex text-24rpx mt-10rpx"
        v-if="current?.sign_status != 1"
      >
        <view class="text-hex-3c9cff">补卡申请></view>
        <view>更新打卡</view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, computed } from 'vue'
import { http } from '@/utils/request'
import CuNavbar from '@/components/cu-navbar/index'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { timeFormat } from '@climblee/uv-ui/libs/function/index'
import CuCalendars from '@/components/cu-calendars/uv-calendars'
const selected = ref([])
const time = ref('')
const date = ref('')
onShow(() => {
  getData()
})

const current = computed(
  () => selected.value.find((e) => e.date == date.value)?.data ?? {}
)

const getData = async () => {
  const res = await http.get('/hr/sign', {
    params: {
      time: time.value,
    },
  })
  if (!current.value)
    current.value = res.find((e) => e.date == timeFormat(new Date()))
  const arr = res.reduce((a, b) => {
    a.push({
      date: b.date,
      badge: b.sign_status == 1 || b.sign_status == 2 || b.sign_status == 3,
      badgeBg:
        b.sign_status == 1
          ? '#3c9cff'
          : b.sign_status == 2 || b.sign_status == 3
          ? '#949494'
          : '',
      data: b,
    })
    return a
  }, [])
  selected.value = arr
}

const onChange = ({ year, month }) => {
  time.value = `${year}-${month}`
  getData()
}

const onChangeDay = (e) => {
  date.value = e.fulldate
}

const goC = () => {
  // /pages/make-card/create
  let type
  if (!current.value.last_time) type = 2
  if (!current.value.first_time) type = 1
  uni.navigateTo({
    url: `/pages/make-card/create?date=${current.value.date}&type=${type}`,
  })
}
</script>
