<template>
  <div class="alias">
    <div class="line" v-if="to.split(',').length > 1">
      依赖于
      <template v-for="(item,index) in to.split(',')">
        <a :href="links[index]">{{ item }}</a>
      </template>
    </div>
    <div class="line" v-else>
      依赖于
      <a :href="links">{{ to }}</a>
    </div>
    <code class="box">import { {{ to }} } from 'seldom-ui'</code>
  </div>
</template>

<script lang="ts" setup>
import Entry from '../../../build/index'
import { computed } from 'vue'

const { packages } = Entry
const props = defineProps({
  to: {
    type: String,
    default: '',
  },
})
const links = computed(() => {
  if (props.to.split(',').length > 1) {
    return props.to.split(',').map(i => {
      return `/seldom/components/${ camelToLine(i) }/index.html`
    })
  } else {
    return `/seldom/components/${ camelToLine(props.to) }/index.html`
  }
})

// 驼峰命名转换为中划线命名
function camelToLine (str) {
  return (str.slice(0, 1) + str.slice(1).replace(/([A-Z])/g, '-$1')).toLowerCase()
}
</script>

<style lang="scss" scoped>
.alias {
  padding: 10px 0;

  .line {
    margin-bottom: 10px;

    a {
      margin-right: 5px;
      position: relative;
      padding: 2px 6px;
      border-radius: 3px;
      overflow: hidden;

      &:after {
        position: absolute;
        content: '';
        background-color: currentColor;
        opacity: 0.2;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }
  }

  .box {
    display: block;
    padding: 10px;
  }
}
</style>