<template>
  <div id="demo">
    <iframe
        src="https://10.22.245.209:18889/ktCallingSystem/wholeCallPage?agentId=1029&agentPwd=cinAgt123%23"
        id="iframe"
        style="width: 108plx; height: 108px; right: 20px; bottom: 20px"
        allow="microphone;camera;midi;encrypted-media"
        >
    </iframe>
    <el-button @click="call">拨打</el-button>
  </div>
</template>


<script setup name="call">
const props = defineProps({
    listRows: {
        required: true,
        type: Object,
        defult: {},
    },
    width: {
        type: String,
        defult: "",
    },
    height: {
        type: String,
        defult: "",
    }
});
/**
 * 监听iframe的消息
 */
window.addEventListener("message", function (msg) {
  // 接受从iframe传来的消息
  var data = msg.data;
  if (data && typeof data === "string" && data.startsWith("{")) {
    var dataObj = JSON.parse(data);
    handleMessage(dataObj);
  } else {
    console.log("not a valid message");
    console.log(data);
  }
});

/**
 * 消息处理
 */
function handleMessage(obj) {
  console.log("receive message from iframe: ", obj);
  var op = obj.op || "";
  var value = obj.value || "";
  const { width, height } = props;
  switch (op) {
    case "big_dialog": // 拨号、通话时窗口变大
      var iframe = document.getElementById("iframe");
      if(width || height) {
        iframe.style.width = width;
        iframe.style.height = height;
      } else {
        iframe.style.width = "1920px";
        iframe.style.height = "1080px";
        iframe.style.right = "0px";
        iframe.style.bottom = "0px";
      }
      break;
    case "small_dialog": // 返回电话盘
      var iframe = document.getElementById("iframe");
      iframe.style.width = "400px";
      iframe.style.height = "300px";
      iframe.style.right = "20px";
      iframe.style.bottom = "20px";
      break;
    case "call_in": // 电话呼入
      var iframe = document.getElementById("iframe");
      iframe.style.width = "238px";
      iframe.style.height = "108px";
    case "move": // 电话盘拖动
      var iframe = document.getElementById("iframe");
      var offsetX = value.offsetX;
      var offsetY = value.offsetY;
      iframe.style.right = addPixel(iframe.style.right, -offsetX);
      iframe.style.bottom = addPixel(iframe.style.bottom, -offsetY);
      break;
    default:
      break;
  }
}
function addPixel(pixelStr, offset) {
  var num = Number(pixelStr.replace("px", ""));
  return num + offset + "px";
}

function call() {
    const value = props.listRows.phone;
  var iframeWindow = window.frames[0];
  const msgObj = {
    op: "call", // 拨号
    value: value,
  };
  iframeWindow.postMessage(JSON.stringify(msgObj), "*");
}

onMounted(() => {});
</script>
<style lang="scss" scoped>

</style>
