<template>
    <Touch
        :tag="tag"
        :class="$style.link"
        @tap="tap"
    ><slot/></Touch>
</template>

<script>
    import Touch from "../external/Touch";
    export default {
        name: "Link",
        components: {Touch},
        props:{
            tag:{
                type:String,
                default:'span'
            },
            route:{
                type:Object,
                default:null
            },
            target:{
                validator(v){
                    switch(v){
                        case '_blank':
                        case '_self':
                            return true;
                        default:
                            return false;
                    }
                },
                default:'_self'
            }
        },
        methods:{
            tap(e){
                if(this.route===null){
                    this.$emit('tap',e);
                    return;
                }
                switch(this.target){
                    case '_blank':
                        window.open(
                            this.$router.resolve(this.route).href,
                            '_blank'
                        );
                        break;
                    case '_self':
                        this.$router.push(this.route);
                        break;
                }

            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';
    @value Link from '../../cssInjection/stylization.scss';
    .link {
        color: Link;
    }
</style>