<template>
  <Icon icon="svg-icon:speaker-wave" class="hover:cursor-pointer" :size="22" @click="openAudio" v-if="alterTone"/>
  <Icon icon="svg-icon:speaker-x-mark" class="hover:cursor-pointer" :size="22" @click="openAudio" v-if="!alterTone"/>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { Icon } from '@/components/Icon'
import { useAlterToneStore } from '@/store/modules/audio'
import WithdrawalAudio from '@/assets/audio/withdrawal_notify.mp3'
import Notify from '@/assets/audio/Notify.mp3'
import RechargeAudio from '@/assets/audio/recharte_notify.mp3'
import * as AuthUtils from '@/utils/auth'

const withdrawlAudio = new Audio(WithdrawalAudio)
const rechargeAudio = new Audio(RechargeAudio)
const notifyAudio = new Audio(Notify)
withdrawlAudio.muted = true

const alterToneStore = useAlterToneStore()
const alterTone = ref(false)
const openAudio = () => {
  alterTone.value = !alterTone.value
  alterToneStore.setAlterTone(!alterTone.value)
  initAudio()
  withdrawlAudio.muted = !alterTone.value
}

import { Client } from '@stomp/stompjs'
const stompClient = ref()
const isConnected = ref(false)
const server = ref((import.meta.env.VITE_BASE_URL + '/backend/message' + '?t=' + AuthUtils.getAccessToken() + '&r=' + AuthUtils.getRefreshToken()).replace('http','ws'))
let whinterval = null
let reInterval = null
// 是否正在播放音频

// 1 充值 2 取款
const playRechargeAudio = () => {
  reInterval = setInterval(() => {
    rechargeAudio.play()
  }, 4000)
}

const playWithdrwalAudio = () => {
  whinterval = setInterval(() => {
    withdrawlAudio.play()
  }, 4000)
}

const initAudio = () => {
  if (withdrawlAudio.muted) {
    withdrawlAudio.muted = false
    withdrawlAudio.pause()
    rechargeAudio.muted = false
    ElMessage({
      message: '已开启提示音',
      type: 'success',
    })
    notifyAudio.play().then(() => {
      alterToneStore.setAlterTone(true)
    })
  }
}

const stopRechargePlay = () => {
  withdrawlAudio.pause()
  withdrawlAudio.currentTime = 0
  clearInterval(reInterval)

}

const stopWithdrawalPlay = () => {
  clearInterval(whinterval)
  rechargeAudio.currentTime = 0
  rechargeAudio.pause()
}

// 初始化连接
const initConnect = async () => {
  stompClient.value = new Client({
    brokerURL: server.value,
    reconnectDelay: 5000,
    heartbeatIncoming: 4000,
    heartbeatOutgoing: 4000
  })
  stompClient.value.onConnect = (frame:any) => {
    isConnected.value = true
    console.log('Connected: ' + frame)
    stompClient.value.subscribe('/balance/withdrawal', (messageOutput) => {
      console.log('Received: ' + messageOutput.body)
      if (messageOutput.body === 'withdrawalApply') {
        playWithdrwalAudio()
      } else if (messageOutput.body === 'rechargeApply'){
        playRechargeAudio()
      } else if(messageOutput.body === 'withdrawalLock') {
        stopWithdrawalPlay()
      } else if(messageOutput.body === 'rechargeLook') {
        stopRechargePlay()
      }
    })
  }

  stompClient.value.onStompError = (frame: any) => {
    console.log('Broker reported error: ' + frame.headers['message'])
    console.log('Additional details: ' + frame.body)
  }
  stompClient.value.activate()
}

onMounted(async () => {
  ElMessage({
    message: '提示音未开始，点击右上角声音图标开启提款通知提示语音',
    type: 'warning'
  })
  await initConnect()
})
</script>
