<template>
  <div>
    <el-card class="drawerPhone">
      <div class="plate" v-if="getCallState === '2'">
        <el-input ref="inputFocus" v-model="telNumber" placeholder="请输入号码2" class="tel_input" autofocus maxlength="12" />
        <el-row v-for="(item, index) in dialNums" :gutter="20" :key="index">
          <el-col v-for="(tnum, index) in item" :span="8" :key="index">
            <el-button class="btn_nums" type="info" circle @click="dialNumHandler(tnum)">{{ tnum }}</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="inComing" v-if="getCallState === '1'">
        <div class="numberText">{{ getCallData.Number }}</div>
        <div class="clientText">未知</div>
        <div class="phoneOperation">
          <el-button type="primary" :disabled="btnState" class="buttonStyle" @click="transferCall">转移</el-button>
          <el-button type="primary" :disabled="btnState" class="buttonStyle" @click="meetingCall">会议</el-button>
          <el-button type="primary" :disabled="btnState" v-show="scoketState !== '通话保持中'" class="buttonStyle"
            @click="holdBack">保持</el-button>
          <!-- v-if="scoketState === '保持中'" -->
          <el-button type="primary" :disabled="btnState" v-show="scoketState === '通话保持中'" class="buttonStyle"
            @click="retrieveBack">取消保持</el-button>
          <el-button type="primary" :disabled="btnState" class="buttonStyle" @click="btn_IVR">满意度</el-button>

          <el-button type="primary" :disabled="dropCallState" class="buttonStyle" @click="dropCall">挂断</el-button>
        </div>
      </div>
      <el-button type="primary" v-if="getCallState === '2'" class="btnCall" @click="btnCallType">呼叫</el-button>
      <div class="scoketStateText" type="success">{{ scoketState }}</div>
      <el-button type="primary" class="btnCut" @click="btnTellState">{{
        getCallState === '1' ? '键盘' : '功能'
      }}</el-button>
    </el-card>
  </div>
</template>
<!-- <script src="../../../utils/telWebsocket.js"></script> -->
<script setup>
import { Send, ws } from '@/utils/telWebsocket'
import useSocketStore from '@/store/modules/socket'

const props = defineProps({
  callState: {
    type: String,
    default: ''
  },
  callData: {
    type: Object,
    default: () => ({})
  }
})
const scoketDatas = ref({})
const scoketState = ref('签出')
const dropCallState = ref(true)
const callDirection = ref(1)
const btnState = ref(true)
const telNumber = ref('')
const getCallState = ref('')
const getCallData = ref({})
const dialNums = ref([
  ['1', '2', '3'],
  ['4', '5', '6'],
  ['7', '8', '9'],
  ['*', '0', '#']
])
watch(
  () => props.callData,
  (newValue) => {
    getCallData.value = newValue
  }
)
function dialNumHandler(tnum) {
  if (telNumber.value.length === 12) {
    return
  }
  telNumber.value += tnum
}
ws.addEventListener('message', function (evt) {
  const telWSData = JSON.parse(evt.data)
  if (telWSData) {
    switch (telWSData.Type.toLowerCase()) {
      case 'linestate': // 来电 Incoming
        linestateBack(telWSData.Result)
        break
      case 'incoming': // 来电
        incomingBack(telWSData)
        break
    }
  }
})
function linestateBack(Result) {
  scoketState.value = Result
  if (scoketState.value === '通话中') {
    if (callDirection.value === 1) {
      btnState.value = false
    }
    dropCallState.value = false
  } else {
    btnState.value = true
    dropCallState.value = true
  }
  useSocketStore().setLineState(Result)
}
function incomingBack(data) {
  getCallState.value = '1'
  useSocketStore().setIncomingData(data)
}
function btnTellState() {
  if (getCallState.value === '1') {
    getCallState.value = '2'
  } else if (getCallState.value === '2') {
    getCallState.value = '1'
  }
}
//转移
function transferCall() {
  getCallState.value = '2'
  scoketState.value = '转移'
}
//会议
function meetingCall() {
  getCallState.value = '2'
  scoketState.value = '会议'
}
function btnCallType() {
  if (!telNumber.value) {
    return
  }
  scoketDatas.value = {
    AgentId: useSocketStore().accountNumber,
    AgentExten: useSocketStore().extensionNumber
  }
  if (scoketState.value === '转移') {
    scoketDatas.value.Type = 'Transfer'
    scoketDatas.value.DestinationNumber = telNumber.value
  } else if (scoketState.value === '会议') {
    scoketDatas.value.Type = 'Meeting'
    scoketDatas.value.DestinationNumber = telNumber.value
  } else {
    scoketDatas.value.Type = 'MakeCall'
    scoketDatas.value.DestinationNumber = telNumber.value
    callDirection.value = 2
  }
  Send(scoketDatas.value, (data) => {
    console.log('外呼成功===' + data)
    if (data.Type === 'MakeCall') {
      scoketState.value === '外呼成功'
    }
    getCallState.value = '1'
    delete scoketDatas.value.DestinationNumber
  })
}
onMounted(() => {
  getCallState.value = props.callState
})
//ivr-满意度
function btn_IVR() {
  scoketDatas.value = {
    Type: 'TurnIvr',
    AgentId: useSocketStore().accountNumber,
    AgentExten: useSocketStore().extensionNumber
  }
  Send(scoketDatas.value, (data) => {
    console.log('ivr-满意度成功')
  })
}
//挂断
function dropCall() {
  scoketDatas.value = {
    Type: 'DropCall',
    AgentId: useSocketStore().accountNumber,
    AgentExten: useSocketStore().extensionNumber
  }
  Send(scoketDatas.value, (data) => {
    console.log('挂断成功')
  })
}

//保持
function holdBack() {
  scoketDatas.value = {
    Type: 'Hold',
    AgentId: useSocketStore().accountNumber,
    AgentExten: useSocketStore().extensionNumber
  }
  Send(scoketDatas.value, (data) => {
    console.log('通话保持中成功')
  })
}
//取消保持
function retrieveBack() {
  scoketDatas.value = {
    Type: 'Retrieve',
    AgentId: useSocketStore().accountNumber,
    AgentExten: useSocketStore().extensionNumber
  }
  Send(scoketDatas.value, (data) => {
    console.log('取消保持成功')
  })
}
</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;
    }
  }
}

:deep(.el-card__body) {
  padding: 0;
}

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

.drawerPhone {
  // position: fixed;
  // right: 0px;
  // bottom: 0px;
  padding: 0;
  width: 300px;
  height: 500px;
  background: #fff;
  z-index: 3;
  box-shadow: -1px -1px 1px #b6b6b6;

  .buttonStyle {
    margin: 8px;
  }

  .btnCut {
    position: absolute;
    bottom: 58px;
    right: 43px;
  }

  .scoketStateText {
    font-weight: bold;
    color: #67c23a;
    position: absolute;
    top: 15px;
    right: 15px;
  }

  .btnCall {
    position: absolute;
    bottom: 58px;
    left: 43px;
  }

  position: relative;
}

.hideBtn {
  position: fixed;
  right: 300px;
  bottom: 468px;
  z-index: 3;
}

.inComing {
  .numberText {
    text-align: center;
    font-size: 28px;
    margin-top: 50px;
  }

  .clientText {
    text-align: center;
    margin-top: 15px;
  }

  .phoneOperation {
    position: absolute;
    bottom: 50px;
  }
}

.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>
