<template>
  <view class="wrap">
    <div class="button_wrap">
      <div v-for="obj in attTimeKeyList" class="btn_item"
        :class="(obj.timeOut || obj.ready) ? 'workbtn_disabled' : obj.class" :disabled="obj.disabled || obj.ready"
        @click="attendanceClickFn(obj.type)">
        <span>{{ obj.title }}</span>
        <span v-if="obj.timeOut && !obj.ready" class="over">请补卡</span>
        <span v-if="obj.ready" class="right">已打卡</span>
      </div>
    </div>
    <uni-list class="list_wrap">
      <uni-list-item v-for="item in attendanceList">
        <template v-slot:header>
          <span>{{ parseTime(item.time, '{y}-{m}-{d} 星期{a}') }}</span>
        </template>
        <!-- 自定义 body -->
        <template v-slot:body>
          <div class="item_body">
            <div class="item" v-for="obj in item.kqTimeList">
              <text class="time">{{ parseTime(obj.kqTime, '{h}:{i}:{s}') }}</text>
              <text class="title">{{ attendanceDict[obj.kqType] }}打卡</text>
            </div>
          </div>
        </template>
      </uni-list-item>
      <uni-list-item v-if="attendanceList.length === 0">
        <template v-slot:body>
          <view class="empty-box">
            <text class="empty-text">暂无打卡记录</text>
          </view>
        </template>
      </uni-list-item>
    </uni-list>

  </view>
</template>

<script>

import { getAttendanceDetailAPI, addAttendanceAPI, getAttendanceListAPI } from '@/api/attendance'
import { checkStartLessEndTime, parseTime, isSameDay, zeroTo24 } from '@/utils/common'
export default {
  data() {
    return {
      attTimeKeyList: [], // 循环按钮配置列表
      attendanceList: [], // 近 7 天考勤列表
      attendanceDict: { // 考勤字典
        1: '上班',
        2: '午班',
        3: '下班'
      }
    }
  },
  created() {
    this.getRuleInfoFn()
  },
  methods: {
    parseTime,
    // 获取考勤规则详情
    async getRuleInfoFn() {
      const list = [{ // 需要考勤列表
        beginKey: 'firBegintime',
        beginValue: '',
        endKey: 'firEndtime',
        endValue: '',
        class: 'go_work',
        title: '上班打卡',
        timeOut: false, // 是否过了打卡时间
        ready: false, // 是否已经打过卡了
        type: 1, // 考勤类型
      },
      {
        beginKey: 'secBegintime',
        beginValue: '',
        endKey: 'secEndtime',
        endValue: '',
        class: 'after_work',
        title: '午班打卡',
        timeOut: false,
        ready: false,
        type: 2,
      },
      {
        beginKey: 'thiBegintime',
        beginValue: '',
        endKey: 'thiEndtime',
        endValue: '',
        class: 'off_work',
        title: '下班打卡',
        timeOut: false,
        ready: false,
        type: 3,
      }]
      // 需要提取打卡的时间
      const { data } = await getAttendanceDetailAPI(this.$store.getters.user.ruleId)
      for (let i = 0; i < list.length; i++) {
        const obj = list[i]
        if (!data[obj.beginKey]) {
          // 如果打卡开始时间是空的（例如：有的人没有午班打卡，则删除数据结构中的一项）
          list.splice(i, 1)
          i--
          continue
        }
        obj['beginValue'] = data[obj.beginKey]
        obj['endValue'] = data[obj.endKey]
        // 判断服务器时间
        obj['timeOut'] = checkStartLessEndTime(zeroTo24(data[obj.endKey]), data.currently)
      }
      this.attTimeKeyList = list

      // 考勤打卡记录
      this.getAttendanceListFn()
    },
    // 考勤打卡
    async attendanceClickFn(type) {
      const { addressComponent, location } = await this.$store.getters.location
      const { lng, lat } = location
      const { province, city, district, street } = addressComponent
      await addAttendanceAPI({
        "kqLocal": [
          lng,
          lat
        ],
        "kqProvinc": province,
        "kqCity": city,
        "kqCounty": district,
        "kqAddress": street,
        "kqPicurl": "https://www.baidu.com",
        "kqType": type
      })
      // 考勤打卡记录
      this.getAttendanceListFn()
    },
    // 获取考勤列表
    async getAttendanceListFn() {
      const { data: { current, data } } = await getAttendanceListAPI()
      const list = []
      // 如果有打卡时间，则从后台获取结构数据
      if (Object.keys(data).length > 0) {
        Object.entries(data).forEach(([key, value]) => {
          const attTime = [] // 打卡时间
          value.forEach(obj => {
            attTime.push({
              kqTime: obj.kqTime,
              kqType: obj.kqType
            })
          })
          list.push({
            time: key,
            kqTimeList: attTime
          })
        })
        this.attendanceList = list

        // 判断有没有今日的打卡记录
        if (isSameDay(this.attendanceList[0].time, current)) {
          // 根据记录决定今日哪个按钮应该关闭
          this.attTimeKeyList.forEach((obj, index) => {
            // 从按钮数组里去已打卡时间数组里取出，打卡时间对象
            const readyObj = this.attendanceList[0].kqTimeList[index]
            if (readyObj) {
              // 如果找到了，证明已经打过卡了
              obj.ready = true
            }
          })
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  background-color: #f0f1f3;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .button_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50rpx;
    padding: 50rpx 0;
    flex: 1;

    .btn_item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0 !important;
      width: 250rpx;
      height: 250rpx;
      border-radius: 50%;
      align-items: center;
      color: white;
      transition: all 0.1s linear;
      position: relative;

      .over {
        font-size: 28rpx;
        color: #d9322c;
        margin-top: 10rpx;
      }

      .right{
        font-size: 28rpx;
        color: #32cdbf;
        margin-top: 10rpx;
      }

      &.workbtn_disabled {
        background-color: #c7c8c8;
        color: rgb(160, 156, 156);
      }

      &.go_work {
        background-color: #32cdbf;
      }

      &.after_work {
        background-color: #e0bd47;
      }

      &.off_work {
        background-color: #5dabed;

      }

      // 打卡按钮动画
      &.go_work,
      &.after_work, &.off_work {

        &::before,
        &::after {
          content: ' ';
          width: 250rpx;
          height: 250rpx;
          border-radius: 50%;
          position: absolute;
          animation: eff68 1.4s linear infinite;
        }

        &::after {
          animation-delay: 0.7s;
        }

        @keyframes eff68 {
          0% {
            box-shadow: 0 0 0 0px #0093E9;
            opacity: 0.2;
          }

          100% {
            box-shadow: 0 0 0 20px #0093E9;
            opacity: 0;
          }
        }

        &:active {
          transform: scale(0.8);
        }
      }
    }
  }

  .list_wrap {
    height: 700rpx;
    overflow-y: scroll;

    ::v-deep .uni-list-item__container {
      display: block !important;
    }

    .item_body {
      display: flex;
      justify-content: space-between;
      padding-top: 24rpx;

      .item {
        display: flex;
        flex-direction: column;

        .time {
          color: #d9572c;
        }

        .title {
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>