<template>
  <window-size style="background: #f7f8fa">
    <div style="height: calc(100% - 130px)">
      <van-coupon-list
          :coupons="usableCoupons"
          :disabled-coupons="unusableCoupons"
          :show-exchange-bar="false"
      ></van-coupon-list>
    </div>
    <div class="coupon-rules-wrapper">
      <div class="coupon-rules-title">
        优惠劵使用须知：
      </div>
      <div>
        1、优惠劵仅限微信服务号内支付使用；
      </div>
      <div>
        2、不使用医保统筹的情况下方可使用优惠劵；
      </div>
      <div>
        3、一张优惠券只能使用一次，余额不存不退；
      </div>
      <div>
        4、优惠劵使用后作废，处方退费不退优惠劵；
      </div>
      <div>
        5、使用优惠劵后，发票仅显示实际支付现金金额。
      </div>
    </div>
  </window-size>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {getMyCoupons} from "@/api/coupon";

const usableCoupons = ref([])
const unusableCoupons = ref([])

onMounted(() => {
  getMyCoupons({
    hisOrdNum: 'NONE'
  }).then(res => {
    usableCoupons.value = res.usableCoupons
    unusableCoupons.value = res.unusableCoupons
  })
})
</script>

<style scoped>
:deep(.van-checkbox) {
  display: none;
}
:deep(.van-coupon-list__bottom) {
  display: none;
}

.coupon-rules-wrapper {
  padding: 4px 8px;
  font-size: 12px;
  height: 106px;
  overflow-y: auto;
  margin: 8px;
  background-color: white;
  border-radius: 8px;
  box-shadow: #d0d0d0 0 0 3px 1px;
  color: red;
}
.coupon-rules-title {
  font-weight: bold;
  padding: 2px 0;
}
.coupon-rules-item {
  padding: 2px 0;
}
</style>