var VPLogActivity = (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" style="padding:0">
        <div class="notification">
        <table class="table">
        <tbody>
            <tr>
                <td style="width:70px">
                    <div class="image">
                        <img :src="log.photo" :onerror="$store.state.config.onerrorAvatar" :alt="'Foto '+log.fullname">
                        <span v-if="false" class="status"></span>
                    </div>
                </td>
                <td>
                    <h6>{{log.fullname}}</h6>
                    <p class="text-sm text-gray">
                        <span class="">{{log.detail}}</span>
                    </p>
                    <span class="text-sm text-medium text-gray">{{log.time}}</span>
                </td>
            </tr>
            </tbody>
        </table>
        </div>

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

</div>
`;

    return {
        name: "log-activity",
        props: ['ut', 'lim', 'ui', 'sd', 'ed'],
        template: vt_template,
        data() {
            return {
                data: [],
                color: ['primary', 'danger', 'warning', 'success', 'secondary'],
            }
        },
        mounted() {
            this.load();
            setInterval(this.updateTime, 100);
            setInterval(this.load, (1000 * 60) / 2);
        },
        methods: {
            load() {
                let url = this.$store.state.config.base_url + `/panel/logs/all?`;
                if (this.ut) url += `&ut=${this.ut}`;
                if (this.ui) url += `&ui=${this.ui}`;
                if (this.lim) url += `&lim=${this.lim}`;
                if (this.sd) url += `&sd=${this.sd}`;
                if (this.ed) url += `&ed=${this.ed}`;
                axios({
                    method: 'GET',
                    url: url,
                }).then((response) => {
                    if (!isObject(response.data)) return setTimeout(this.load, 1000);

                    this.data = response.data.map(v => {
                        v.initial = v.fullname.match(/(\b\S)?/g).join("").toUpperCase().substr(0, 3);
                        v.color = this.color[Math.floor(Math.random() * this.color.length)];
                        if (mm().unix() < v.created_at) {
                            v.time = "Baru saja";
                            return v;
                        }
                        let time = secondsToTime(moment().unix() - v.created_at);
                        if (time.s > 0) v.time = `${time.s} Detik`;
                        if (time.m > 0) v.time = `${time.m} Menit`;
                        if (time.h > 0) v.time = `${time.h} Jam`;
                        if (time.d > 0) v.time = `${time.d} Hari`;
                        v.time += " Lalu";
                        if (v.time.indexOf('undefined') != -1 || v.time.indexOf('Lalu Lalu') != -1) v.time = v.created_at;
                        return v;
                    });
                }, (error) => {
                });
            },
            updateTime() {
                this.data = this.data.map(v => {
                    if (mm().unix() < v.created_at) {
                        v.time = "Baru saja";
                        return v;
                    }
                    let time = secondsToTime(moment().unix() - v.created_at);
                    if (time.s > 0) v.time = `${time.s} Detik`;
                    if (time.m > 0) v.time = `${time.m} Menit`;
                    if (time.h > 0) v.time = `${time.h} Jam`;
                    if (time.d > 0) v.time = `${time.d} Hari`;
                    v.time += " Lalu";
                    if (v.time.indexOf('undefined') != -1 || v.time.indexOf('Lalu Lalu') != -1) v.time = v.created_at;
                    return v;
                })
            }
        }
    }
})();
