<template>
  <div :class="{ icon: true, active: active }">
    <div
      :style="{
        'background-image': bg,
      }"
      class="left"
    ></div>
    <div
      :style="{
        'background-image': bg,
      }"
      class="right"
    ></div>
  </div>
</template>

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

const props = withDefaults(
  defineProps<{
    width?: number | string
    active: boolean
    name: 'us' | 'br'
  }>(),
  {
    name: 'br',
    active: false,
  },
)
const OSS_URL = import.meta.env.VITE_OSS_URL
const _width = px2vh(props.width || 56)
const bg = `url(${OSS_URL}/icon/accent_${props.name}.svg)`
</script>

<style lang="scss" scoped>
.icon {
  width: v-bind(_width);
  height: v-bind(_width);
  transform: translate(0px);
  display: flex;
  .left,
  .right {
    height: 100%;
    width: 50%;
    background-repeat: no-repeat;
    background-size: 4.67vh 3.17vh;
  }
  .left {
    background-position: 0 50%;
  }
  .right {
    background-position: 105% 50%;
  }
}
.icon.active .right {
  animation: ani 0.4s linear alternate infinite;
}
@keyframes ani {
  from {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(-0.83vh) scale(0.2);
    opacity: 0;
  }
}
</style>
