<template>
  <div class="flex item-content" @click="toDetail">
    <div class="cover">
      <img class="cover-img" :src="item.imgUrl" alt="" />
      <img
        :class="['live-status', `live-status${item.liveStatus}`]"
        v-if="item.playType === 1"
        :src="getStatusIcon(item, 2)"
        alt=""
      />
    </div>
    <div class="info">
      <h4>{{ item.title }}</h4>
      <div class="play-time">
        <label :class="[[5, 6].includes(item.limitType) ? 'red' : 'blue']">{{
          [5, 6].includes(item.limitType) ? "付费" : "免费"
        }}</label>
        <p v-if="item.playType === 1">
          {{ dayjs(item.startTime).format("HH:mm") }}-{{
            dayjs(item.endTime).format("HH:mm")
          }}
        </p>
      </div>
      <div class="flex advisor-info">
        <p class="flex left">
          <img class="avatar" :src="item.advisorBasic?.avatar" alt="" />{{
            item.advisorBasic?.showName
          }}
        </p>
        <p v-if="item.startTime">
          {{
            dayjs(item.playType === 1 ? item.startTime : item.auditTime).format(
              "YYYY-MM-DD"
            )
          }}
        </p>
      </div>
    </div>
  </div>
</template>

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

// const router = useRouter();
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
const getStatusIcon = useGetStatusIcon();
const toDetail = () => {
  window.open(
    `${location.origin}/h5/${
      props.item.type === 1 ? "shotVideoPlay" : "videoPlay"
    }?id=${props.item.id}&source=c`,
    "_blank"
  );
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;
}
.item-content {
  padding: 30px 0;
  border-bottom: 0.5px solid #f0f0f0;
}
.cover {
  position: relative;
  margin-right: 16px;
  .cover-img {
    width: 290px;
    height: 168px;
    border-radius: 16px;
  }
  .live-status {
    position: absolute;
    left: 0;
    top: 0;
    width: 134px;
    height: 34px;
  }
  .live-status1,
  .live-status3 {
    width: 108px;
    height: 34px;
  }
}
.info {
  text-align: left;
  flex: 1;
  width: 0;
  h4 {
    color: #333333;
    font-weight: 500;
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .play-time {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    label {
      border-radius: 8px 0px 8px 0px;
      padding: 6px;
      font-size: 20px;
      margin-right: 8px;
      &.red {
        background: #f631431a;
        color: #f63143;
      }
      &.blue {
        background: #e9f4fd;
        color: #0094ff;
      }
    }
  }
  p {
    color: #999999;
    font-weight: 400;
    font-size: 24px;
    line-height: 20px;
  }
  .advisor-info {
    align-items: center;
    justify-content: space-between;
    .left {
      align-items: center;
    }
  }
  .avatar {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
  }
}
</style>
