<template>
  <div v-if="modelValue" class="mask" :is-mask-click="false" :animation="false">
    <div class="dialog_box">
      <div class="dialog_main">
        <span class="tip_text">{{ text }}</span>
      </div>
      <div class="dialog_btns">
        <div class="btn cancel_btn" @click="tapCancelBtn">
          <span class="text">取消</span>
        </div>
        <div class="btn confirm_btn" @click="() => emits('confirm')">
          <span class="text">确认</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    modelValue: boolean
    text: string
  }>(),
  { text: '确定要把2个单词从熟词本中删除吗？' },
)
const emits = defineEmits(['update:modelValue', 'confirm', 'cancelBtn'])
const tapCancelBtn = () => {
  emits('update:modelValue', false)
  emits('cancelBtn')
}
</script>

<style lang="scss" scoped>
.mask {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
}
.dialog_box {
  position: relative;
  width: 640px;
  height: 24.08vh;
  background-color: #fffef5;
  border-radius: 3.33vh;
  color: #383835;
  font-size: 2.67vh;

  &::after {
    content: '';
    position: absolute;
    top: -1.13vh;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 3.33vh;
    background-color: #dfdaf2;
    transform: skew(-5deg, 5deg);
    z-index: -1;
  }

  .dialog_main {
    text-align: center;
    line-height: 4vh;

    .tip_text {
      display: inline-block;
      padding-top: 7.5vh;
    }
  }

  .dialog_btns {
    position: absolute;
    bottom: 2.67vh;
    display: flex;
    padding: 0 128px;
    box-sizing: border-box;

    .btn {
      position: relative;
      width: 144px;
      height: 4.33vh;
      border-radius: 2.17vh;
      border: 0.17vh solid #d9d163;
      font-size: 2vh;
      cursor: pointer;

      .text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .cancel_btn {
      background-color: #fffef5;
    }

    .confirm_btn {
      margin-left: 96px;
      background-color: #fff01f;
    }
  }
}
</style>
