<template>
  <div class="item" @click="router.push(`/shotVideoPlay?id=${item.id}`)">
    <img class="cover" :src="item.imgUrl" alt="" srcset="" />
    <img
      class="status"
      v-if="item.playType === 1"
      :src="getStatusIcon(item)"
      alt=""
    />
    <div class="content">
      <h3>
        {{ item.title }}
      </h3>
      <div class="label" v-if="item.tagVOList || item.columnName">
        <i v-if="item.columnName" class="column">{{ item.columnName }}</i>
        <i v-for="(tgItem, index) in item.tagVOList || []" :key="index">{{
          tgItem?.name
        }}</i>
      </div>
      <div class="space"></div>
      <div class="item-footer">
        <div class="user">
          <img :src="item.advisor?.avatar" alt="" srcset="" />
          <p>{{ item.advisor?.showName }}</p>
        </div>
        <span>{{ item.watchCount }}次播放</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { defineProps } from "vue";
import useGetStatusIcon from "@/hooks/useGetStatusIcon";

const router = useRouter();
defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
const getStatusIcon = useGetStatusIcon();
</script>
<style scoped lang="scss">
.item {
  display: flex;
  position: relative;
  padding: 32px 0 24px 0;
  border-bottom: 0.5px solid var(---, #ebeced);

  .cover {
    width: 148px;
    height: 200px;
    margin-right: 24px;
    border-radius: 16px;
  }

  .status {
    position: absolute;
    left: 0;
    top: 32px;
    width: 114px;
    height: 40px;
  }

  .content {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 0;

    h3 {
      color: rgba(51, 51, 51, 1);
      text-align: justify;
      font-size: 32px;
      font-style: normal;
      font-weight: 500;
      line-height: 48px;
      margin-bottom: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .space {
      flex: 1;
    }

    .label {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    i {
      display: block;
      color: #8f5423;
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 36px;
      height: 36px;
      padding: 0px 6px;
      border-radius: 8px;
      background: linear-gradient(325deg, #fce6b2 4.41%, #fff1cf 91.95%);
      margin-right: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 10px;
    }

    .column {
      background: #f5f6f7;
      color: #606877;
    }
  }

  .user {
    display: flex;
    align-items: center;
    color: #666666;
    font-family: "PingFang SC";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 16px;

    img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin-right: 8px;
    }
  }

  .item-footer {
    display: flex;
    justify-content: space-between;
    color: rgba(153, 153, 153, 1);
    text-align: right;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
}
</style>
