<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};height:${height};transform: translate(${offsetX},${offsetY})`"
        >
          <head>
            <span class="dot" />
            <p>
              {{ title }}
            </p>
            <img
              src="/src/assets/images/close-btn4.png"
              draggable="false"
              class="close-btn"
              @click.prevent="closeModal"
            />
          </head>
          <div class="content" :style="`background: ${bgColor}`">
            <slot />
          </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%',
    },
    /** 高度 */
    height: {
      type: String as PropType<string>,
      default: 'auto',
    },
    /** 偏移 */
    offsetX: {
      type: String as PropType<string>,
      default: '0',
    },
    /** 偏移 */
    offsetY: {
      type: String as PropType<string>,
      default: '0',
    },
    /** 背景色 */
    bgColor: {
      type: String as PropType<string>,
      default: 'initial',
    },
    /** 点击蒙层是否允许关闭 */
    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
    $blur()
    z-index 99999
    head
      height .3rem
      display flex
      align-items center
      justify-content space-between
      padding 0 .1rem
      background linear-gradient(to right, rgba(59,85,102,.8) 70%, rgba(0,0,0,0.2))
      position relative
      border-bottom .01rem solid #717F8C
      >p
        font-size .12rem
        font-weight bold
      .dot
        display inline-block
        width .02rem
        height .2rem
        background #fadb71
        position absolute
        top 0
        bottom 0
        left 0
        margin auto
      >.close-btn
        width .1rem
        height @width
        cursor pointer
        margin-left .05rem
        transition transform .2s ease-in-out
        &:hover
          transform rotate(90deg)
    .content
      height calc(100% - .3rem)
      box-sizing border-box
      padding .1rem
      overflow-y auto
      overflow-x hidden
      font-size .1rem
</style>
