<template>
  <teleport to="#app">
    <MyAnimate enter="fadeInRight" leave="fadeOutRight">
      <div v-if="modelValue" class="my-drawer" :style="{ width: width }">
        <img
          src="@/assets/images/close-btn3.png"
          class="close-btn"
          draggable="false"
          @click="closeDrawer"
        />
        <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>
    </MyAnimate>
  </teleport>
</template>

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

export default defineComponent({
  name: 'MyDrawer',
  displayName: 'm-drawer',
  components: { MyAnimate },
  props: {
    /** 值 */
    modelValue: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
    /** 宽度 */
    width: {
      type: String as PropType<string>,
      default: '49vw',
    },
    // /** 点击蒙层是否允许关闭 */
    // maskClosable: {
    //   type: Boolean as PropType<boolean>,
    //   default: true,
    // },
  },
  emits: ['update:modelValue', 'close'],
  setup(_, ctx) {
    const closeDrawer = () => {
      ctx.emit('update:modelValue', false)
      ctx.emit('close')
    }
    return {
      closeDrawer,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../main.styl'
.my-drawer
  background-color $table-title-bg
  position fixed
  top .45rem
  right .05rem
  bottom @right
  z-index 99999
  $blur()
  color #fff
  .close-btn
    position absolute
    top inherit
    bottom inherit
    margin auto
    width .24rem
    left -@width
    cursor pointer
    transition transform .3s ease
    &:hover
      transform scale(1.2)
  .wrap
    position relative
    border .01rem dotted rgba(47,134,238, .6)
    margin .06rem
    padding .06rem
    // width 100%
    height 99%
    .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%)
</style>
