<template>
  <wd-overlay :show="show" @click="cancel">
    <view class="wrapper">
      <view class="block" @click.stop>
        <view v-if="titleText" class="title">{{ titleText }}</view>
        <view class="content">{{ content }}</view>
        <view class="footer">
          <wd-button type="text" class="cacnel" @click="cancel">取消</wd-button>
          <wd-button type="text" class="sub" @click="submit">确认</wd-button>
        </view>
      </view>
    </view>
  </wd-overlay>
</template>
<script setup lang="ts">
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  cancel: {
    type: Function,
    default: () => {},
  },
  canContinue: {
    type: Boolean,
    default: false,
  },
  titleText: {
    type: String,
    default: '',
  },
  content: {
    type: String,
    default: '',
  },
});
const emits = defineEmits(['confirm']);
function submit() {
  if (props.canContinue) {
    emits('confirm');
    return;
  }
  props.cancel();
}
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .block {
    width: 594rpx;
    background: #fff;
    border-radius: 30rpx;
    padding-top: 30rpx;
    box-sizing: border-box;
    font-family: 'PingFang SC';
    .title {
      font-size: 34rpx;
      font-style: normal;
      font-weight: 500;
      text-align: center;
      color: #0a1f13;
      margin-bottom: 50rpx;
    }
    .content {
      font-size: 32rpx;
      line-height: normal;
      padding: 0 63rpx;
      box-sizing: border-box;
      color: #0a1f13;
      text-align: center;
      margin-bottom: 50rpx;
    }
    .footer {
      border-top: 1rpx solid #f6f6f6;
      display: flex;
      align-items: center;
      .wd-button {
        height: 108rpx;
        width: 50%;
        font-size: 34rpx;
        font-weight: 500;
      }
      .cacnel {
        border-right: 1rpx solid #f6f6f6;
        color: #0a1f13;
      }
      .sub {
        color: #615dff;
      }
    }
  }
}
</style>
