<script setup lang="ts">
const props = defineProps<{
  modelValue: boolean
  title?: string
  open?: (...arg: any) => void
  close?: (...arg: any) => void
}>()
const emit = defineEmits(['update:modelValue'])
const OSS_URL = import.meta.env.VITE_OSS_URL

watch(
  () => props.modelValue,
  show => {
    if (show) {
      props.open?.()
    } else {
      props.close?.()
    }
  },
  { immediate: true },
)
</script>
<template>
  <div v-show="modelValue" class="xl-dia" @click="emit('update:modelValue', false)">
    <div class="xl-dia-box" @click.stop="false">
      <div class="title" :style="{ 'background-image': `url(${OSS_URL}/urm/dia-title-bg.png)` }">
        <slot v-if="$slots.title" name="title"></slot>
        <template v-else>
          <Icon class="icon" name="dia_logo" size="104" />
          {{ title }}
        </template>
      </div>
      <Icon
        class="close-btn pointer"
        name="close_dia"
        size="48"
        @click="emit('update:modelValue', false)"
      />
      <div class="xl-dia-main">
        <div class="xl-dia-main_bg">
          <img :src="`${OSS_URL}/urm/xl_dia_bg.svg`" />
        </div>
        <!-- <div class="xl-dia-main_slot"> -->
        <slot></slot>
        <!-- </div> -->
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.xl-dia {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100vw;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  &-box {
    position: relative;
    width: 1322px;
    height: 60.83vh;
    z-index: 1;
  }
  .close-btn {
    width: 48px;
    height: 4vh;
    position: absolute;
    top: -7.5vh;
    right: 0;
    cursor: pointer;
  }
  .title {
    width: 720px;
    height: 40vh;
    flex-shrink: 0;
    border-radius: 3.33vh;
    background-color: #373737;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 100%;
    position: absolute;
    top: -7.5vh;
    left: 0;
    z-index: 0;
    text-align: center;
    color: #fff;
    text-align: center;
    font-family: $font-special;
    font-size: 4vh;
    font-style: normal;
    font-weight: 400;
    line-height: 6vh; /* 150% */
    letter-spacing: 20px;
    line-height: 7.5vh;
    .icon {
      width: 104px;
      height: 8.67vh;
      position: absolute;
      top: -1.33vh;
      left: -16px;
    }
  }
  &-main {
    border-radius: 3.33vh;
    background: linear-gradient(162deg, #fdfdf9 12.23%, #dfebf7 90.14%);
    // background-repeat: no-repeat;
    // background-size: 100%;
    // background-position: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    &_bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }
    &_slot {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
