<template>
  <div>
    <div id="drawerPhone" @mousedown="handleRemove" v-if="callPhoneFlag">
      <div class="drawerPhoneTit" id="drawerPhoneTit">
        <!-- {{ lineState }} -->
        <div class="callStatusText">{{ lineState }}</div>
        <el-icon class="cutTag" :size="26" v-show="showDiv" @click="hidePhone">
          <Minus />
        </el-icon>

        <el-icon class="cutTag" :size="26" v-show="!showDiv" @click="showPhone">
          <Iphone />
        </el-icon>
      </div>
      <div class="drawerPhoneBox" v-show="showDiv">
        <page-phone :callState="callState" :callData="callData"></page-phone>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import PagePhone from './cpns/page-phone'
import useSocketStore from '@/store/modules/socket'

const callState = ref('2')
const callData = ref({})
const callPhoneFlag = ref(false)
const showDiv = ref(false)
let defaultLeft = ref()
let defaultTop = ref()
let drawerPhoneID = ref()
const stateObj = {
  0:'离线',
  1:'登录中',
  2:'空闲',
  3:'通话中',
  4:'话后处理中',
  5:'忙碌',
  6:'振铃',
  7:'注销',
}
const inComingData = computed(() => {
  return useSocketStore().incomingData
})
const lineState = computed(() => {
  return useSocketStore().lineState
})
watch(inComingData, (newValue, oldValue) => {
  if (newValue) {
    inComingBack(newValue)
  }
})
watch(lineState, (newValue, oldValue) => {
  if (newValue === '空闲') {
    callPhoneFlag.value = true
  } else if (newValue === '签出') {
    callPhoneFlag.value = false
  } else if (newValue === '振铃') {
    showPhone()
  }
})
function inComingBack(telWSData) {
  callState.value = ref('1')
  showPhone()
  callData.value = telWSData
}
//显示
function showPhone() {
  showDiv.value = true
  drawerPhoneID.value = document.getElementById('drawerPhone')
  drawerPhoneID.value.style.width = '360px'
  drawerPhoneID.value.style.left = defaultLeft.value + 'px'
  drawerPhoneID.value.style.top = window.innerHeight - 790 + 'px'
}
//隐藏
function hidePhone() {
  showDiv.value = false
  drawerPhoneID.value.style.width = '100px'
  drawerPhoneID.value.style.left = defaultLeft.value + 260 + 'px'
  drawerPhoneID.value.style.top = window.innerHeight - 99 + 'px'
}

const handleRemove = (e) => {
  if (!showDiv.value) {
    return
  }
  let videoTit = document.getElementById('drawerPhoneTit') //算出鼠标相对元素的位置
  defaultLeft.value = window.innerWidth - drawerPhoneID.value.clientWidth
  defaultTop.value = window.innerHeight - videoTit.clientHeight
  let disX = e.clientX - drawerPhoneID.value.offsetLeft
  let disY = e.clientY - drawerPhoneID.value.offsetTop
  document.onmousemove = function (e) {
    //用鼠标的位置诚去鼠标相对元素的位置，得到元素的位置
    let left = e.clientX - disX
    let top = e.clientY - disY
    if (left < 0) left = 0
    if (top < 0) top = 0
    if (left > defaultLeft.value) left = defaultLeft.value
    if (top > defaultTop.value) top = defaultTop.value
    drawerPhoneID.value.style.left = left + 'px'
    drawerPhoneID.value.style.top = top + 'px'
  }
  document.onmouseup = function () {
    document.onmousemove = null
    document.onmouseup = null
  }
}
</script>

<style lang="scss" scoped>
.tel_input {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
      inset;
    cursor: default;

    .el-input__inner {
      cursor: default !important;
    }
  }
}

.drawerButton {
  position: fixed;
  right: 0px;
  bottom: 300px;
  padding: 3px;
  z-index: 4;
  box-shadow: -1px -1px 1px #b6b6b6;
}

#drawerPhone {
  width: 360px;
  position: fixed;
  right: 0px;
  bottom: 60px;
  z-index: 1001;
}

.drawerPhoneTit {
  width: 120px;
  float: right;
  border-radius: 12%;
  right: 0px;
  height: 38px;
  background: #409eff;
  color: #fff;
  z-index: 4;
  box-shadow: -1px -1px 1px #b6b6b6;
  position: relative;

  .callStatusText {
    margin-left: 15px;
    text-align: left;
    color: #00ff77;
    line-height: 38px;
  }

  .cutTag {
    position: absolute;
    border-radius: 50%;
    padding: 3px;
    line-height: 38px;
    font-weight: bold;
    background: #fff;
    color: #409eff;
    top: 6px;
    right: 8px;
  }
}

.drawerPhoneBox {
  width: 100%;
  height: 750px;
  background: #fff;
  z-index: 4;
}

.hideBtn {
  position: fixed;
  right: 360px;
  bottom: 616px;
  z-index: 4;
}

.plate {
  text-align: center;
  margin-top: 20px;

  .bottomBtn {
    margin-top: 20px;
  }

  div.tel_input {
    font-size: 26px;
    margin-bottom: 22px;
    width: 186px;

    .el-input__inner {
      background-color: #42484d;
      color: #ffffff;
      font-size: 26px;
      // border-color: transparent;

      width: 100%;
    }
  }

  .btn_nums {
    background-color: #1f2129;
    width: 63px;
    height: 63px;
    font-size: 28px;
    border-color: transparent;
    margin-bottom: 8px;
  }

  .btn_nums:hover {
    box-shadow: 0px 0px 20px #7e7e7e;
  }

  .btn_nums:active {
    background-color: #409eff;
  }

  .btn_yonghu {
    position: absolute;
    right: 12px;
    bottom: 12px;
    color: #ffffff;
    cursor: pointer;
  }
}
</style>
