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

const props = withDefaults(
  defineProps<{
    height?: number | string // 词性img高度
    gap?: number | string // 多个词性间距
    abbr: any
  }>(),
  {
    height: '42',
    gap: 20,
  },
)
const OSS_URL = import.meta.env.VITE_OSS_URL
const _height = px2vw(props.height)
const _gap = px2vw(props.gap)

const srcList = computed(() => {
  return typeof props.abbr === 'object'
    ? props.abbr.map((item: string) => item.split('/')).flat()
    : props.abbr.split('/')
})

function getSrc(src: string) {
  if (src.includes('phrasal')) {
    src = 'phrase.'
  }
  const type = src[src.length - 1] === '.' ? src : src + '.'
  return `${OSS_URL}/icon/part_${type}png`
}
</script>

<template>
  <div v-if="abbr" class="abbr-box">
    <img v-for="i in srcList" :key="i" class="img-Speech" :src="getSrc(i)" alt="" />
  </div>
</template>

<style lang="scss" scoped>
.abbr-box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  .img-Speech {
    height: v-bind(_height);
    width: auto;
    margin-right: v-bind(_gap);
    vertical-align: middle;
  }
}
</style>
