<template>
    <v-btn
        small
        text
        outlined
        class="text-no-transform"
        :color="btnColor"
        :href="curs.type == 'knolyx' ? null : curs.url"
        target="_blank"
        @click="OnClick"
    >
        {{ __(caption) }}

        <v-icon 
            small
            :color="btnColor"
        >   
            mdi-chevron-right
        </v-icon>
    </v-btn>
</template>

<script>
    const Redirect = require('@CsFunc/global/Redirect');

    export default {
        props: {
            curs: {required: true},
            app: {required: true},
            color: {default: '#f47920'}
        },

        computed: {
            caption() {
                return this.curs.type == 'knolyx' ? 'Deschide cursul' : 'Material curs';
            },

            btnColor() {
                return this.curs.type == 'knolyx' ? '#fdc01f' : this.color;
            },

            courseUrl() {
                return this.curs.type == 'knolyx' ?  this.$config.knolyx.url + this.curs.k_id : this.curs.url;
            }
        },

        methods: {
            OnClick(e) {
                e.preventDefault();
                if(this.curs.type == 'knolyx')
                {
                    this.app.requests.Openknolyxcourse
                        .ResetData()
                        .SetData({
                            curs_id: this.curs.id,
                            url: this.courseUrl,
                            user_id: this.$user.id,
                        })
                        .Request([
                            response => {
                                Redirect(this.courseUrl);
                            }
                        ])
                }
            }
        },

        name: 'DCursUrl',
    }
</script>