<template>
  <div
    :class="{ icon: 1, active: active }"
    :style="{
      'background-image': bg || `url(${OSS_URL}/urm/animation_horn.png)`,
    }"
  ></div>
</template>

<script setup lang="ts">
import { px2vw } from '@/utils'

const props = withDefaults(
  defineProps<{
    width?: number | string
    active: boolean
    bg?: string
  }>(),
  {
    active: false,
  },
)
const OSS_URL = import.meta.env.VITE_OSS_URL
const _width = px2vw(props.width || 48)
</script>

<style scoped>
.icon {
  width: v-bind(_width);
  height: v-bind(_width);
  transform: translate(-2px);
  background-size: calc(v-bind(_width) * 3) v-bind(_width);
  background-repeat: no-repeat;
  background-position: calc(v-bind(_width) * -2) center;
  cursor: pointer;
}
.icon.active {
  animation: ani 1s steps(3) infinite;
}
@keyframes ani {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: calc(v-bind(_width) * -3);
  }
}
</style>
