<template>
    <v-container class="not-fluid">
        <v-row class="reverse">
            <v-col xl="8" lg="8" offset-xl="2" offset-lg="2" class="fade-in fast delay-01">
                <big-section-title title_fa="سیستم مدیریت یک پارچه" title_en="Integrated Management System" desc="هر آنچه مربوط به مدیریت مجموعه ی شما می باشد."/>
            </v-col>
        </v-row>
        <v-row>
            <a
                :href="module.hasModule ? module.href : 'javascript:void(0)'"
                :class="`module col col-xl-2 col-md-2 col-sm-4 col-xs-6 pa-0 fade-in fast flex-justified-center ${module.main_class}`"
                v-for="( module ,key ) in modules"
                :key="key"
                :style="`animation-delay: ${key * 0.1}s;`"
            >
                <icon-tile
                    :theme="module.title_class"
                    :class="module.hasModule ? '' : 'has-blur'"
                    :TitleEn="module.title_en"
                    :TitleFa="module.title_fa"
                    :icon="module.img_url"
                />
            </a>
        </v-row>
        <router-link v-if="getAuthUser.is_owner == 'true' || hostname == originHostName" :to="{name: 'AddModule'}">
            <v-btn large fab color="cyan" fixed bottom left dark style="left:5%">
                <v-icon dark>WMi-plus</v-icon>
            </v-btn>
        </router-link>
    </v-container>
</template>


<script>
    import IconTile from '@Global/components/Tiles/Icon-Tile';
    import {mapGetters, mapActions} from "vuex";
    import routes from '@Global/utils/common/routes';
    import BigSectionTitle from '@Global/components/Dividers/Section-Title-Big';

    export default {
        data: () => ({
            hostname: window.location.hostname,
            originHostName: routes.originHostName()
        }),
        components: {
            IconTile,
            BigSectionTitle
        },
        computed: {
            ...mapGetters("rolePermission", ["getModules", "getAllModules"]),
            ...mapGetters("auth", ["getAuthUser"]),
            modules() {
                let modules = this.getAllModules.filter(x => x.load_in_home === "yes");
                return modules.map(x => {
                    if (this.getModules.map(y => y.id).includes(x.id)) {
                        x.hasModule = true;
                    } else {
                        x.hasModule = false;
                    }
                    return x;
                });
            }
        },
        methods: {
            ...mapActions("rolePermission", ["loadModules", "loadAllModules"]),
        },
        created() {
            this.loadModules();
            this.loadAllModules();
        }
    };
</script>

<style scoped lang="scss">
    .module.border-left {
        border-left: 1px solid #d4d4d4;
    }
</style>
