<template>
    <router-link @click.native="$emit('click')" :to="url" v-if="isVueRouter"  :class="bem()"><slot/></router-link>
    <a v-else  @click="$emit('click')" :href="generateHref(url)" :class="bem()"><slot/></a>
</template>

<script>
import { createComponentName, componentMixin } from '../_utils/component';
import { REQUEST_URL } from '../_utils/constant';

export default {
    name: createComponentName('link'),
    mixins: [componentMixin],
    props: {
        url: {
            type: [String, Object],
            required: true,
        }
    },
    computed: {
        isVueRouter() {
            if (/^http/.test(this.url) || REQUEST_URL !== location.origin) return false;
            return true;
        },
    },
    methods: {
        generateHref(to) {
            const router = this.$router;
            const current = this.$route;
            const ref = router.resolve(to, current, false);
            return REQUEST_URL + ref.href;
        }
    }
};
</script>
<style lang="less">
@import '../_styles/base.less';

@b: ~"@{prefix}-link";

.@{b} {
    color: inherit;
    text-decoration: none;
    outline: none;
    cursor: pointer;

    &:hover {
        color: #000;
    }
}
</style>
