<template>
  <div
    :class="[
      'item-wrap',
      (!item.saleLimit || item.saleLimit - item.subCount <= 0) &&
      item.saleLimit !== null
        ? 'disabled'
        : '',
    ]"
    @click="toDetail(item)"
  >
    <h4><span></span>{{ item.productName }}</h4>
    <p class="intro">
      {{ item.content }}
    </p>
    <div class="item-footer">
      <p v-if="item.pricingStrategy && item.pricingStrategy.paymentType === 1">
        <span>{{
          item.pricingStrategy.feesList && item.pricingStrategy.feesList.length
            ? (item.pricingStrategy.feesList[0].price / 100).toFixed(2)
            : ""
        }}</span
        ><span>元</span>
      </p>
      <p v-else-if="item.pricingStrategy">
        <strong
          v-if="
            item.pricingStrategy.feesList &&
            item.pricingStrategy.feesList.length
          "
          >{{ (item.pricingStrategy.feesList[0].price / 100).toFixed(2) }}元/{{
            unitObj[item.pricingStrategy.feesList[0].period]
          }}</strong
        >
      </p>
      <p v-if="type === 1">{{ item.subCount }}订阅</p>
      <p v-else-if="item.saleLimit !== null">
        仅剩{{
          item.saleLimit
            ? item.saleLimit - item.subCount < 0
              ? 0
              : item.saleLimit - item.subCount
            : 0
        }}份
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";
import { useRoute } from "vue-router";
import { queryCartRead } from "@/api/video";
const props = defineProps({
  type: {
    required: true,
    type: Number,
  },
  item: {
    required: true,
    type: Object,
    default: () => ({}),
  },
  liveProductId: {
    default: "",
  },
  liveCategoryId: {
    default: 3,
  },
  tgId: {
    type: String,
    default: "",
  },
  isShopCar: {
    type: Boolean,
    default: false,
  },
});
const unitObj = ref({
  0: "永久",
  1: "周",
  2: "月",
  3: "季度",
  4: "半年",
  5: "年",
});

const route = useRoute();
const toDetail = async (item) => {
  if (
    item.saleLimit !== null &&
    (!item.saleLimit || item.saleLimit - item.subCount <= 0)
  )
    return;
  if (props.isShopCar) {
    await queryCartRead({
      productId: props.item.productId,
      productType: props.item.productType,
      videoId: route.query.id,
      saleUserId: route.query.saleUserId,
    });
  }
  if (props.liveProductId) {
    location.href = `${location.origin}/tgh5/viewpackageDetail/${
      item.productId
    }?liveProductId=${props.liveProductId}&liveCategoryId=${
      props.liveCategoryId
    }&liveMarketId=${
      route.query.saleUserId ? route.query.saleUserId : ""
    }&liveTgId=${props.tgId}`;
  } else {
    location.href = `${location.origin}/tgh5/viewpackageDetail/${item.productId}`;
  }
};
</script>
<style scoped lang="scss">
.item-wrap {
  background: url(../assets/images/serveBg1.png) no-repeat center;
  background-size: cover;
  padding: 32px 24px;
  border-radius: 16px;
  margin-bottom: 32px;
  text-align: left;
  &.disabled {
    background: url(../assets/images/serveBg2.png) no-repeat center;
    background-size: cover;
    opacity: 0.6;
  }
  h4 {
    color: #333333;
    font-family: "PingFang SC";
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    margin-bottom: 16px;
    span {
      color: #f02e18;
    }
  }
  .intro {
    color: #666666;
    text-align: justify;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px;
    margin-bottom: 40px;
  }
  .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>
