<template>
  <div class="dialog">
    <div class="dialog-wrap">
      <div class="dialog-cover" v-if="isShow" @click="closeMyself"></div>
      <transition name="drop">
        <div class="dialog-content"  v-if="isShow">
          <p class="dialog-close" @click="closeMyself">x</p>
          <slot>empty</slot>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
  export default { 
    props: { 
      isShow:{ 
        type:Boolean,
        default: false
      }
    },
    data(){ 
      return { 

      }
    },
    methods: { 
      closeMyself(){ 
        this.$emit('on-close');
      }
    }

  }

</script>

<style scoped lang="scss">
  .drop-enter-active {
    transition: all .5s ease;
  }
  .drop-leave-active {
    transition: all .3s ease;
  }
  .drop-enter {
    transform: translateY(-500px);
  }
  .drop-leave-active {
    transform: translateY(-500px);
  }

  .dialog-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 5;

    .dialog-cover {
      background: #000;
      opacity: .3;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .dialog-content {
      width: 600px;
      position: fixed;
      max-height: 500px;
      overflow: auto;
      background: #fff;
      top: 20%;
      left: 50%;
      margin-left: -400px;
      z-index: 10;
      border: 1px solid #ddd;
      border-radius: 2px;
      box-shadow: 0 4px 4px rgba(0,0,0,0.6);
      padding: 20px;
      line-height: 1.6;
    }
    .dialog-close {
      position: absolute;
      right: 5px;
      top: 5px;
      width: 24px;
      height: 24px;
      text-align: center;
      cursor: pointer;
      font-size: 24px;
      color: #6f6f6f;

      &:hover{ 
        color: #4679b2;
      }
    }
  }
</style>