<template>
    <div>
        <div v-for="e in entries">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a :href="'/entry/' + e.fid">{{ e.title }} {{ e.version }}</a> by 
                    <span v-for="o in owners">
                        <span v-if="o.fid === e.fid">
                            <a :href="'/profile/' + o.uid"><span :style="o.name_colour">{{ o.showname }}</span></a>&nbsp;
                        </span>
                    </span>
                </div>
                <div class="panel-body">
                    <div class="container">
                        <div class="row">
                            <img :src="'/assets/store/' + e.fid + '/screens/1.png'" height="100px" />
                            <br /><br />
                            Submitted on {{ e.submit_date }}
                            <span v-if="e.ld !== 0">
                                , last updated on {{ e.last_date }}
                            </span>
                            <br />
                            {{ e.downloads }} downloads
                            <br />
                            {{ e.views }} views
                            <br /><br />
                            {{ e.description }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from 'moment';

    export default {
        name: 'category-entry-downloads',
        props: [
            'cid',
            'page',
            'limit',
        ],
        data: function () {
            return {
                id: this.cid,
                from: this.page,
                to: this.limit,
                entries: [],
                owners: [],
                groupCol: [],
            }
        },
        created: function () {
            axios.get('/api/rpc/user/getgroupcolours').then(res => {
                res.data.forEach(cb => {
                    this.groupCol.push({
                        'id': cb.id,
                        'name': cb.name,
                        'male': cb.colour_m,
                        'female': cb.colour_f,
                        'unknown': cb.colour_u,
                    });
                });
            });
            axios.get('/api/rpc/file/getfilespagepopulardownload/' + this.id + '/' + this.from + '/' + this.to).then(res => {
                res.data.forEach(cb => {
                    axios.get('/api/rpc/owner/getownersoffile/' + cb.id).then(res => {
                        res.data.forEach(db => {
                            var showName = '';
                            var showCol = '';

                            if (db.display_name !== '') {
                                showName = db.display_name;
                            }
                            else {
                                showName = db.username;
                            }

                            if (db.name_colour !== '') {
                                showCol = db.name_colour;
                            }
                            else {
                                this.groupCol.forEach(re => {
                                    if (re.id === db.perm_id) {
                                        if (db.gender === 1) {
                                            showCol = re.male;
                                        }
                                        else if (db.gender === 2) {
                                            showCol = re.female;
                                        }
                                        else {
                                            showCol = re.unknown;
                                        }
                                    }
                                });
                            }

                            this.owners.push({
                                'fid': cb.id,
                                'uid': db.user_id,
                                'showname': showName,
                                'username': db.username,
                                'display_name': db.display_name,
                                'avatar': db.avatar,
                                'gender': db.gender,
                                'name_colour': showCol,
                            });
                        });
                    });

                    this.entries.push({
                        'fid': cb.id,
                        'title': cb.title,
                        'version': cb.version,
                        'description': cb.description,
                        'submit_date': moment.unix(cb.submit_date).format("YYYY/MM/DD"),
                        'ld': cb.last_date,
                        'last_date': moment.unix(cb.last_date).format("YYYY/MM/DD"),
                        'views': cb.views,
                        'downloads': cb.downloads,
                    });
                });
            });
        }
    }
</script>
