<template>
    <view class="">
      <up-popup
        :show="show"
        bgColor="transparent"
        :safeAreaInsetBottom="false"
        :closeOnClickOverlay="false"
        @close="close"
        mode="center"
      >
        <view class="box">
         <view class="title">{{ title }}</view>
         <view class="u-flex justify-center" style="margin-top: 72rpx;">
            <view class="confirm" @click="confirm">确认</view>
         </view>
        </view>
      </up-popup>
    </view>
  </template>
  
  <script setup>
  import { ref } from "vue";
  const show = defineModel({
    type: Boolean,
    default: false,
  });
  const props=defineProps({
    title: {
      type: String,
      default: "",
    },
  });
  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;
    padding: 64rpx 32rpx 32rpx 32rpx;
    .title {
      color: #000000;
      font-size: 32rpx;
      font-weight: 700;
      text-align: center;
    }
    
  }
  
  .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>
  