<template>
  <Popup
      ref="popupRef"
      :showCloseable="false"
      @close="emit('close')"
  >
    <view class="coupon-box">
      <template v-if="!showEmpty">
        <template v-for="item in couponList">
          <CouponItem
              :coupons="item"
              :type="'get'"
          />
        </template>
      </template>
      <Empty
          :iconSrc="emptyIcon"
          v-else
      >
        暂时没有可领取的优惠券~
      </Empty>
    </view>
  </Popup>
</template>


<script setup>
import { ref, unref } from 'vue';
import { useInterface } from "@/hooks/useInterface";
import Empty from "@/components/Empty/index.vue"
import { getProductCoupon } from "@/api/coupon";
import CouponItem from "@/pages/discountCoupon/components/CouponItem.vue";
import Popup from '@/components/Popup/index.vue';
import emptyIcon from "@/static/icon/empty/优惠券.png";

const props = defineProps(["id"])

const emit = defineEmits(['submitCoupon', 'close'])
const couponList = ref([])
const popupRef = ref(false)
const currentCoupon = ref({})
const visible = ref(false)
const showEmpty = ref(false)

const selectCouponPanel = ref(false)

const handleGetDetail = async (id) => {
  const list = await getProductCoupon(id)
  if (list) {
    couponList.value = list
  }
}

const handleSubmit = () => {
  emit('submitCoupon', {
    couponId: currentCoupon.value.id
  })
}

const {toast} = useInterface()

/**
 * 用户手动输入改变数量
 * @param e
 * @param item
 * @returns {*}
 */
const selectCurrentCoupon = (item) => {
  currentCoupon.value = item
}

const open = () => {
  handleGetDetail(props.id)
  popupRef.value.show()
}

const close = () => {
  popupRef.value.close()
  emit('close')
}


defineExpose({
  open,
  close
})
</script>

<style lang="scss">
.coupon-box {
  padding: 24rpx;
  box-sizing: border-box;
  width: 100%;
}

</style>
