<template lang="html">
  <div id="{{id}}" data-cpt-type="cpt-popup" class="cpt-popup">

    <div class="close-icon" @click="closePopoup"></div>
    <div class="popup-content" :style="contentSize">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="sass">
   @import "../../styles/core/base.scss";

  .cpt-popup{
    background-color:rgba(0,0,0,0.7);
    position:fixed;
    width:100%;
    left:0;
    top:0;
    bottom:0;

    .close-icon{
      width:40px;
      height:40px;

      transform:rotate(45deg);

      position:absolute;
      top:20px;
      right:20px;
      cursor:pointer;

      &:before{
        content:'';
        background-color:#9E9E9E;
        width:35px;
        height:4px;
        border-radius:2px;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        transform-origin:center;
      }
      &:after{
        content:'';
        background-color:#9E9E9E;
        width:4px;
        height:35px;
        border-radius:2px;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        transform-origin:center;
      }
    }
    .close-icon:hover{
      &:before,&:after{
        background-color:#fff;
      }
    }


    .popup-content{
      background-color:#f4f4f4;
      border-radius:5px;
      padding:40px;

      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
    }
  }
</style>

<script>

export default {
  props:{
    id:String,
    width:{
      default:700,
    },
    height:{
      default:500,
    },
  },
  data: function () {
    return {
    }
  },
  computed: {
    contentSize(){
      return {
        width:this.width + 'px',
        height:this.height + 'px'
      }
    }
  },
  ready: function () {},
  attached: function () {},
  methods: {
    closePopoup(){
      this.$destroy(true);
    }
  },
  components: {}
}
</script>
