<template>
    <v-card
        tile
        flat
        class="pa-1"
    >
        <curs-preview 
            :curs="curs"
        />

        <v-sheet :height="height - 8 - 120" class="overflow-y-auto">

            <v-sheet class="text-body-2 mt-2 d-flex justify-space-between">
                <div>
                    {{ curs.category ? curs.category.name : __('Nu are categorie') }}
                </div>

                <div>
                    {{ curs.adresare ? curs.adresare.name : __('Nu are adresare') }}
                </div>
            </v-sheet>

            <v-sheet class="text-body-2 mt-2">
                <curs-perioada-valabilitate 
                    :curs="curs"
                />
            </v-sheet>

            <v-sheet class="text-body-2 mt-2 d-flex justify-space-between">
                <div>
                    {{ curs.type }} - {{ curs.tip }}
                </div>

                <div v-if="curs.status == 2" class="green--text">
                    {{__('Activ (Nelimitat)') }}
                </div>

                <div v-else-if="curs.status == 1" class="green--text">
                    {{__('Activ') }}
                </div>

                <div v-else class="red--text">
                    {{__('Inactiv') }}
                </div>

            </v-sheet>

            <v-sheet class="mt-2">
                <div class="font-underline">
                    {{ __('Tematica') }}
                </div>

                <div 
                    v-for="(item, index) in tematica"
                    :key="'item-' + index"
                    class="pl-4 text-caption"
                >
                    {{1 + index}}. {{item.text}}
                </div>
            </v-sheet>

            <v-sheet 
                height="100"
                class="overflow-y-auto text-caption mt-2 mb-4" 
                v-html="curs.descriere || __('Nu are descriere')"
            >
            </v-sheet>

            <v-sheet class="d-flex justify-space-between mb-1">
                <div>
                    {{__('Număr clienți') }}
                </div>

                <v-chip small outlined color="primary">
                    {{numarclienti}}
                </v-chip>
            </v-sheet>

            <v-sheet class="d-flex justify-space-between">
                <div>
                    {{__('Număr utilizatori') }}
                </div>

                <v-chip small outlined color="primary">
                    {{numarutilizatori}}
                </v-chip>
            </v-sheet>


            <v-sheet class="d-flex justify-center mt-4">
                
                <cs-btn 
                    caption="Deschidere"
                    tooltip="Deschide cursul"
                    color="primary"
                    @click="OnClickDeschidere"
                />

            </v-sheet>

        </v-sheet>
    </v-card>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            height: {default: null},
            width: {default: null},
            curs: {required: true},
        },

        computed: {
            tematica() {
                return _.orderBy(this.curs.tematica, [item => item.order_no], ['asc']);
            },

            numarclienti() {
                return this.app.dataSession.Cursuriatasate.customers_ids.length;
            },

            numarutilizatori() {
                return this.app.dataSession.Customercursuriuser.user_ids.length;
            }
        },

        methods: {
            OnOpenCourseKnolyx(curs) {
                this.app.requests.Openknolyxcourse
                    .ResetData()
                    .SetData({
                        curs_id: curs.id,
                        url: curs.my_url,
                        user_id: this.app.user.id,
                    })
                    .Request([                        
                        response => {
                            window.open(curs.my_url, '_blank');
                        }
                    ])
            },

            OnOpenCourseYoutube(curs) {
                this.app.classes.Accescurs.curspreviewmenu.visible = true;
                this.app.classes.Accescurs.curspreviewmenu.curs = {...curs};
            },

            OnOpenCourseFisier(curs) {
                this.app.classes.Accescurs.curspreviewmenu.visible = true;
                this.app.classes.Accescurs.curspreviewmenu.curs = {...curs};
            },
            
            OnClickDeschidere() {
                let method = 'OnOpenCourse' + _.capitalize(this.curs.type);
                return this[method](this.curs);
            },

            OnOpenCourseLink(curs) {
                window.open(curs.url, '_blank');
            },
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'CursAccesCursDetails',
    }
</script>