<template>
  <div v-show="props.modelValue" class="confirm__wrapper">
    <div class="btn__list">
      <div class="btn" @click="confirmExit">
        <img class="btn__icon" :src="icon_exit" />
        <div class="btn__text">退出</div>
      </div>
      <div class="btn" @click="confirmCancel">
        <img class="btn__icon" :src="icon_cancel" />
        <div class="btn__text">取消</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
// import useSoundEffect from '@/hooks/useSoundEffect';
import { useRouter } from 'vue-router'

const props = defineProps<{
  modelValue: boolean
  confirmCallBack?: () => void
  confirmHandle?: () => void
}>()

const emits = defineEmits(['update:modelValue'])
// const sound = useSoundEffect();
const OSS_URL = import.meta.env.VITE_OSS_URL

const icon_exit = `${OSS_URL}/xuexiaole_clinet/learnWord/icon_exit.png`
const icon_cancel = `${OSS_URL}/xuexiaole_clinet/learnWord/icon_cancel.png`
const router = useRouter()
function confirmExit() {
  /* 如果有传入别的事件函数则执行，如果没有则默认退出到上一页 */
  if (props.confirmHandle) {
    props.confirmHandle()
  } else {
    props.confirmCallBack?.()
    // const pages = getCurrentPages();
    router.back()

    // if (pages.length > 1) {
    //     uni.navigateBack();
    // } else {
    //     if (history) {
    //         history.back();
    //     } else {
    //         uni.redirectTo({
    //             url: '/pages/index/index',
    //         });
    //     }
    // }
  }

  // sound.play('click.wav');
}

function confirmCancel() {
  // sound.play('click.wav');
  emits('update:modelValue', false)
}
</script>
<style lang="scss" scoped>
.confirm__wrapper {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;

  .btn__list {
    width: 520px;
    display: flex;
    justify-content: space-between;

    .btn {
      width: 10vh;
      height: 10vh;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }

      .btn__text {
        color: #fff;
        text-align: center;
        font-size: 3.33vh;
        font-weight: 500;
      }
    }
  }
}
</style>
