<template>
  <div class="item-wrap" @click="toDetail">
    <img :src="item.coverImgUrl" />
    <div class="product-info">
      <h4>
        {{ item.name }}
      </h4>
      <p class="intro">
        {{ item.content }}
      </p>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue"
import { useRoute } from "vue-router"
import { queryCartRead } from "@/api/video"
import { useStore } from "vuex"
const props = defineProps({
  item: {
    required: true,
    type: Object,
    default: () => ({}),
  },
  liveProductId: {
    // 直播视频id，用于溯源直播带货里面的产品是从那个视频直播里购买的
    default: "",
  },
  liveCategoryId: {
    default: 3,
  },
  tgId: {
    type: String,
    default: "",
  },
  isShopCar: {
    type: Boolean,
    default: false,
  },
  type: {
    // 直播:3 , 短视频: 35 , 课程: 32, 合集: 33
    type: Number,
    default: 3,
  },
})
const route = useRoute()
const store = useStore()
const toDetail = async () => {
  if (props.isShopCar) {
    await queryCartRead({
      productId: props.item.productId ? props.item.productId : props.item.id,
      productType: props.item.productType,
      videoId: route.query.id,
      saleUserId: route.query.saleUserId,
    })
  }
  if (props.item.productType === 21) {
    // let bvideo = `${
    //   props.item.url.indexOf("?") === -1 ? "?" : "&"
    // }bvideo=videoId_${route.query.id},type_${props.type}`;
    // if (route.query.saleUserId) {
    //   bvideo = `${bvideo},saleUserId_${route.query.saleUserId}`;
    // }
    // location.href = `${props.item.url}${bvideo}`;
    location.href = window.config.getCarProductLink({
      token: store.state.userInfo.token,
      refreshToken: store.state.userInfo.refreshToken,
      activityId: props.item.url,
    })
  } else {
    if (props.liveProductId) {
      location.href = `${location.origin}/tgh5/viewpackageDetail/${
        props.item.id
      }?liveProductId=${props.liveProductId}&liveCategoryId=${
        props.liveCategoryId
      }&liveMarketId=${
        route.query.saleUserId ? route.query.saleUserId : ""
      }&liveTgId=${props.tgId}`
    } else {
      location.href = `${location.origin}/tgh5/viewpackageDetail/${props.item.id}`
    }
  }
}
</script>
<style scoped lang="scss">
.item-wrap {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  background: #f8f9fa;
  background-size: 100% 100%;
  padding: 20px;
  border-radius: 8px;
  text-align: left;
  box-sizing: border-box;
  img {
    width: 108px;
    height: 108px;
    margin-right: 20px;
    border-radius: 8px;
  }
  .product-info {
    flex: 1;
    width: 0;
  }
  h4 {
    color: #333333;
    font-family: "PingFang SC";
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px;
    margin-bottom: 8px;
    overflow: hidden;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .intro {
    color: #606877;
    text-align: justify;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
