<template>
  <van-popup
    v-model:show="showPopup"
    round
    closeable
    position="bottom"
    :style="{ height: '60%' }"
  >
    <div class="header">
      <span @click="showOwnDiscount">我的卡券</span>
      <h3>甄选服务</h3>
    </div>

    <!-- <div class="count-down">
      <div class="flex">
        <img
          class="discount-icon"
          src="@/assets/images/discount-icon.png"
          alt=""
        />
        <h3>优惠倒计时</h3>
      </div>
      <div class="time flex">
        <strong>00</strong>
        <span>:</span>
        <strong>14</strong>
        <span>:</span>
        <strong>58</strong>
      </div>
    </div> -->
    <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 ref="ownDiscountRef" />
  </van-popup>
</template>

<script setup>
import {
  ref,
  defineExpose,
  watch,
  defineProps,
  onBeforeUnmount,
  onMounted,
  nextTick,
} 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 "./ProductItem.vue";
import OwnDiscount from "./OwnDiscount.vue";
import useDisableScroll from "@/hooks/useDisableScroll";
const { addScrollEvent } = useDisableScroll();

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

onMounted(() => {});
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;
    nextTick(() => {
      addScrollEvent(".list-wrap");
    });
  }
};

const showPopup = ref(false);

watch(showPopup, (val) => {
  if (val) {
    getCartList();
  }
});

const ownDiscountRef = ref();
const showOwnDiscount = () => {
  ownDiscountRef.value.showPopup = true;
};

defineExpose({
  showPopup,
});

emitter.on("updateCar", () => {
  if (showPopup.value) getCartList();
});
</script>
<style scoped lang="scss">
.popup-main {
  height: calc(100% - 100px);
  overflow-y: scroll;
}
.header {
  position: relative;
  span {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    background: url(../../../assets/images/discount.png) no-repeat left center;
    background-size: 32px auto;
    padding-left: 40px;
  }
}
h3 {
  color: rgb(27, 35, 48);
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 100px;
}
.count-down {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: url(../../../assets/images/count-down-bg.png) no-repeat center;
  background-size: cover;
  width: 686px;
  height: 88px;
  margin: 0 auto;
  .flex {
    display: flex;
    align-items: center;
  }
  .discount-icon {
    width: 56px;
    height: 88px;
    margin: 0 12px 0 24px;
  }
  h3 {
    color: rgb(255, 255, 255);
    font-size: 36px;
    font-style: oblique;
    font-weight: bold;
    line-height: 88px;
  }
  .time {
    margin-right: 30px;
    strong {
      display: flex;
      width: 40px;
      height: 40px;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
      background: #fff;
      color: rgb(240, 46, 24);
      text-align: right;
      font-size: 28px;
      font-weight: 500;
    }
    span {
      color: #fff;
      margin: 0 10px;
      font-size: 36px;
    }
  }
}
::v-deep .van-list {
  padding: 0 32px;
}
.list-wrap {
  height: calc(100% - 140px);
  overflow-y: scroll;
  padding: 0 32px;
  &.list-wrap-h {
    height: calc(100% - 120px);
  }
}
.mb20 {
  margin-bottom: 20px;
}
</style>
