<template>
  <div class="item-wrap" @click="goToPage(`/columnDetail?id=${item.id}`)">
    <div class="item-content">
      <img :src="item.imgUrl" alt="" srcset="" />
      <div class="info">
        <h4>{{ item.name }}</h4>
        <p>{{ item.introduce }}</p>
        <div class="num">{{ item.subCount }}订阅</div>
      </div>
    </div>
    <div
      v-if="item.lastVideo"
      :class="[
        'tip',
        item.lastVideo && item.lastVideo.liveStatus === $liveStatusObj.InLive
          ? 'red'
          : '',
      ]"
    >
      <img
        v-if="item.lastVideo.liveStatus === $liveStatusObj.InLive"
        src="@/assets/images/play-icon.png"
        alt=""
      />
      <span v-if="item.lastVideo.liveStatus === $liveStatusObj.InLive"
        >直播中</span
      ><span v-else class="time">{{ item.lastVideo.startTime }}</span>
      <p>｜{{ item.lastVideo.title }}</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import { useRouter } from "vue-router";
import useGetLiveStatusObj from "@/hooks/useGetLiveStatusObj";
const $liveStatusObj = useGetLiveStatusObj();

defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
const router = useRouter();
const goToPage = (page) => {
  router.push(page);
};
</script>
<style scoped lang="scss">
.item-wrap {
  padding: 24px 0;
  border-bottom: 0.5px solid var(---, #ebeced);
}
.item-content {
  display: flex;
  margin-bottom: 20px;
  img {
    width: 284px;
    height: 160px;
    border-radius: 16px;
    margin-right: 24px;
  }
  .info {
    flex: 1;
    width: 0;
    text-align: left;
    h4 {
      color: #333333;
      text-align: justify;
      font-family: "PingFang SC";
      font-size: 32px;
      font-style: normal;
      font-weight: 500;
      line-height: 48px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 8px;
    }
    p {
      color: #666666;
      text-align: justify;
      font-family: "PingFang SC";
      font-size: 28px;
      font-style: normal;
      font-weight: 400;
      line-height: 44px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 28px;
    }
    .num {
      color: #999999;
      text-align: justify;
      font-family: "PingFang SC";
      font-size: 24px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
    }
  }
}
.tip {
  display: flex;
  color: #666666;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  padding: 8px 12px;
  align-items: center;
  border-radius: 8px;
  background: var(---, #f5f6f7);
  span {
    white-space: nowrap;
  }
  &.red {
    color: #f02e18;
    background: rgba(240, 46, 24, 0.08);
  }
  .time {
    color: #2e78fa;
    text-align: left;
  }
  img {
    width: 28px;
    height: 28px;
    margin-right: 4px;
  }
  p {
    flex: 1;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
