<template>
  <div class="dialog" v-if="show"  @click.stop="hideDialog"   >
          <div @click.stop :class="[css.top ? 'dialog__content_top' : 'dialog__content']"   >
                   <div @click="hideDialog"  class="dialog__close" >

                    <div>Закрыть</div>

                     <svg class="dialog__close_svg"   >
                       <title>Закрыть</title>
                       <use xlink:href="@/assets/images/sprite.svg#close"></use>
                     </svg>


                   </div>



                    <slot></slot>
          </div>

  </div>
</template>

<script>
import toggleMixin from "@/mixins/toggleMixin";

export default {
  name:'my-dialog',
  mixins:[toggleMixin],
  props:{
    params:{
      type:Object,

    },
    css:{type:Object,
         default:{
           top:false,
         }
        }

  },
methods:{
    // hideDialog(){
    //  this.$emit("update:show",false);
    //
    // },

}

}
</script>

<style scoped>
.dialog {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
  position: fixed;
  display: flex;
}

.dialog__content {
  margin: auto;
  background: white;
  border-radius: 12px;
  min-height: 50px;
  min-width: 300px;
  padding: 20px;
  position: relative;
  top:-30%;

}

.dialog__content_top {
  top:0px;
  left:0px;
  width: 100%;
  background: white;

  height: 100vh;
  padding: 20px;
  position: relative;
}


.dialog__close{
    width:80px;height:25px;
    cursor: pointer;
    position: absolute;
    top:15px;
    right: 20px;

  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: space-between;
}
.dialog__close:first-child{
  font-size: 0.8em;
}

.dialog__close_svg{
  width:16px;height:16px;

}

</style>