<template>
  <div class="horn" @click="click">
    <Horn width="56" :active="audio.isPlay.value" />
  </div>
</template>
<script setup lang="ts">
import useAudio from '@/hooks/useCommonAudio'

const props = withDefaults(
  defineProps<{
    src: string
    autoplay?: boolean
    readonly?: boolean
  }>(),
  {
    autoplay: false,
  },
)

const audio = useAudio()

function click() {
  if (props.readonly) {
    return
  }
  handlePlay()
}

function handlePlay() {
  audio.play(props.src)
}

/* 初次加载时，在动画组件初始化后进行自动播放 */
onMounted(() => {
  nextTick(() => {
    if (props.src && props.autoplay) {
      audio.play(props.src)
    }
  })
})

defineExpose({
  handlePlay,
})

watch(
  () => props.src,
  () => {
    if (props.src && props.autoplay) {
      audio.play(props.src)
    }
  },
)
</script>
<style scoped lang="scss">
.horn {
  display: inline-block;
  width: 64px;
  height: 5.33vh;
  line-height: 5.33vh;
  vertical-align: middle;
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>
