<template>
  <el-card class="drawerPhoneInter">
    <div class="phoneList">
      <div class="tabBox">
        <el-radio-group v-model="radio2" @change="aaaa">
          <el-radio-button label="已接通" />
          <el-radio-button label="未接通" />
        </el-radio-group>
      </div>
      <div class="contentBox">
        <div class="contentList" v-for="item in tableData">
          <div class="leftBox">
            <div class="telPhoneBox">13212345678</div>
            <div class="remarkBox">
              <span style="margin-right: 15px;">2022-02-22 12:22:22</span>
              <span>已接通</span>
            </div>
          </div>
          <div class="rightBox">
            <el-icon color="#409EFC" class="no-inherit">
              <Phone />
            </el-icon>
          </div>
        </div>
      </div>
    </div>

    <div v-if="callOrListState">
      <div class="plate" v-if="getCallState === '2'">
        <el-input ref="inputFocus" v-model="telNumber" placeholder="请输入号码1" 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-row>
            <el-col :span="8" class="elCol">
              <el-button size="large" type="primary" :icon="Switch" circle :disabled="btnState" class="buttonStyle"
                @click="transferCall"></el-button>
              <div>转移</div>
            </el-col>
            <el-col :span="8" class="elCol">
              <el-button size="large" type="primary" :icon="UserFilled" circle :disabled="btnState" class="buttonStyle"
                @click="meetingCall"></el-button>
              <div>会议</div>
            </el-col>
            <el-col :span="8" class="elCol">
              <div v-show="scoketState !== '通话保持中'">
                <el-button size="large" type="primary" :icon="VideoPause" circle :disabled="btnState" class="buttonStyle"
                  @click="holdBack" />
                <div>保持</div>
              </div>
              <div v-show="scoketState === '通话保持中'">
                <el-button size="large" type="primary" :icon="VideoPlay" circle :disabled="btnState" class="buttonStyle"
                  @click="retrieveBack" />
                <div>取消保持</div>
              </div>
            </el-col>
            <el-col :span="8" class="elCol">
              <el-button size="large" type="primary" :icon="Finished" circle :disabled="btnState" class="buttonStyle"
                @click="btn_IVR"></el-button>
              <div>满意度</div>
            </el-col>
          </el-row>


        </div>
      </div>
      <el-button size="large" type="danger" :icon="Phone" circle v-if="getCallState === '1'" :disabled="dropCallState"
        class="btnHangUp" @click="dropCall" />
      <el-button size="large" type="success" :icon="Phone" circle v-if="getCallState === '2'" class="btnCall"
        @click="btnCallType" />
      <el-button size="large" :icon="Edit" circle type="primary" class="btnCut" @click="btnTellState" />
      <el-button size="large" :icon="ArrowDownBold" circle type="primary" class="btnPage" @click="btnCutPage" />
    </div>
    <el-button v-if="!callOrListState" size="large" :icon="Fold" circle type="primary" class="btnPage"
      @click="btnCutPage" />
  </el-card>
</template>
<script setup>
import { Switch, UserFilled, VideoPause, VideoPlay, Finished, Phone, ArrowDownBold, Fold, Edit } from '@element-plus/icons-vue'
import { Send, ws } from '@/utils/telWebsocket'
import useSocketStore from '@/store/modules/socket'
const radio2 = ref('已接通')
const scoketDatas = ref({})
const scoketState = ref('签出')
const dropCallState = ref(true)
const callDirection = ref(1)
const btnState = ref(true)
const callOrListState = ref(true)
const telNumber = ref('')
const getCallState = ref('')
const getCallData = ref({})
const dialNums = ref([
  ['1', '2', '3'],
  ['4', '5', '6'],
  ['7', '8', '9'],
  ['*', '0', '#']
])
const props = defineProps({
  callState: {
    type: String,
    default: ''
  },
  callData: {
    type: Object,
    default: () => ({})
  }
})

function aaaa(e) {
  console.log(e)
}
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 btnCutPage() {
  callOrListState.value = !callOrListState.value
}
//转移
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.Type)
    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('取消保持成功')
  })
}
const tableData = [
  {
    tel: "13212345678",
    time: '2016-05-03 23:59:59',
    status: '已接通',
  },
  {
    tel: "13212345678",
    time: '2016-05-03 23:59:59',
    status: '已接通',
  },
  {
    tel: "13212345678",
    time: '2016-05-03 23:59:59',
    status: '已接通',
  },
  {
    tel: "13212345678",
    time: '2016-05-03 23:59:59',
    status: '已接通',
  },
  {
    tel: "13212345678",
    time: '2016-05-03 23:59:59',
    status: '已接通',
  },
  {
    tel: "13212345678",
    time: '2016-05-03 23:59:59',
    status: '已接通',
  }
]
</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;
}

.drawerPhoneInter {
  // position: fixed;
  // right: 0px;
  // bottom: 0px;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 3;
  box-shadow: -1px -1px 1px #b6b6b6;
  position: relative;

  .phoneList {
    height: 100%;

    .tabBox {
      width: 150px;
      margin: 0 auto;
    }

    .contentBox {
      border-top: 1px solid #999;
      margin-top: 15px;

      .contentList {
        width: 100%;
        display: flex;
        padding: 8px;
        border-bottom: 1px solid #ddd;

        .leftBox {
          text-align: left;
          width: 80%;
          line-height: 20px;

          .telPhoneBox {
            font-size: 14px;
            font-weight: bold;
          }

          .remarkBox {
            font-size: 12px;
          }
        }

        .rightBox {
          text-align: right;
          line-height: 40px;
          width: 20%;
        }
      }

    }
  }

  .buttonStyle {
    margin: 8px;
  }

  .btnCall {
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -20px;
    z-index: 2;
  }

  .btnCut {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 2;
  }

  .btnPage {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 2;
  }

  .btnHangUp {
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -20px;
    z-index: 2;
  }

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




  .inComing {
    position: absolute;
    bottom: 0px;
    height: 100%;
    width: 100%;
    margin-left: -20px;
    z-index: 1;
    background: #fff;

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

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

    .phoneOperation {
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 150px;

      .elCol {
        margin: 20px 0;
      }
    }
  }

  .plate {
    text-align: center;
    margin-top: 20px;
    position: absolute;
    bottom: 70px;
    background: #fff;
    width: 100%;
    margin-left: -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>
