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

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

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

        computed: {
            currentRegion() {
                return this.app.classes.Regionspage.currentRegion;
            },

            isCurrent() {
                return this.currentRegion && (this.region.id == this.currentRegion.id);
            }
        },

        methods: {
            OnClick() {
                this.app.classes.Regionspage.currentRegion = {...this.region};

                this.app.dataSession.Cities
                    .SetWheres([
                        "(`cities`.`region_id`=" + this.region.id + ")"
                    ])
                    .Post();
            },

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

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

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

        name: 'RegionRecord',
    }
</script>