<template>
  <span class="app-link">
    <!-- 外部链接跳转 -->
    <a :href="href" :target="target" v-if="href"><slot /></a>
    <!-- 站内跳转 -->
    <nuxt-link :to="path" v-else-if="path"><slot /></nuxt-link>
    <!-- 事件 -->
    <div v-else-if="data.onClick" @click="data.onClick"><slot /></div>
    <template v-else><slot /></template>
  </span>
</template>

<script>
export default {
  name: 'Link',
  props: {
    data: { type: Object, default: () => ({}) },
    to: [String, Object, Function],
    target: { type: String, default: '_blank' }
  },
  computed: {
    href() {
      return this.data.href || this.data.uri
    },
    path() {
      if (typeof this.to === 'function') {
        return this.to(this.data)
      }
      return this.data.path || this.to
    }
  }
}
</script>
