<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    modelValue: boolean
    data: anyObj
    name: string
  }>(),
  {
    modelValue: false,
    data: () => ({}),
    name: 'level_up',
  },
)
const emits = defineEmits(['update:modelValue', 'ok'])

const nameToFrame: anyObj = {
  level_up: 37,
  medal_baicirumen: 51,
  medal_qiancidaren: 51,
  medal_pinxienengshou: 51,
  medal_pinxiezhixing: 51,
  medal_baijurumen: 51,
  medal_qianjurumen: 51,
  medal_yuedunengshou: 51,
  medal_yueduzhixing: 51,
}
const isShow = computed({
  get() {
    return props.modelValue
  },
  set(newVal) {
    emits('update:modelValue', newVal)
  },
})

const XAeRef = ref()
const showContent = ref(false)

function onClick() {
  emits('ok', props.data)
  isShow.value = false
}

watch(isShow, async newVal => {
  showContent.value = false
  await nextTick()
  if (!newVal) return
  XAeRef.value.play()
  // 延迟展示
  setTimeout(() => {
    showContent.value = true
  }, 300)
})
</script>

<template>
  <div v-if="isShow" class="x-overlay">
    <div class="x-status-dia">
      <XAe ref="XAeRef" :name="name" :frames="nameToFrame[name]" :autoPlay="false" />
      <div
        :class="{
          content: true,
          showContent,
        }"
      >
        <div class="text">
          <LineFont :text="data.popInfo" reverse size="70" offset="6" />
        </div>
        <Btn width="386" height="108" size="48" @click="onClick">确认</Btn>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.x-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2001;

  display: flex;
  align-items: center;
  .x-status-dia {
    width: 1920px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .content {
      position: absolute;
      top: 41.67vh;
      left: 737px;
      width: min-content;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.3s ease 1s;

      .text {
        text-align: center;
        width: 100%;
        height: 8.75vh;
        margin-bottom: 12.5vh;
      }

      &.showContent {
        opacity: 1;
      }
    }
  }
}
</style>
