<template>
    <v-sheet
        :width="width"
        :outlined="outlined"
        :color="isCurrent ? '#00a0db' : null"
        class="pa-1 d-flex align-center float-left rounded"

        v-scroll:#country-scroll-target="onScroll"
        @click="OnClick"
        @contextmenu="OnRightClick"
    >
        <v-sheet 
            width="calc(100%)"
            class="transparent text-caption text-truncate"
            :class="{
                'white--text': isCurrent,
            }"
        >
            {{ city.name }} 
        </v-sheet>
    </v-sheet>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            city: {required: true},
            outlined: {default: true},
            width: {default: 200},
        },

        computed: {
            currentCity() {
                return this.app.classes.Citiespage.currentCity;
            },

            isCurrent() {
                return this.currentCity && (this.city.id == this.currentCity.id);
            }
        },

        methods: {
            OnClick() {
                this.app.classes.Citiespage.currentCity = {...this.city};
            },

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

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

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

        name: 'CityRecord',
    }
</script>