<template>
  <van-popup
    v-model:show="showPopup"
    round
    closeable
    position="bottom"
    :style="{ height: '60%' }"
  >
    <h3>我的卡券</h3>
    <div class="popup-main">
      <div v-for="(arr, index) in list" :key="index">
        <div v-if="arr && arr.length">
          <DiscountItem
            class="item"
            v-for="(item, cIndex) in arr"
            :key="cIndex"
            :item="item"
            :type="index"
          />
        </div>
      </div>
      <Empty text="暂无可用优惠券" v-if="noData" />
    </div>
  </van-popup>
</template>

<script setup>
import { ref, defineExpose, watch } from "vue";
import DiscountItem from "./components/DiscountItem.vue";
import { queryMyCoupon } from "@/api/video.js";
import useDisableScroll from "@/hooks/useDisableScroll";
import { onMounted } from "vue";
import { nextTick } from "vue";
import Empty from "@/components/Empty.vue";

const showPopup = ref(false);

const list = ref({});
const noData = ref(true);
const getMyCoupon = async () => {
  let ret = await queryMyCoupon();
  if (ret.code === 0) {
    let time = new Date().getTime();
    for (const key in ret.data) {
      list.value[key] = ret.data[key].filter((item) => {
        return time <= item.etime;
      });
      if (list.value[key].length > 0) noData.value = false;
    }
  }
};

const { addScrollEvent, removeElEvent } = useDisableScroll();

watch(showPopup, (val) => {
  if (val) {
    getMyCoupon();
    nextTick(() => {
      addScrollEvent(".popup-main");
    });
  } else {
    removeElEvent();
  }
});

onMounted(() => {
  console.log("111", document.querySelector(".popup-main"));
});
defineExpose({
  showPopup,
});
</script>
<style scoped lang="scss">
h3 {
  color: rgb(27, 35, 48);
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 100px;
}
.popup-main {
  height: calc(100% - 100px);
  overflow-y: scroll;
  padding: 20px;
  box-sizing: border-box;
  .item {
    margin-bottom: 20px;
    border-radius: 12px;
  }
}
</style>
