<template>
  <div
    class="card"
    @click="
      router.push(
        `/videoPlay?id=${item.id}&saleUserId=${route.query.saleUserId || ''}`
      )
    "
  >
    <div class="img">
      <img :src="item.listCoverUrl ? item.listCoverUrl : item.imgUrl" alt="" />
      <span>{{
        item.liveStatus === 4 ? formatHSM(item.duration) : item.startTime
      }}</span>
    </div>
    <img
      class="status"
      v-if="item.playType === 1"
      :src="getStatusIcon(item)"
      alt=""
    />
    <p class="text">{{ item.title }}</p>
    <div class="info">
      <div class="user">
        <p>
          {{ dayjs(item.playType === 1 ? item.startTime : item.auditTime ).format("MM-DD") }}
          {{ dayjs(item.playType === 1 ? item.startTime : item.auditTime).format("HH:mm") }}
        </p>
      </div>
      <span v-if="item.liveStatus === 2"
        >{{ item.subscribeUserCount }}人预约</span
      >
      <span v-else>{{ item.readCount }}次观看</span>
    </div>
    <button
      v-for="(tagItem, tagIndex) in item.tagVOList || []"
      :key="tagIndex"
      class="label"
    >
      {{ tagItem.name }}
    </button>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import { useRouter, useRoute } from "vue-router";
import dayjs from "dayjs";
import useGetStatusIcon from "@/hooks/useGetStatusIcon";
import { formatHSM } from "@/utils/format";
/**
 * 路由实例
 */
const router = useRouter();
const route = useRoute();

defineProps({
  item: {
    type: Object,
    default: () => {},
  },
});

const getStatusIcon = useGetStatusIcon();
</script>
<style scoped lang="scss">
.card {
  position: relative;
  margin-bottom: 24px;
  text-align: left;
  .status {
    position: absolute;
    left: 0;
    top: 0;
    width: 114px;
    height: 40px;
  }
  .img {
    position: relative;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    margin-bottom: 16px;
    img {
      width: 100%;
      height: 448px;
    }
    span {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 48px;
      flex-shrink: 0;
      color: #ffffff;
      font-family: "PingFang SC";
      font-size: 24px;
      font-style: normal;
      font-weight: 500;
      line-height: 48px;
      opacity: 0.8;
      text-align: left;
      padding-left: 16px;
      box-sizing: border-box;
      background: linear-gradient(
        180deg,
        #00000000 0%,
        #00000000 0.01%,
        #000000cc 84.13%
      );
    }
  }
  .text {
    color: #333333;
    text-align: justify;
    font-family: "PingFang SC";
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 44px;
    margin-bottom: 20px;
  }
  .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #666666;
    font-family: "PingFang SC";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    padding-bottom: 20px;
    .user {
      display: flex;
      align-items: center;
      img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
  }
  .label {
    color: #8f5423;
    font-family: "PingFang SC";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    padding: 0px 6px;
    border-radius: 4px;
    background: linear-gradient(325deg, #fce6b2 4.41%, #fff1cf 91.95%);
    text-align: left;
  }
}
</style>
