<template>
  <view class="">
    <up-popup
      :show="show"
      bgColor="transparent"
      :safeAreaInsetBottom="false"
       :closeOnClickOverlay="false"
        @close="close"
      mode="center"
    >
      <view class="box">
        <view class="u-flex top justify-between u-p-32">
          <text class="title">确认信息</text>
          <up-icon name="close"></up-icon>
        </view>
        <view class="info">
          <view class="color-333">兑换码包含内容如下:</view>
          <view class="u-m-t-32 u-flex u-col-center">
            <view class="color-333 font-bold small-title">店铺</view>
            <text class="color-666 u-m-l-38">店铺名称</text>
          </view>
          <view class="u-m-t-32 u-flex u-col-center">
            <view class="color-333 font-bold small-title">名称</view>
            <text class="color-666 u-m-l-38">10张券兑换码</text>
          </view>
          <view class="u-m-t-32 u-flex u-col-center">
            <view class="color-333 font-bold small-title">优惠券</view>
            <text class="color-666 u-m-l-38">优惠券名称*2、优惠券名称*1</text>
          </view>
          <view class="u-m-t-32 u-flex u-col-center" style="gap: 54rpx">
            <view class="cancel" @click="close">取消</view>
            <view class="confirm" @click="confirm">确认</view>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref } from "vue";
const show = defineModel({
  type: Boolean,
  default: false,
});
const emits = defineEmits(["cancel", "confirm"]);
function close() {
  show.value = false;
  emits("cancel");
}
function confirm() {
  show.value = false;
  emits("confirm");
}
</script>
<style lang="scss" scoped>
.box {
  width: 586rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  .title {
    color: #000000;
    font-size: 32rpx;
    font-weight: 700;
  }
  .top {
    border-bottom: 2rpx solid #ededed;
  }
  .info {
    padding: 32rpx 40rpx 40rpx 40rpx;
    font-size: 28rpx;
  }
  .small-title {
    min-width: 84rpx;
    text-align: right;
  }
}

.cancel {
  padding: 14rpx 76rpx;
  border-radius: 36rpx;
  border: 2rpx solid #e8ad7b;
  color: #e8ad7b;
  font-size: 32rpx;
  font-weight: 400;
  white-space: nowrap;
  line-height: 48rpx;
}
.confirm {
  padding: 14rpx 76rpx;
  border-radius: 36rpx;
  background-color: #e8ad7b;
  border: 2rpx solid #e8ad7b;
  color: #fff;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 48rpx;
  white-space: nowrap;
}
</style>
