<template>
  <div id="dragView">
    <header @mousedown="mousedown">
      <span>头部</span>
      <span class="close_btn" @click="close">X</span>
    </header>
    <main>
      <iframe :src="iframeSrc" frameborder="0"></iframe>
    </main>
  </div>
</template>

<script>
  export default {
    name: 'Window',
    props: {
      "iframeSrc": String
    },
    data() {
      return {
        title: '标题',
        selectElement: ''
      }
    },
    methods: {
      mousedown(event) {
        this.selectElement = document.getElementById('dragView')
        var div1 = this.selectElement
        this.isDowm = true
        var distanceX = event.clientX - this.selectElement.offsetLeft
        var distanceY = event.clientY - this.selectElement.offsetTop
        document.onmousemove = function (ev) {
          var oevent = ev || event
          div1.style.left = oevent.clientX - distanceX + 'px'
          div1.style.top = oevent.clientY - distanceY + 'px'
        }
        document.onmouseup = function () {
          document.onmousemove = null
          document.onmouseup = null
        }
      },
      close(){
        this.$emit('closeDrag')
      }
    }
  }
</script>

<style lang="less" scoped>
#dragView{
    position: absolute;
    z-index: 2001;
    top: 332px;
    left: 449px;
    width: 300px;
    height: 300px;
    text-align: center;
    border: 1px solid rgb(102, 102, 153);
    background-color: rgb(255, 255, 255);
    overflow: hidden;
    header{
      position: absolute;
      width: 100%;
      text-align: left;
      height: 25px;
      padding: 3px 3px 3px 10px;
      margin: 0px;
      color: rgb(255, 255, 255);
      border: 1px solid rgb(102, 102, 153);
      cursor: move;
      background-color: rgb(102, 102, 153);
      .close_btn{
        color: #fff;
        font-size: 15px;
        cursor: pointer;
        float: right;
      }
    }
    main{
      width: 100%;
      height: 100%;
      iframe{
        width: 100%;
        height: 100%;
      }
    }
}
</style>
