<template>
  <uni-popup type='bottom' ref='popupRef' :mask-click='false'>
    <view class='popup-content c-flex-column'>
      <view class='c-flex-row'>
        <text>优惠券</text>
        <text @click.stop='close'>确定</text>
      </view>

      <scroll-view>
        <coupon-item v-for='item in coupons' :item='item' />
      </scroll-view>
    </view>
  </uni-popup>
</template>

<script lang='ts' setup>
import CouponItem from '../components/coupon-item.vue';

const popupRef = ref();
const coupons = [{
  id: 1,
  title: '优惠券',
  desc: '满100减10',
  price: 100,
  threshold: 10,
  priceDesc: '满100减10',
  useTime: '2021-12-31',
  status: 1,
  useStatus: '未使用'
}, {
  id: 1,
  title: '优惠券',
  desc: '满100减10',
  price: 200,
  threshold: 80,
  priceDesc: '满100减10',
  useTime: '2021-01-01',
  status: 1,
  useStatus: '未使用'
}, {
  id: 1,
  title: '优惠券',
  desc: '满100减10',
  price: 300,
  threshold: 60,
  priceDesc: '满100减10',
  useTime: '2023-12-31',
  status: '0',
  useStatus: '未使用'
}, {
  id: 1,
  title: '优惠券',
  desc: '满100减10',
  price: 50,
  threshold: 50,
  priceDesc: '满100减10',
  useTime: '2021-10-31',
  status: 0,
  useStatus: '未使用'
}, {
  id: 1,
  title: '优惠券',
  desc: '满1000减30',
  price: 200,
  threshold: 30,
  priceDesc: '满100减10',
  useTime: '2024-12-31',
  status: 0,
  useStatus: '未使用'
}];

const show = () => {
  popupRef.value.open();
};

const close = () => {
  popupRef.value.close();
};

defineExpose({
  show
});
</script>

<style lang='scss' scoped>
.popup-content {
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 0 0;
  padding: 38rpx 45rpx 0 45rpx;

  view:nth-of-type(1) {
    display: flex;
    margin-bottom: 70rpx;
    position: relative;

    text:nth-of-type(1) {
      font-weight: bold;
      font-size: 30rpx;
      color: #333333;
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
    }

    text:nth-of-type(2) {
      font-weight: bold;
      font-size: 30rpx;
      color: #F32B2B;
      position: absolute;
      right: 0;
    }
  }

  scroll-view {
    max-height: 600rpx;
  }

}
</style>
