<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" @click="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">{{data.shopName}}</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">{{data.name}}</text>
          </view>
          <view class="u-m-t-32 u-flex u-col-center" v-if="data.couponInfoList&&data.couponInfoList.length">
            <view class="color-333 font-bold small-title">优惠券</view>
            <text class="color-666 u-m-l-38">{{data.couponInfoList.map(item=>item.title+'*'+item.num).join('、')}}</text>
          </view>
          <view class="u-m-t-32 u-flex u-col-center" v-if="data.amount">
            <view class="color-333 font-bold small-title">金额</view>
            <text class="color-666 u-m-l-38">{{data.amount}}</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 props=defineProps({
  //兑换码信息
  data:{
    type:Object,
    default:()=>({}),
  },
})
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>
