var VPViewedMateri = (function () {
    let vt_template = `
    <div class="card-style">
    <h4>Log Aktivitas</h4>
    <div v-if="data.length<1" class="text-center">Tidak Ada Aktivitas</div>
    <div v-for="log in data" class="single-notification">
        <div class="notification">
            <div class="content">
                <p class="text-sm text-gray">
                    <span class="">{{log.nama}} Melihat Materi "{{log.judul}}" Pada 
                        <template v-if="log.moment.format('YYYY-MM-DD')==mm().format('YYYY-MM-DD')">
                            {{log.moment.format('HH:mm')}}
                        </template>
                        <template v-else-if="log.moment.format('YYYY-MM')==mm().format('YYYY-MM')">
                            {{log.moment.format('DD HH:mm')}}
                        </template>
                        <template v-else-if="log.moment.format('YYYY')==mm().format('YYYY')">
                            {{log.moment.format('DD MMMM HH:mm')}}
                        </template>
                        <template v-else>
                            {{log.moment.format('YYYY-MM-DD HH:mm')}}
                        </template>
                    </span>
                </p>
            </div>
        </div>

    </div>
    <!-- end single notification -->

</div>
`;

    return {
        name: "viewed-materi",
        props: ['mid'],
        template: vt_template,
        data() {
            return {
                materi_id: '',
                data: [],
                color: ['primary', 'danger', 'warning', 'success', 'secondary'],
            }
        },
        mounted() {
            if (this.mid) this.materi_id = this.mid;
            if (!this.mid) this.materi_id = window.location.href.split('/')[7];
            this.load();
            setInterval(this.load, (1000 * 60) / 2);
        },
        methods: {
            load() {
                let url = this.$store.state.config.base_url + `/panel/e-learning/jadwal-mengajar/materi/${this.materi_id}/viewed`;
                axios({
                    method: 'GET',
                    url: url,
                }).then((response) => {
                    if (!isObject(response.data)) return setTimeout(this.load, 1000);
                    this.data = response.data.map(v => {
                        v.moment = mm({ unix: v.updated_at });
                        return v;
                    })
                }, (error) => {
                });
            },
            mm() {
                return mm();
            }
        }
    }
})();
