<template>
  <div>
    <el-calendar v-model="day">
      <template #dateCell="{ date, data }">
        <div>
          <div>{{ data.day.split('-')[2] }}</div>
          <div v-if="dayAttendances(data.day) && dayAttendances(data.day).attendance && device === 'desktop'" class="clock-in">
            <el-tag v-if="dayAttendances(data.day).attendance.sign_in_at" effect="dark" size="mini">{{ $moment(dayAttendances(data.day).attendance.sign_in_at).format('HH:mm:ss') }}</el-tag>
            <el-tag v-if="dayAttendances(data.day).attendance.sign_out_at" effect="dark" type="success" size="mini">{{ $moment(dayAttendances(data.day).attendance.sign_out_at).format('HH:mm:ss') }}</el-tag>

            <el-tag v-if="dayAttendances(data.day).attendance.sign_in_at1" effect="dark" size="mini">{{ $moment(dayAttendances(data.day).attendance.sign_in_at1).format('HH:mm:ss') }}</el-tag>
            <el-tag v-if="dayAttendances(data.day).attendance.sign_out_at1" effect="dark" type="success" size="mini">{{ $moment(dayAttendances(data.day).attendance.sign_out_at1).format('HH:mm:ss') }}</el-tag>
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import { index } from '@/api/attendance'

export default {
  data() {
    return {
      day: new Date(),
      clockLogs: {
        attendances: [],
        is_workday: true,
        on_dutys: [],
        today_attendance: {}
      }
    }
  },
  computed: {
    dayAttendances() {
      return function(day) {
        return this.clockLogs.attendances.find(i => i.date === day)
      }
    },
    device() {
      return this.$store.getters.device
    }
  },
  watch: {
    'day': {
      handler: function(newVal, oldVal) {
        if (new Date(newVal).getFullYear() !== new Date(oldVal).getFullYear() || new Date(newVal).getMonth() !== new Date(oldVal).getMonth()) {
          this.getData()
        }
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    async getData() {
      try {
        this.clockLogs = await index({
          month: this.$moment(this.day).format('YYYY-MM')
        })
      } catch (err) {
        console.error(err)
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-calendar-day {
  height: auto!important;
  min-height: 60px;
}
::v-deep .el-tag--mini + .el-tag--mini {
  margin-top: 4px;
}
.clock-in {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
</style>
