<template>
  <div id="phoneBarBox" class="phone-bar"></div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, markRaw } from "vue";
import { ElMessageBox } from "element-plus";
import { WarningFilled } from "@element-plus/icons-vue";
import PhoneBar from "hlytx-phone-bar";

let phoneBar: any = null;

const initPhoneBar = () => {
  phoneBar = new PhoneBar({
    renderTo: "phoneBarBox",
    proxyUrl: "ws://192.168.1.111:8787/websocket",
    sipServerUrl: "192.168.1.111:5188",
    startupSoftPhone: true,
    tid: "xxxxx", // 租户标识/企业标识  企业id:900003
    thisDN: "xxxxxxxxx",
    agentID: "xxxxxxxxx",
    password: "xxxxxxxxxx",
    loginType: 0,
    thisQueues: [],
    defaultQueue: "",
    pstnDN: "",

    autoIdleWhenAfterWork: true,
    autoIdleWhenLogin: false,
    isPhoneTakeAlong: false,

    onAgentStatusChange: function (newState: string, beforeValue: string) {
      console.log("坐席状态由[" + beforeValue + "]变更为[" + newState + "]");
    },

    onScreenPopup: function (lineState: string, callInfo: IObject) {
      console.log("弹屏事件：", lineState, callInfo);
    },

    onRinging: function (callInfo: IObject) {
      console.log("振铃事件：", callInfo);
    },

    onTalking: function (callInfo: IObject) {
      console.log("接通事件：", callInfo);
    },

    onHangup: function (callInfo: IObject) {
      console.log("挂机事件：", callInfo);
    },

    onLinkDisconnected: function () {
      console.log("已断开连接");
    }
  });

  if (phoneBar) {
    // 覆盖弹窗方法
    PhoneBar.utils.showMessage = function (msg: string) {
      ElMessageBox.close();
      ElMessageBox.alert(msg, "提示", {
        confirmButtonText: "确定",
        type: "warning",
        icon: markRaw(WarningFilled)
      });
    };
  }
};

// 加载组件
onMounted(() => {
  initPhoneBar();
});

// 销毁组件
onUnmounted(() => {
  phoneBar.destroy();
});

</script>

<!--引入css-->
<link rel="stylesheet" type="text/css" href="./css/PhoneBar.css">
<!--引入js-->
<script src='./PhoneBar.js'></script>

phoneBar = new PhoneBar({
  renderTo: 'test1',
  proxyUrl: 'ws://192.168.1.111:8787/websocket',
  sipServerUrl: '192.168.1.111:5188',
  startupSoftPhone: true,
  tid: 'xxxxx',
  thisDN: 'xxxxx',
  agentID: 'xxxxx',
  password: 'xxxxx',
  thisQueues: ['xxxxx', 'xxxxx'],
  defaultQueue: 'xxxxx'
})