/* 移动端预览的时候 监听按键事件 传给学生端控制操作按钮 */
import { onMounted, onUnmounted } from "vue"

export const changeToggeMes = () => {
  function handleMessage(event: any) {
    // 当这个页面不是 iframe包裹的时候  会循环触发headerTogge  因为window.parent === window 相等 所以排除掉这个
    if (window.parent === window) {
      return
    }
    const { api, playState } = event.data || {}
    if (api === "headerTogge") {
      window.parent.postMessage(
        {
          api: "headerTogge",
          playState: playState
        },
        "*"
      )
    } else if (api === "changeTogge") {
      // 云教练切换
      window.parent.postMessage(
        {
          api: "changeTogge"
        },
        "*"
      )
    } else if (["clickTempo", "clickViewFigner"].includes(api)) {
      // 节奏练习 听音练习 切换
      window.parent.postMessage(
        {
          api
        },
        "*"
      )
    }
  }
  onMounted(() => {
    window.addEventListener("message", handleMessage)
  })
  onUnmounted(() => {
    window.removeEventListener("message", handleMessage)
  })
}