<template>
  <div ref="dragArea" class="fixed-View" :class="isMousedown?'grabbing':'grab'">
    <div class="fixed-View-title">{{ title }}</div>
    <div class="fixed-View-location">
      <img src="@/assets/home_images/locate.png">
      <div>{{ location }}</div>
    </div>
    <div style="width: 100%;border-bottom: 1px solid rgba(0,0,0,0.12);" />
    <div class="fixed-View-subTitle">{{ subTitle }}</div>
    <el-input v-model="formData.name" size="medium" placeholder="联系人" class="cell-input" />
    <el-input v-model="formData.phone" size="medium" placeholder="联系电话" class="cell-input" />
    <el-input v-model="formData.content" size="medium" type="textarea" placeholder="需求简述（300字以内）" maxlength="300" :autosize="{ minRows: 7, maxRows: 7}" show-word-limit resize="none" class="cell-input" />
    <div class="fixed-View-btn">
      <div class="btn touch" @click="submitForm()">提交</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isMousedown: false,
      title: '佛山英沃传感科技有限公司',
      location: '上海',
      subTitle: '我要咨询',
      formData: {
        name: '',
        phone: '',
        content: '',
        id: null
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 获取DOM元素
      const dragArea = this.$refs.dragArea
      // 缓存 clientX clientY 的对象: 用于判断是点击事件还是移动事件
      const clientOffset = {}
      dragArea.addEventListener('mousedown', (event) => {
        this.isMousedown = true
        // const offsetX = dragArea.getBoundingClientRect().left // 获取当前的x轴距离
        const offsetY = dragArea.getBoundingClientRect().top // 获取当前的y轴距离
        // const innerX = event.clientX - offsetX // 获取鼠标在方块内的x轴距
        const innerY = event.clientY - offsetY // 获取鼠标在方块内的y轴距
        // 缓存 clientX clientY
        clientOffset.clientX = event.clientX
        clientOffset.clientY = event.clientY
        document.onmousemove = (event) => {
          // dragArea.style.left = event.clientX - innerX + 'px'
          dragArea.style.top = event.clientY - innerY + 'px'
          const dragAreaTop = window.innerHeight - dragArea.getBoundingClientRect().height
          // const dragAreaLeft = window.innerWidth - dragArea.getBoundingClientRect().width - 160
          // if (dragArea.getBoundingClientRect().left <= 0) {
          //   dragArea.style.left = '0px'
          // }
          // if (dragArea.getBoundingClientRect().left >= dragAreaLeft) {
          //   dragArea.style.left = dragAreaLeft + 'px'
          // }
          if (dragArea.getBoundingClientRect().top <= 100) {
            dragArea.style.top = '100px'
          }
          if (dragArea.getBoundingClientRect().top >= dragAreaTop) {
            dragArea.style.top = dragAreaTop + 'px'
          }
        }
        document.onmouseup = () => {
          document.onmousemove = null
          document.onmouseup = null
          this.isMousedown = false
        }
      }, false)
      // 绑定鼠标松开事件
      dragArea.addEventListener('mouseup', (event) => {
        const clientX = event.clientX
        const clientY = event.clientY
        if (clientX === clientOffset.clientX && clientY === clientOffset.clientY) {
          console.log('click 事件')
        } else {
          console.log('drag 事件')
        }
      })
    })
  },
  methods: {
    submitForm() {
      console.log('提交')
    },
    callback() {
      this.$router.go(-1)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.touch {
  cursor:pointer;
}
.grab {
  cursor: grab;
}
.grabbing {
  cursor: grabbing;
}
.fixed-View {
  position: fixed;
  margin-left: 0;
  padding: 20px;
  width: 348px;
  height: 442px;
  right: 8vw;
  bottom: 230px;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
  border-radius: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  user-select: none;
  z-index: 99;
  .cell-input {
    margin: 5px 0;
  }
  .fixed-View-subTitle {
    color: #333;
    font-size: 18px;
    padding-top: 10px;
    padding-bottom: 5px;
  }
  .fixed-View-btn {
    padding: 10px;
    width: 100%;
    text-align: center;
    .btn {
      margin: auto;
      width: 140px;
      padding: 6px;
      background: #0156E5;
      border: 1px solid rgba(0,0,0,0.12);
      border-radius: 5px;
      color: white;
      font-size: 16px;
      opacity: 0.8;
    }
    .btn:hover {
      opacity: 1;
    }
  }
  .fixed-View-title {
    text-align: center;
    color: #0342AB;
    font-size: 20px;
  }
  .fixed-View-location {
    height: 38px;
    position: relative;
    color: #666;
    font-size: 16px;
    img {
      position: absolute;
      top: 9px;
      left: 236px;
    }
    div {
      position: absolute;
      top: 12px;
      left: 260px;
    }
  }
}
</style>
