<template>
  <div
    class="video-item"
    :class="{ 'no-bg': noBg }"
    @click="
      router.push(
        `/${type === 1 ? 'shotVideoPlay' : 'videoPlay'}?id=${item.id}`
      )
    "
  >
    <div class="header">
      {{ item.title }}
    </div>
    <div class="body">
      <span class="time">{{ timeStr }}</span>
      <span class="time"
        >{{ type === 1 ? item.watchCount : item.readCount }}次播放</span
      >
    </div>
  </div>
</template>

<script setup>
import { computed, defineProps } from "vue";
import dayjs from "dayjs";
import { useRouter } from "vue-router";

const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
  noBg: {
    type: Boolean,
    default: false,
  },
  type: {
    // 1 短视频 2 直播/录播
    type: Number,
    default: 2,
  },
});

const router = useRouter();
const timeStr = computed(() => {
  const temp = dayjs(props.item.auditTime);
  const inYear = temp.isSame(dayjs(), "year");
  return inYear
    ? dayjs(props.item.auditTime).format("MM-DD HH:mm")
    : dayjs(props.item.auditTime).format("YYYY-MM-DD HH:mm");
});
</script>

<style scoped lang="scss">
.video-item {
  margin-top: 32px;
  padding: 24px 32px;
  width: 100%;
  height: 148px;
  box-sizing: border-box;
  background-image: url("@/assets/images/course/video.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  &.no-bg {
    background-image: none;
    margin: 0 24px;
    padding: 24px 0;
    width: calc(100% - 48px);
  }

  &.no-bg + .no-bg {
    border-top: 1px solid rgba(235, 236, 237, 1);
  }

  .header {
    color: rgba(51, 51, 51, 1);
    font-weight: 500;
    font-size: 32px;
    line-height: 48px;
    text-align: left;
  }

  .body {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .time {
      color: rgba(153, 153, 153, 1);
      font-weight: 400;
      font-size: 24px;
      line-height: 36px;
    }
  }
}
</style>
