<template>
  <div class="windowContainer" id="linkPannel" ref="linkPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')">
    <Moveable
        className="moveable"
        :target="$refs.linkPannel"
        :draggable="true"
        @drag="onDrag"
    />
    <div class="windowTitle">
      <div class="titleContent">
        <p>./ExternalLinks.333</p>
        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')"><p>×</p></button>
      </div>
    </div>

  </div>
</template>

<style scoped>
  /*=====================LinkPannel CSS*/
  #linkPannel{
    background-color: var(--dark-color);
    position:absolute;
    cursor:grab;
  }

  /*=====================format pc*/
  @media(min-width:800px){
    #linkPannel{
      width:666px;
      height:666px;
    }
  }

  /*=====================format tel*/
  @media(max-width:800px){
    #linkPannel{
      width:333px;
      height:333px;
    }

  }
</style>

<script>
  import Moveable from 'vue3-moveable';

  export default {
    name : 'LinkPannel',
    components:{
      Moveable
    },
    emits: ["focus","close"],
    methods:{
      onDrag({ target, transform }) {
        target.style.transform = transform;
      },
      observeContainer(){
        const container = document.getElementById("contentContainer");

        if(!container){
          console.error("container not found");
          return
        }

        const observer = new ResizeObserver(entries=>{
          const rect = entries[0].contentRect;

          this.bodyWidth = rect.width;
          this.bodyHeight = rect.height;

          this.coordX = Math.random()*(this.bodyWidth-333);
          this.coordY = Math.random()*(this.bodyHeight-333);
        });

        observer.observe(container);
      }
  },
  data(){
    return {
      bodyHeight:0,
      bodyWidth:0,
      coordX:0,
      coordY:0,
    }
  },
  mounted(){
    this.$nextTick(() => {
        this.observeContainer()
    });
    console.log('coord:', this.coordX, this.coordY);
    console.log("Contact pannel is loaded!");
  }
};
</script>
