<template>
  <div class="item-wrap" @click="toDetail">
    <slot />
    <h4>
      {{ item.name }}
    </h4>
    <p class="intro">
      {{ item.content }}
    </p>
  </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">
@media screen and (min-width: 480px) {
  .item-wrap {
    height: 230px !important;
  }
}
.item-wrap {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: url(@/assets/images/chat/product-bg.png) no-repeat center;
  background-size: 100% 100%;
  padding: 24px;
  border-radius: 8px;
  text-align: left;
  height: 180px;
  box-sizing: border-box;
  &.disabled {
    background: url(@/assets/images/chat/product-bg1.png) no-repeat center;
    background-size: 100% 100%;
    opacity: 0.6;
  }
  h4 {
    color: #333333;
    font-family: "PingFang SC";
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    margin-bottom: 8px;
    overflow: hidden;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    span {
      color: #f02e18;
    }
  }
  .intro {
    color: #666666;
    text-align: justify;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .item-footer {
    display: flex;
    justify-content: space-between;
    color: #999999;
    align-items: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    span {
      color: #f02e18;
      font-size: 32px;
      font-style: normal;
      font-weight: 500;
      text-transform: uppercase;
      margin-left: 4px;
    }
    strong {
      color: #f02e18;
      font-size: 32px;
      font-style: normal;
      font-weight: 500;
    }
    i {
      color: #999999;
      font-size: 24px;
      font-style: normal;
      font-weight: 400;
      text-decoration: line-through;
    }
  }
}
</style>
