<template>
<m-animate :enter="enter" :leave="leave">
  <div v-if="value" class="monitor-modal">
    <div :style="`width:${width}`">
      <div class="title">
        <p>
          {{title}}
          <span class="left"></span>
          <span class="right"></span>
        </p>
        <div>
          <img class="flag" src="@/assets/images/modal-title1.png"/>
          <img @click="handleClose" class="close-btn" src="@/assets/images/close.png"/>
        </div>
        <img class="left" src="@/assets/images/modal-title-left.png"/>
      </div>
      <div class="content">
        <div>
          <slot/>
        </div>
      </div>
    </div>
  </div>
</m-animate>
</template>

<script>
export default {
  name: 'MonitorModal',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: '40%',
    },
    enter: {
      type: String,
      default: 'fadeInDown',
    },
    leave: {
      type: String,
      default: 'fadeOutUp',
    },
    title: {
      type: String,
      default: 'title',
    },
  },
  methods: {
    handleClose() {
      this.$emit('close')
      this.$emit('input', false)
    }
  },
}
</script>

<style lang="stylus" scoped>
.monitor-modal
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  display flex
  align-items center
  justify-content center
  background rgba(0,0,0,0.1)
  z-index 1000
  >div
    background transparent
    color #ccc
    .title
      height 4rem
      position relative
      font-weight bold
      border 0.1rem solid $color-map()
      display flex
      align-items center
      justify-content space-between
      padding 0 1rem
      background-image repeating-linear-gradient(45deg, $color-map(0.1), $color-map(0.1), 0.1rem, transparent 0.1rem, transparent 0.8rem)
      background-color $color-map(0.1)
      margin-bottom 0.5rem
      $blur()
      p
        color #fff
        border-bottom 0.1rem solid $edgeColor
        font-size 1.2rem
        position relative
        padding 0.2rem 0.5rem
        span
          position absolute
          width .4rem
          height .4rem
          background-color $edgeColor
          bottom - (@height / 2)
          &.left
            left - (@width / 2)
          &.right
            right - (@width / 2)
      >div
        display flex
        align-items center
      img
        &.close-btn
          width 2rem
          cursor pointer
          margin-left 0.5rem
          transition transform 0.5s
          &:hover
            transform rotate(90deg)
        &.flag
          height 2rem
        &.left
          position absolute
          left -0.1rem
          height 80%
    .content
      min-height 30vh
      max-height 60vh
      padding 1rem
      overflow-y auto
      overflow-x hidden
      border 0.1rem solid $edgeColor
      border-top none
      $blur()
</style>
