<template>
  <teleport to="body">
    <MyAnimate :enter="enter" :leave="leave">
      <div
        v-if="modelValue"
        class="my-modal-mask"
        style="animation-duration: 300ms"
        @click.prevent.self="
          () => {
            maskClosable ? closeModal() : null
          }
        "
      >
        <div
          class="my-modal"
          :style="`width:${width};transform: translateX(${offset})`"
        >
          <span class="edge left-top" />
          <span class="edge right-top" />
          <span class="edge left-bottom" />
          <span class="edge right-bottom" />
          <div class="inner">
            <head>
              <img draggable="false" src="@/assets/images/modal-head-tri.png" />
              <p>{{ title }}</p>
              <img
                draggable="false"
                src="@/assets/images/close-btn2.png"
                @click.prevent="closeModal"
              />
            </head>
            <div class="content">
              <slot />
            </div>
          </div>
        </div>
      </div>
    </MyAnimate>
  </teleport>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import MyAnimate from '../MyAnimate/my-animate.vue'

export default defineComponent({
  name: 'MyModal',
  displayName: 'm-modal',
  components: { MyAnimate },
  props: {
    modelValue: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
    enter: {
      type: String as PropType<string>,
      default: 'fadeInDown',
    },
    leave: {
      type: String as PropType<string>,
      default: 'fadeOutUp',
    },
    title: {
      type: String as PropType<string>,
      default: '',
    },
    width: {
      type: String as PropType<string>,
      default: '32%',
    },
    offset: {
      type: String as PropType<string>,
      default: '0',
    },
    maskClosable: {
      type: Boolean as PropType<boolean>,
      default: true,
    },
  },
  emits: ['update:modelValue', 'close'],
  setup(_, context) {
    const closeModal = () => {
      context.emit('update:modelValue', false)
      context.emit('close')
    }
    return {
      closeModal,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../main.styl'
.my-modal-mask
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  background rgba(0,0,0,0.1)
  z-index 9999
  $center()
  .my-modal
    color #fff
    z-index 99999
    padding .04rem
    background transparent
    position relative
    $blur(0.01rem)
    .edge
      display block
      position absolute
      width .1rem
      height @width
      border .01rem solid $secondary-color
      &.left-top
        top 0
        left 0
        border-right none
        border-bottom none
      &.right-top
        top 0
        right 0
        border-left none
        border-bottom none
      &.left-bottom
        bottom 0
        left 0
        border-right none
        border-top none
      &.right-bottom
        bottom 0
        right 0
        border-left none
        border-top none
    .inner
      $blur()
      background rgba(6,34,67,.8)
      border .01rem solid rgba(91,213,255,.3)
      head
        height .28rem
        background url('@/assets/images/modal-head-bg.png') 100% / 100% 100% no-repeat
        display flex
        align-items center
        position relative
        >p
          font-size .14rem
          font-family $font-zcool
          text-indent .14rem
          line-height 1.5
        >img
          width .14rem
          height @width
          position absolute
          &:nth-of-type(1)
            width .24rem
            height @width
            left -0.095rem
          &:nth-of-type(2)
            right .05rem
            cursor pointer
            transition transform .3s ease-in-out
            &:hover
              transform rotate(180deg)
      .content
        min-height 30vh
        max-height 80vh
        padding .1rem
        overflow-y auto
        overflow-x hidden
        font-size .1rem
</style>
