<template>
    <v-sheet
        :outlined="outlined"
        :color="isCurrent ? '#00a0db' : null"
        class="pa-1 d-flex align-center clickable rounded"
        
        v-scroll:#country-scroll-target="onScroll"
        @click="OnClick"
        @contextmenu="OnRightClick"
    >
        <v-sheet 
            width="calc(100% - 60px)"
            class="transparent text-caption text-truncate"
            :class="{
                'white--text': isCurrent,
            }"
        >
            {{ country.name }} 
        </v-sheet>

        <v-sheet 
            width="60"
            class="transparent text-right"
        >
            <v-chip
                small
                outlined
                :color="isCurrent ? '#ffffff' : null"
            >
                <span 
                    :class="{
                        'white--text': isCurrent,
                    }"
                >
                    {{ country.regions_count}}
                </span>
            </v-chip>
        </v-sheet>
    </v-sheet>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            country: {required: true},
            outlined: {default: false},
        },

        computed: {
            currentCountry() {
                return this.app.classes.Countriespage.currentCountry;
            },

            isCurrent() {
                return this.currentCountry && (this.country.id == this.currentCountry.id);
            }
        },

        methods: {
            OnClick() {
                this.app.classes.Countriespage.currentCountry = {...this.country};

                this.app.dataSession.Regions
                    .SetWheres([
                        "(`regions`.`country_id`=" + this.country.id + ")"
                    ])
                    .Post();
            },

            OnRightClick(e) {
                e.preventDefault();
                e.stopPropagation();

                this.app.menus.Countryrightmenu.Show(
                    this.$parent,
                    {
                        x : e.clientX, 
                        y: e.clientY
                    }, 
                    [
                        this.app.menus.Regionrightmenu,
                        this.app.menus.Cityrightmenu
                    ],
                );
            },

            onScroll() {
                this.app.menus.Countryrightmenu.visible = false;
            }
        },

        name: 'CountryRecord',
    }
</script>