<script lang="ts" setup>
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import {computed} from "vue";

const props = defineProps<{
  commit: IActivity<IContent>
}>()

const icon = computed(() => {
  switch (props.commit.op_type) {
    case "merge_pull_request":
      return ['fas', 'code-merge']
    case "create_repo":
      return ['fab', 'git-alt']
    case "commit_repo":
    default:
      return ['fas', 'code-commit']
  }
})

const time = computed(() => timeDifference(props.commit.created))

const timeDifference = (dateString: string): string => {
  const targetDate = new Date(dateString);
  const currentDate = new Date();

  const diffInMillis = currentDate.getTime() - targetDate.getTime();

  const minutes = Math.floor(diffInMillis / (1000 * 60));
  const hours = Math.floor(diffInMillis / (1000 * 60 * 60));
  const days = Math.floor(diffInMillis / (1000 * 60 * 60 * 24));
  const months = Math.floor(diffInMillis / (1000 * 60 * 60 * 24 * 30));
  const years = Math.floor(diffInMillis / (1000 * 60 * 60 * 24 * 365));

  if (minutes < 60) {
    return `${minutes} 分钟前`;
  } else if (hours < 24) {
    return `${hours} 小时前`;
  } else if (days < 30) {
    return `${days} 天前`;
  } else if (months < 12) {
    return `${months} 个月前`;
  } else {
    return `${years} 年前`;
  }
}

const handleClick = () => {
  window.open(props.commit.repo.html_url, '_self')
}

</script>

<template>
  <div
      class="container relative flex h-36 w-full overflow-hidden rounded-2xl transition-all hover:cursor-pointer hover:shadow-md"
      @click="handleClick"
  >
    <!-- 提交图标 -->
    <div
        class="before:absolute relative before:top-0 before:right-0 before:bottom-0 flex h-36 before:w-2 w-36 items-center justify-center bg-pink-300 before:bg-pink-300 text-5xl text-white before:blur">
      <font-awesome-icon :icon="icon"/>
    </div>
    <!-- 内容 -->
    <div class="flex-1 overflow-hidden bg-white p-4">
      <div class="mr-12 truncate text-2xl font-bold">
        仓库：{{ commit.repo.name }}
      </div>
      <span class="text-xl">{{ commit.content.HeadCommit.Message }}</span>
      <span class="absolute top-0 right-0 m-4 hidden rounded bg-gray-300 px-2 sm:block">
        {{ commit.content.HeadCommit.Sha1.slice(0, 10) }}
      </span>

      <span class="absolute right-0 bottom-0 m-4 rounded bg-gray-300 px-2">
        <font-awesome-icon :icon="['far', 'clock']" class="mr-1 text-sm"/>
        {{ time }}
      </span>
    </div>
  </div>
</template>

<style scoped>

</style>