<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}) translateY(${translateY})`"
        >
          <div class="inner">
            <head>
              <p>{{ title }}</p>
              <img
                draggable="false"
                src="@/assets/images/close-btn2.png"
                @click.prevent="closeModal"
              />
            </head>
            <div class="wrap">
              <img class="dot" src="@/assets/images/dot2.png" />
              <img class="dot" src="@/assets/images/dot2.png" />
              <img class="dot" src="@/assets/images/dot2.png" />
              <img class="dot" src="@/assets/images/dot2.png" />
              <div class="content">
                <slot />
              </div>
            </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',
    },
    translateY: {
      type: String as PropType<string>,
      default: '0',
    },
    maskClosable: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
  },
  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 0.06rem
    background transparent
    position relative
    box-sizing border-box
    $blur(0.01rem)
    .inner
      $blur()
      background rgba(29, 42, 65, 0.9)
      padding-bottom .02rem
      box-sizing border-box
      head
        min-height .24rem
        box-sizing border-box
        display flex
        align-items center
        justify-content space-between
        background linear-gradient(to right, rgba(59,85,102,.8), transparent)
        position relative
        border-bottom .01rem solid rgba(105,110,114,.3)
        margin-bottom .05rem
        padding 0 .1rem
        box-sizing border-box
        &:before
          content ''
          display block
          position absolute
          left 0
          width .02rem
          height 60%
          background #FADB71
        >p
          font-size 0.14rem
          font-family $font-zcool
          line-height 1.5
        >img
          width 0.1rem
          height @width
          cursor pointer
          transition transform 0.3s ease-in-out
          &:hover
            transform rotate(180deg)
      .wrap
        position relative
        border .01rem dotted rgba(47,134,238, .6)
        margin .06rem
        padding .06rem
        .dot
          position absolute
          width .1rem
          height @width
          &:nth-of-type(1)
            left 0
            top 0
            transform translate(-50%, -50%)
          &:nth-of-type(2)
            right 0
            top 0
            transform translate(50%, -50%)
          &:nth-of-type(3)
            left 0
            bottom 0
            transform translate(-50%, 50%)
          &:nth-of-type(4)
            right 0
            bottom 0
            transform translate(50%, 50%)
        .content
          // min-height 30vh
          max-height 82vh
          overflow-y auto
          overflow-x hidden
          font-size 0.1rem
          box-sizing border-box
</style>
