<template>
  <!-- #ifdef H5 -->
  <teleport to="body">
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <root-portal externalClass="theme-ie">
      <!-- #endif -->
      <uv-popup ref="popupRef" :mode="mode" :round="round" popup-class="theme-ie"
        :close-on-click-overlay="closeOnClickOverlay" :safeAreaInsetBottom="mode === 'bottom'" @close="handleClose">
        <template v-if="showToolbar">
          <ie-popup-toolbar :title="title" :cancelText="cancelText" :confirmText="confirmText" :showCancel="showCancel"
            :showConfirm="showConfirm" @cancel="handleCancel" @confirm="handleConfirm" />
        </template>
        <view class="popup-content">
          <slot></slot>
        </view>
      </uv-popup>
      <!-- #ifdef MP-WEIXIN -->
    </root-portal>
    <!-- #endif -->
    <!-- #ifdef H5 -->
  </teleport>
  <!-- #endif -->
</template>
<script lang="ts" setup>
type Props = {
  title?: string;
  cancelText?: string;
  confirmText?: string;
  mode?: 'bottom' | 'center' | 'top';
  round?: number;
  closeOnClickOverlay?: boolean;
  showToolbar?: boolean;
  showCancel?: boolean;
  showConfirm?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  title: '',
  cancelText: '取消',
  confirmText: '确认',
  mode: 'bottom',
  round: 16,
  closeOnClickOverlay: true,
  showToolbar: true,
  showCancel: true,
  showConfirm: true
});
const popupRef = ref();
const emit = defineEmits(['cancel', 'confirm', 'close']);
const handleClose = () => {
  emit('close');
}
const handleCancel = () => {
  emit('cancel');
  close();
}
const handleConfirm = () => {
  emit('confirm');
}
const open = () => {
  popupRef.value.open();
}
const close = () => {
  popupRef.value.close();
}
defineExpose({ open, close });
</script>
<style lang="scss" scoped></style>