<template>
  <div>
    <div style="margin-right: 80px">
      
      
      <el-input v-if="!loginFlag" style="width: 106px; margin-right: 12px;" v-model="inputAccountNumber" placeholder="请输入分机号"></el-input>
      <el-button
        type="primary"
        v-if="scoketState === '签出'"
        class="buttonStyle"
        @click="signIn"
        round
        >签入</el-button
      >
      <el-button
        type="primary"
        v-if="
          scoketState === '空闲' ||
          scoketState === '忙碌' ||
          scoketState === '话后处理中'
        "
        class="buttonStyle"
        round
        @click="signOut"
        >签出</el-button
      >
      <el-button
        type="primary"
        v-if="scoketState === '空闲'"
        class="buttonStyle"
        round
        @click="setBusy"
        >置忙</el-button
      >
      <el-button
        type="primary"
        v-if="scoketState === '忙碌' || scoketState === '话后处理中'"
        class="buttonStyle"
        round
        @click="setFree"
        >置闲</el-button
      >
    </div>
    
  </div>
</template>

<script setup>
import useSocketStore from '@/store/modules/socket'
import { createWebSocket, Send } from '@/utils/telWebsocket'
import useUserStore from '@/store/modules/user'
import { editPageData } from '@/api/main/system/system'

import { jssipInit,localMediaStream } from '@/utils/jsSip'


import { ref } from 'vue'
const { proxy } = getCurrentInstance();
const scoketState = ref('签出')
const phoneType = ref('')
const loginFlag = ref(false)
const scoketDatas = ref({})
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const ruleFormRef = ref()
const scpletData = ref(['签出', '忙碌', '空闲', '话后处理中'])
const inputAccountNumber = ref()
const formLogin = reactive({
  groupNumber: 'zxz'
})
const rules = reactive({
  accountNumber: [{ required: true, message: '请输入工号', trigger: 'blur' }],
  extensionNumber: [
    { required: true, message: '请输入分机号', trigger: 'blur' },
    { min: 4, max: 4, message: '分机号长度为4位', trigger: 'blur' }
  ]
})
const lineState = computed(() => {
  return useSocketStore().lineState
})
watch(lineState, (newValue, oldValue) => {
  console.log(newValue, oldValue)
  if (scpletData.value.indexOf(newValue) !== -1) {
    scoketState.value = newValue
  }
})
onMounted(() => {
  phoneType.value = import.meta.env.VITE_APP_PHONE_TYPE
  createWebSocket(import.meta.env.VITE_APP_BASE_WS)
 
})
window.addEventListener("sipRegistered", (e) => {
  console.log(e.detail);
  if (e.detail === '注册成功') {
    setTimeout(()=>{
      localMediaStream()
      loginIn()
    },300)
    
  }

});


//签入
function signIn() {
  if (phoneType.value === 'SIP') {
    console.log('注册')
    jssipInit(useUserStore().extension)
    // initSip(useUserStore().extension)
  }else if (phoneType.value === 'PHONE') {
    loginIn()
  }
  
}
function sipRegistered(data) {
  console.log(data)
}
function loginIn() {


  if (loginFlag.value) {
    return
  }
  if (!inputAccountNumber.value || Number(inputAccountNumber.value) <= 1000 || Number(inputAccountNumber.value) >= 9999 ) {
    proxy.$modal.msgError('分机号不正确')
    return
  }
  console.log(inputAccountNumber.value)
  scoketDatas.value = {
    Type: 'Login',
    AgentId: useUserStore().name,
    // TODO: 正式需要修改  inputAccountNumber.value
    // AgentExten: useUserStore().extension,  
    AgentExten: inputAccountNumber.value,
    AgentGroup: 'zxz'
  }
  useSocketStore().setAccountNumber(useUserStore().name)
  useSocketStore().setExtensionNumber(inputAccountNumber.value)
  useSocketStore().setGroupNumber('zxz')
  console.log(scoketDatas.value)
  Send(scoketDatas.value, (data) => {
    if (data.Type === 'Login' && data.Result === true) {
      loginFlag.value = true
      getCheckin()
      useSocketStore().setLineState('空闲')
    }
  })
}
//签出
function signOut() {
  
  scoketDatas.value = {
    Type: 'Logout',
    AgentId: useSocketStore().accountNumber,
    AgentExten: useSocketStore().extensionNumber
  }
  console.log(scoketDatas.value)
  Send(scoketDatas.value, (data) => {
    if (data.Type === 'Logout' && data.Result === true) {
      loginFlag.value = false
      useSocketStore().setLineState('签出')
    }
  })
}
//置忙
function setBusy() {
  scoketDatas.value = {
    Type: 'WorkOff',
    AgentId: useSocketStore().accountNumber,
    AgentExten: useSocketStore().extensionNumber
  }
  console.log(scoketDatas.value)
  Send(scoketDatas.value, (data) => {
    if (data.Type === 'WorkOff' && data.Result === true) {
      useSocketStore().setLineState('忙碌')
    }
  })
}
function getCheckin() {
  const params = {
    extension:useSocketStore().extensionNumber,
    usercode:useSocketStore().accountNumber
  }
  editPageData('/UserExtension/userextension',params).then(
    (res) => {
      console.log(res)
    }
  )
}
//置闲
function setFree() {
  console.log('置闲')
  scoketDatas.value = {
    Type: 'WorkOn',
    AgentId: useSocketStore().accountNumber,
    AgentExten: useSocketStore().extensionNumber
  }

  Send(scoketDatas.value, (data) => {
    if (data.Type === 'WorkOn' && data.Result === true) {
      useSocketStore().setLineState('空闲')
    }
  })
}
</script>

<style lang="scss" scoped>
.right-menu {
  float: right;
  height: 100%;
  line-height: 50px;
  display: flex;

  &:focus {
    outline: none;
  }

  .right-menu-item {
    display: inline-block;
    padding: 0 8px;
    height: 100%;
    font-size: 18px;
    color: #5a5e66;
    vertical-align: text-bottom;

    &.hover-effect {
      cursor: pointer;
      transition: background 0.3s;

      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
    }
  }

  .avatar-container {
    margin-right: 40px;

    .avatar-wrapper {
      margin-top: 5px;
      position: relative;

      .user-avatar {
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }

      i {
        cursor: pointer;
        position: absolute;
        right: -20px;
        top: 25px;
        font-size: 12px;
      }
    }
  }
}
</style>
