<template>
  <!-- <p class="kajuan" @click="showOwnDiscount">我的卡券</p> -->
  <div class="list-wrap">
    <div v-for="(item, index) in cartVOList || []" :key="index">
      <ProductItem
        class="mb20"
        v-if="item.productType === 21"
        :item="{
          productId: item.productId,
          name: item.productName,
          content: item.productDesc,
          productType: item.productType,
          url: item.url,
        }"
        :isShopCar="true"
      />
      <ServerItem
        v-else
        :item="item"
        :liveProductId="route.query.id"
        :tgId="tgId"
        :isShopCar="true"
      />
    </div>

    <Empty text="暂无甄选服务～" v-if="!cartVOList || !cartVOList.length" />
  </div>
  <OwnDiscount v-if="ownDiscountShow" ref="ownDiscountRef" />
</template>

<script setup>
import { ref, defineProps, onBeforeUnmount, onMounted } from "vue"
import { useRoute } from "vue-router"
import ServerItem from "@/components/ServerItem.vue"
import Empty from "@/components/Empty.vue"
import { queryCartList } from "@/api/video"
import emitter from "@/utils/emitter"
import ProductItem from "../components/ProductItem.vue"
import OwnDiscount from "../components/OwnDiscount.vue"
import useDisableScroll from "@/hooks/useDisableScroll"
const { addScrollEvent } = useDisableScroll()

defineProps({
  tgId: {
    type: String,
    default: "",
  },
})

onMounted(() => {
  addScrollEvent(".list-wrap")
})

onBeforeUnmount(() => {
  emitter.off("updateCar")
})

const route = useRoute()
const cartVOList = ref([])
const getCartList = async () => {
  let ret = await queryCartList({
    id: route.query.id,
  })
  if (ret.code === 0) {
    cartVOList.value = ret.data
  }
}

getCartList()
emitter.on("updateCar", () => {
  getCartList()
})
const ownDiscountShow = ref(false)
const ownDiscountRef = ref()
// const showOwnDiscount = () => {
//   ownDiscountShow.value = true
//   nextTick(() => {
//     ownDiscountRef.value.showPopup = true
//   })
// }
</script>
<style scoped lang="scss">
.list-wrap {
  height: calc(100% - 98px);
  overflow-y: auto;
  padding: 20px 32px;
  &.list-wrap-h {
    height: calc(100% - 120px);
  }
}
.kajuan {
  padding: 0 32px;
  font-size: 28px;
  background: url(../../../assets/images/discount.png) no-repeat left 32px
    center;
  background-size: 32px auto;
  padding-left: 70px;
  text-align: left;
  line-height: 60px;
}
.mb20 {
  margin-bottom: 20px;
}
</style>
